This time we are going to add CSS and Javascript to a WordPress child theme using the functions.php file.
First of all we must upload or create the .css and .js files to a folder in our child theme.
We can do it through the control panel from our hosting or via FTP with Filezilla, but for this tutorial we will use a plugin called File Manager for WordPress.
To install it, we go to the WordPress administration menu and click on the Plugins section and Add New.
And in the plugin search engine we write “File manager”, we click on “Install”, then on “Activate” and that’s it.
The “WP File Manager” option will appear and we click on it. Once loaded, it will show us the folders of our WordPress installation:
In the File Manager we look for the “wp-content” folder and within it the “themes” folder, which is where our theme and its Child theme will be.
We open the child-theme folder and inside we right click to create the “tu-js-o-css” folder (you can name it whatever you want).
Inside the “tu-js-o-css” folder we create the files where we will include our CSS and JS, which for this tutorial we will call “Ejemplo.css” and “Ejemplo.js”:
We right click on the “Ejemplo.css” file and click on “Code Editor”, a new window will open and we paste or write the CSS code in it and click on SAVE & CLOSE:
Then in WordPress we go to “Appearance” and “Theme Editor” and click on functions.php:
To include the codes that we have created in the “tu-js-o-css” folder to the WordPress functions, we will paste the following code in functions.php:
/*
*
Calling additional CSS and JS to WordPress
*/
function ejemplo_scripts() {
wp_register_style('ejemplo-style-css', get_stylesheet_directory_uri().'/tu-js-o-css/Ejemplo.css', '', '1.0','all');
wp_register_script('ejemplo-script-js', get_stylesheet_directory_uri().'/tu-js-o-css/Ejemplo.js','','1.0', false);
wp_enqueue_style('Ejecutar-CSS', get_stylesheet_directory_uri(), array('ejemplo-style-css'), '1.0');
wp_enqueue_script('Ejecutar-JS', get_stylesheet_directory_uri(), array('ejemplo-script-js'), '1.0', false);
}
add_action( 'wp_enqueue_scripts', 'ejemplo_scripts' );The text colors in the code have no function, they just serve to highlight that you can change the colored names in tomato and orange of the function.
But in wp_enqueue_style and wp_enqueue_script you should use the tomate colored names that you wrote in wp_register_style and wp_register_script.
To add more style sheets and javascript codes to WordPress we must first create a main function where we’ll locate the files paths using wp_register_style for the CSS and wp_register_script for the Javascript.
Once we located their path, we’ll call the files with two additional functions inside our main function: wp_enqueue_style for the styles and wp_enqueue_script for the Javascript.
Finally we run the main function with add_action using the hook ‘wp_enqueue_scripts’.
wp_register_style: To record the full path of CSS files on WordPress.
wp_register_script: To record the full path of Javascript files on WordPress.
get_stylesheet_directory_uri(): To get the parent directory where we put the folder adicional assets.
wp_enqueue_style: To run CSS files registered with wp_register_style.
wp_enqueue_script: To run JS files registered with wp_enqueue_script. Use true or false at the end to determine if the file will be located in the header or footer of the page.
More info about this functions at WordPress documentation.
Staying as in the image below. To save the changes we give “Update file”:
Once the codes are included, we must call them to an html page, for that we create a new WordPress page (or you can also do it in an existing page), place the HTML and add the classes required for it to work:
And voila our JS and CSS files are called and executed by WordPress:
If it doesn’t work, make sure you included the codes correctly, by checking your browser’s code inspector, the files in this case (“Example.css” and “Example.js”) should look like:
And that would be it for this tutorial to add CSS and Javascript to the WordPress Child theme using functions.
You can read other posts on my blog or follow me on my social networks to stay updated:
Facebook Linked InHope you have a nice day 😀 .
