Adding stylesheets and js to WordPress

Sometimes you want to call a separate css stylesheet, or more importantly, extra js libraries you might be using for special functionality in your theme. To do this, add the following bit of code to your functions.php file

* Register with hook 'wp_enqueue_scripts', which can be used for front end CSS and JavaScript
add_action( 'wp_enqueue_scripts', 'stylesheets' );
add_action( 'wp_enqueue_scripts', 'scripts' );

* Enqueue stylesheets
* In this case, I'm including a stylesheet for FlexSlider.
* When you view the source of your rendered site, you'll see the stylesheet with id='flexslider-css'
function stylesheets() {
wp_register_style( 'flexslider-css', get_template_directory_uri() .'/flexslider.css' );
wp_enqueue_style( 'flexslider-css' );

* Enqueue scripts
* ... and here I'm including the js for FlexSlider.
function scripts() {
wp_register_script( 'flexslider-js', get_template_directory_uri() .'/jquery.flexslider.js' );
wp_enqueue_script( 'flexslider-js' );

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.