Loading CSS file in WordPress
Loading CSS file in WordPress
If you have worked with the HTML in the past, you probably already know how to load a CSS file. You include it towards the top of the HTML file in the head section. The HTML code that you must be already familiar with looks something like below:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/master.css"> // loads the CSS file in the HTML document.
<title></title>
</head>
<body>
</body>
</html>Loading a CSS file in WordPress template files is however a bit different than manually loading a CSS file using link tag.
<link rel="stylesheet" href="/css/master.css">In WordPress instead of manually loading CSS file using link tag we use a php function called wp_head();
<?php wp_head(); ?>So the HTML document for WordPress would look something like:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<?php wp_head(); ?>
<title></title>
</head>
<body>
</body>
</html>Let WordPress control the Head.
The wp_head(); function lets WordPress be in control of our head section. So imagine down the road we install a few WordPress plugins and maybe those plugins need to load CSS files of their own. So this function lets WordPress have the final say and load whatever it needs to load in our head.
Alright, now with this line of code in place, all we need to do is programmatically tell WordPress to load our CSS and the way that we do that is by creating a file in our theme folder called functions.php.
Conversation with WordPress System
The functions.php file is a bit different than all of the other WordPress template files. The template files control the HTML that the general public will see on our website. Think of this functions.php file a bit more private. This is our behind the scenes file. This is where we can have a converstaion with the WordPress system itself.
Alright, so back to the task at hand. We want to tell WordPress to load our CSS file. So within this function.php file add following lines of code:
<?php
function university_files() {
wp_enqueue_style('university_main_styles', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'university_files');
?>WordPress lets us give it instructions and tell it what to do by using add_action('a', 'b') function. The first argument is where we tell WordPress what type of instruction we are giving it. Depending on what we are trying to do, WordPress will run this function at different time. In this case we want to load a file, so the special WordPress hook name that we want to hook on to is wp_enqueue_scripts. The name here matters. You need to spell it exactly right or WordPress won’t know what you are trying to do. So this is our way of saying – Hey WordPress, I want to load some CSS or Javascript files. The second argument is where we give WordPress the name of a function that we want to run. It is important to point out that this is going to be a function that we create and define. In this case, we need to make up a name for the function.
Within the body of the function, we can load as many CSS or Javascript files as we want. For now, though we just want to load one CSS file i.e; our main style.css file.
So we will call a WordPress function named wp_enqueue_style(); and within the parenthesis, this function is looking for two arguments. For the first, we just need to make up a nickname for our main stylesheet. This name does not matter. It just needs to make sense to us. The second argument is just a location that points towards the file. In this case, since we just want to work with the main style.css file and that’s sort of the default stylesheet in WordPress, we don’t need to manually spell out a location here. We can just call a WordPress function named get_stylesheet_uri();
wp_enqueue_style('university_main_styles', get_stylesheet_uri());If you would want to add another style sheet you can just duplicate above the line of code inside of the function we defined.
And if you want to load a javascript file instead of CSS, you would just need to do a little change as below:
wp_enqueue_script();Why do we not use Parenthesis when we call a function inside add_action function.
function university_files() {
wp_enqueue_style('university_main_styles', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'university_files');The second argument of the WordPress add_action(); function is a function that we want to call at a specific moment and the first argument defines which moment that should be.
WordPress has tons of different hooks or moments that we can hook on to. So altogether below line of code is basically saying – Hey WordPress, right before you are get ready to output your code that is going to go into the head area, we want to tack on to that moment and we want you to run our custom function.
add_action('wp_enqueue_scripts', 'university_files');Now you might be thinking – Hey, I thought whenever we call a function to run we have to put parenthesis after it. But why is it that we do not have parenthesis after in the function name that is called inside the add_action function?
We don’t add the parenthesis because we don’t want to literally call this function right now which means that instead of you and I immediately calling the function right here now what we are doing is just telling WordPress- hey, here is the name of the function. It’s up to you WordPress to run it at the precisely right moment.
Getting the black admin bar to display on the front end of the site for logged in users.
Let’s start by taking a look at the essential contents of three important WordPress theme files:
header.php
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<?php wp_head(); ?>
<title></title>
</head>
<body> index.php
<?php get_header(); ?> //this line of code pulls in the content of header.php file.
<?php
while(have_posts()){ //keep looking as long as we still have posts to loop through.
the_post(); //gets all post information ready for use.
?> //drop out of php to enter HTML mode.
<h2><?php the_title(); ?></h2> //outputs the post title.
<p><?php the_content(); ?></p> //outputs the content of the post.
<?php //drop back in php mode.
}
?>
<?php get_footer(); ?> //this line of code pulls in the content of footer.php file. footer.php
<?php wp_footer(); ?> // this line of code loads black admin bar for logged in users on front end.
</body>
</html>Right before the closing body tag in footer.php file we call a WordPress function called wp_footer();. If you have ever worked with javascript before you know that a lot of times, you don’t want to load javascript files up in the head section. Instead, you want to load them right before the closing body tag. So this is just our way of giving WordPress the final say before we close out the body tag. So WordPress can use this for all sorts of things like loading javascript files or in this case for adding the black admin bar in the menu bar up at the top of the page on the front end for logged in users.
No Comments