How Do I Get My Styles to Work?
Now that we have our basic theme files and identified the top and bottom of our pages, you may be tempted to link your CSS and scripts at this point. However, WordPress has an action system that allows you to do this. Using the functions file to “enqueue” styles and scripts using the “WordPress Way” helps you to define dependencies and avoid conflicts with plug-ins and other themes.
Functions and Including CSS / JS
In your theme folder, create a file and name it “functions.php.” The functions file allows us to enqueue styles and enable or customize other WordPress features in our theme. Enqueueing a style or script file means to specify a source file, “style.css” for example, and add it to the list of stylesheets or scripts that WordPress will add to the <head> or footer of our pages:
PHP Tags
A PHP file can contain PHP code and typical HTML content. The functions.php file will only contain PHP code inside the <?php ?> tag:
<?php //Your code goes here ?>
Now we’ll write our custom function that will enqueue our style.css file:
<?php
function jeffhow_scripts(){
// Your code goes here
}
?>
Enqueueing Styles
Now we will use the wp_enqueue_style() function to specify our stylesheet. This is a WordPress function and is defined in the WordPress Codex. Checkout the function reference for wp_enqueue_style(), then add the code to your theme function:
<?php
function jeffhow_scripts(){
wp_enqueue_style (
'jeffhow-styles', // $handle
get_stylesheet_uri(), // $src
array(), // $deps (none here)
'1.0.0', // $vers
'all' // $media
);
}
?>
Now we will add our function to the action queue:
<?php
function jeffhow_scripts(){
wp_enqueue_style (
'jeffhow-styles', // $handle
get_stylesheet_uri(), // $src
array(), // $deps (none here)
'1.0.0', // $vers
'all' // $media
);
}
// Call our function with an Action
add_action('wp_enqueue_scripts', 'jeffhow_scripts');
?>
Before we can test this function, we need to add the wp_head() and wp_footer() to the header.php and footer.php files. Open header.php and add the hook:
<!doctype html>
<html>
<head>
<title>Basic Skeleton</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Reusable header content -->
<h1>Brand</h1>
<nav>Nav</nav>
Next Open footer.php and add the hook:
<footer>
<p>Resuable Footer Content</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
WordPress recommends placing wp_head() just before the closing </head> tag, and wp_footer() just before the closing </body> tag. Now we should be able to test our code. Save all your files, and preview your site in your browser. If you view the source code, you should find the CSS link:
