WordPress Theme Workshop: CSS/JS
- 1. WordPress Theme Workshop: CSS/JS November 4th, 2017 David Bisset davidbisset.com / @dimensionmedia
- 2. Including CSS and JS: The Wrong Way <html> <head> <title>My WordPress Site</title> <script src=“myScript.js”></script> <link rel="stylesheet" type="text/css" href=“mystyle.css"> </html> <body>
- 3. Including CSS and JS: The Wrong Way <html> <head> <title>My WordPress Site</title> <script src=“myScript.js”></script> <link rel="stylesheet" type="text/css" href=“mystyle.css"> </html> <body>
- 4. Including CSS and JS: The Wrong Way <html> <head> <title>My WordPress Site</title> <script src=“myScript.js”></script> <link rel="stylesheet" type="text/css" href=“mystyle.css"> </html> <body>
- 5. Including CSS and JS: The Right Way <?php /** * Enqueue scripts and styles.This Can Be InYour Functions.PHP */ function load_my_scripts() { wp_enqueue_style( 'testme-style', get_stylesheet_uri() ); /* SIMPLE */ wp_enqueue_script( ‘testme-custom-script', get_template_directory_uri() .‘/js/custom_sript.js’ ); /* MORE ADVANCED */ wp_enqueue_script( ‘testme-custom-script', get_template_directory_uri() .‘/js/custom_sript.js’, array(‘jquery’), '20151215', true ); if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } } add_action( 'wp_enqueue_scripts',‘load_my_scripts' );
- 6. Step One AddYour CSS or JS file into your theme
- 7. Step Two: CSS RegisterYour CSS File w/ wp_register_style() wp_register_style( 'my-css-file', // handle name get_template_directory_uri() .‘/css/custom.css’, // the URL of the stylesheet array( 'bootstrap-main' ), // an array of dependent styles '1.2', // version number 'screen', // CSS media type ); wp_register_style( $handle, $src, $deps, $ver, $media );
- 8. Step Three: CSS After registering our style file, we need to "enqueue" it to make it ready to load in our theme's <head> section. wp_enqueue_style( $handle, $src, $deps, $ver, $media );
- 9. Step Three: CSS Two different ways to use wp_enqueue_style(): wp_enqueue_style( $handle, $src, $deps, $ver, $media ); // if we registered the style before: wp_enqueue_style( 'my-bootstrap-extension' ); // if we didn't register it, we HAVE to set the $src parameter! wp_enqueue_style( 'my-css-file', // handle name get_template_directory_uri() .‘/css/custom.css’, // the URL of the stylesheet array( 'bootstrap-main' ), // an array of dependent styles '1.2', // version number 'screen', // CSS media type );
- 10. Step Four: Use Actions We can't just use the wp_enqueue_style() function anywhere in our theme – we need to use "actions".There are three actions we can use for various purposes: // load css into the website's front-end function mytheme_enqueue_style() { wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); } add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' ); // load css into the admin pages function mytheme_enqueue_options_style() { wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' ); } add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' ); // load css into the login page function mytheme_enqueue_login_style() { wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' ); } add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' );
- 11. How to Properly Enqueue Scripts in WordPress Use these in functions.php: wp_register_script() and wp_enqueue_script(); function wpb_adding_scripts() { wp_register_script(‘testme-custom-script', get_template_directory_uri() .‘/js/ custom_sript.js’, array(‘jquery’), '20151215', true); wp_enqueue_script('testme-custom-script'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );