While the content is displaying, it isn’t stylized. So, let’s fix this with some simple functions. First off, we’ll need to create a new file called functions.php.
WordPress allows you to modify the way it runs by using the functions.php file. If this file exists in your theme and your theme is currently activated, then WordPress will load this file automatically. You don’t need to add any special headers or run any functions. You should use this file to add scripts, create variables, check for any errors, or anything you want.
Before we start writing our function, add this bit of code into your header.php file inside the <head></head> tags.
<?php wp_head(); ?>
Anyone who uses your theme, may have plugins installed. Other developers may want to load their own scripts and styles for their plugins. By calling this function, you’re giving developers a spot to load their scripts. You’re pretty much telling them. “This is where your scripts will be loaded.” You’ll also need this to load your own scripts, too.
Let’s go back to our functions.php file. Add this bit of code into the file.
add_action( 'wp_enqueue_scripts', 'jk_add_custom_scripts_styles' );
In our header.php file, we used the function wp_head(). If we want to add our own code into the head of our theme, then we have to hook into it. The add_action() function allows us to hook into certain parts of WordPress. We want to hook into the head, but to be more specific we want to hook into the part where it starts adding scripts and styles.
The add_action() function takes in 2 arguments. The first argument is the name of the action you want to hook into. In our case, we want the wp_enqueue_scripts hook. Click here for a list of action hooks available to you. Next, you pass in the name of the function you want to run when this action hook is triggered. You’ll notice I prepend jk_ before the actual function name. Since there will be many plugins used in 1 WordPress site, we have to avoid collisions with them. So, I add my initials to give our function a unique name. You may and should do the same with your initials.
Inside our function is where we’ll be adding our code for now. Add this line of code inside our jk_add_custom_scripts_styles() function.
wp_register_style( 'cool-blue-style', get_template_directory_uri() . '/css/coolblue.css', array(), false, 'screen' );
The wp_register_style() function is provided by WordPress. This function registers our styles for our theme. This function has 5 parameters. The first 2 are required and the last 3 are optional. Let’s go over each one.
- Handle – This will be the name of the style when you need to reference it. It should be a unique and special name.
- Source – The location of this style sheet. This must be a Full URL
- Dependencies – An array that contains a list of style sheets that should be loaded first before this style sheet. You must pass in their handle names.
- Version – The version of this script. This is to make sure the highest version is loaded and not an outdated one.
- Media – The media type for this style sheet. Media, all, screen, etc. A list of all media types can be found by clicking here.
You’ll notice we’re using a function called get_template_directory_uri(). This function returns the URL to where your theme is stored. This function also detects if SSL is active. We then append the location to our CSS files. As I stated earlier, our style.css file will contain our header information. The actual file with all the CSS is the coolblue.css stored in the css folder.
Now that we’ve registered our script, let’s enqueue it. To do this we add this 1 line of code inside our function.
wp_enqueue_style( 'cool-blue-style' );
The wp_enqueue_style() function takes in 5 parameters. We only have to pass in 1 because we registered our script. The parameters are exactly the same as the wp_register_style() function. The difference is the wp_enqueue_style() actually adds our CSS file to the header. All you have to do is pass in the handle name for the CSS file. So, why do we register it anyway?
It’s quite simple actually. By registering the style sheet, you make it available to enqueue it at a certain point rather than adding it right away. You can also unregister the style sheet if you need to.
If you refresh your page, then you should see our site looking a bit better. There are a still a couple things to do, but so far so good. Go to your header.php file and delete this line of code.
<link rel="stylesheet" type="text/css" media="screen" href="css/coolblue.css" />
Some of you may be wondering as to why we should do it this way instead of just linking to it in the head tags. There is no right way, but WordPress recommends this way for adding style sheets. If you would like more information about these functions, then click here.