2

I'm trying to build my own Wordpress theme using the correct ways. But...

The first trouble that I found was how to add css and js "using the correct way".

I found severals tutorials how to do it. e.x: http://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way--cms-20402 (this is from "30-Jun-2014") and this one http://code.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins--wp-24321 (this is from "14-Feb-2012") They explain the same way.

Also I took a look of the theme "twentyfifteen" and has another different way.

Let me explain it with code:

If I follow the two tutorials from "tutsplus" my code to add css and js looks like this:

<?php

function scripts() {
    wp_register_style(
        'bootstrap', 
        get_template_directory_uri() . '/css/bootstrap.min.css',
        '3.3.1',
    );
    wp_enqueue_style( 'bootstrap' );
}

function mytheme_enqueue_style() {
    wp_enqueue_style( 'bootstrap', get_stylesheet_uri() ); 
    }
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );

?>

If I follow the way how is made in the "twentyfifteen" theme my code looks like this:

<?php
function scripts() {

    // Load bootstrap.
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', '3.3.1' );

add_action( 'wp_enqueue_scripts', 'scripts' );
?>

I like this last one because is less code and more clear but I don't know if "the correct way".

Of course I read the CODEX but for me it's not clear of all because there are example with both ways. And also I found similar questions but don't answers my question. Including jQuery and JavaScript files the correct way and What's the correct way to include files in Wordpress TwentyTen theme with it's own jquery scripts and css?

I hope some expert or not expert on WP can help me.

Thank you! :)

  • 1
  • Both are correct. I would prefer the second way though. You don't have to enqueue and register a style or script, you can just enqueue it if you are not going to load a script/style conditionaly. Just to note, in the function mytheme_enqueue_style(), this is the correct method in loading the main stylesheet in a theme – Pieter Goosen Jan 7 '15 at 11:11
  • Thanks for your comment, @kraftner that post is one year old. That is te reason I opened a new one, to know the answers from actual expert people. – andresgl Jan 8 '15 at 9:21
  • @Pieter Goosen, Thanks for your comment. From now I prefer it. :) – andresgl Jan 8 '15 at 9:23
2

Pretty straightforward answer is both are the correct. In first method you are breaking down the process in two steps. That is needed in case you want to register some scripts but want to load them conditionally at some later time. For example you may want to load some script only when some second script requires this first script. In this case you can simply register your first script and while enqueuing the second script you can specify the handle of your first script as a dependency.

More clear way of explaining this is think jquery. Wordpress registers it by default for you. If you want to use jquery in your site you can either simply enqueue it or enqueue another script which has dependency on jQuery.

If you straight away want to use your scripts then the other method is quite short and clean.

  • Thanks alot for your answer. Now for me it's a little more clear :D – andresgl Jan 8 '15 at 9:26
0

I developed my own theme for project purposes. It is better to use a separate file to call all js and css files which are needed for admin area only and not for frontend displays.

In your themes function.php, give like

require get_template_directory() . '/inc/adminscripts.php'; 

In theme folder, create a folder 'inc' and include the file 'adminscripts.php' here.

// adminscripts.php //

function theme_admin_scripts() {

global $typenow;
    if( $typenow == 'post' ) {
        wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/inc/css/bootstrap.min.css' );
    }  // to include a style in posts only
 wp_enqueue_script( 'custom_script_includes', get_template_directory_uri() . '/inc/js/custom_javascript_file.js', array(), '1.0.0', true );
}

add_action('admin_enqueue_scripts', 'theme_admin_scripts');

create two folders like css and js within inc folder and upload the files here

  • Thanks @Asha Krishna. I will consider your experience when I develop a medium/big project. Thanks a lot! – andresgl Jan 8 '15 at 9:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.