Tag: header

WP: Head & Stylesheet

Based on the last few posts, we currently have the following files in our theme’s root directory:

/ob-test
    /style.css
    /index.php
    /header.php
    /footer.php

style.css

/*
Theme Name: OB-TEST
Author: Omkar Bhagat
Version: 1.0
*/

body {
    color: blue;
}

index.php

<?php get_header();
 
while (have_posts()) {
 
    the_post(); ?> 
  
    <h2> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h2>
    <p> <?php the_content(); ?> </p>
 
    <?php
}

get_footer(); ?>

header.php

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p>This is header text</p>

footer.php

<p> This is footer text </p>
</body>
</html>

In the above setup, the code from the stylesheet doesn’t work. The content of the body doesn’t turn blue.

In WordPress, all the head data can be loaded in a different way, by using the wp_head() function. Therefore, our header.php can be changed to the following code:

<!DOCTYPE html>
<html>
<head>
	<?php wp_head(); ?>
</head>
<body>
	<p>This is header text</p>

The function we added takes care of loading scripts, stylesheets, etc but it doesn’t do that automatically. We need to do a couple more changes.

functions.php

The next thing to do there is to create functions.php file with the following code:

<?php 

function ob_site_files() {
	wp_enqueue_style('ob_site_main_styles', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'ob_site_files');

This is the meat and potatoes of this post. We create ob_site_files function that enqueues a new style by using the function wp_enqueue_style and gets the stylesheet via get_stylesheet_uri.

Next we add an action to trigger the load ob_site_files whenever wp_enqueue_scripts is loaded by WordPress.

This makes our stylesheet active. We know this because the body color changes to blue as follows:

And that’d be all in this post. We learned how to load stylesheet correctly in our newly developed WordPress theme.

WP: More On Header And Footer

In the previous post, we learned about using header.php and footer.php file to fetch and display header and footer on all site pages.

We basically achieved the following structure:

This can be made better by moving our HTML code from index.php to header and footer files, such that index.php only loads the content.

Here’s what needs to be done:

We move our HTML code till the beginning of the <body> tag to header.php and everything else from </body> to footer.php. We continue to fetch header and footer files to index (or any other page) via the getter functions like get_header and get_footer.

Now we don’t need to duplicate that piece of HTML on every page. Instead, we can focus on writing code that is specific to the page we’re working on (e.g. index.php, single.php, page.php, etc).

WP: Header & Footer

In this post we’ll add a header and footer to the theme we created before. This can be done by creating header.php and footer.php files and then calling them by get_header() andget_footer() functions respectively.

Example: Let’s create a header.php file with the following content:

<p> This is header text </p>

And footer.php as follows:

<p> This is footer text </p>

Save both these files in the theme’s root folder (next to index.php). And finally edit index.php to include those “getter” functions as follows:

<h1> <?php bloginfo('name'); ?> </h1>
<p> <?php bloginfo('description'); ?> </p>

<?php get_header(); ?>
  
<?php
 
while (have_posts()) {
 
    the_post(); ?> 
  
    <h2> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h2>
    <p> <?php the_content(); ?> </p>
 
    <?php
}

get_footer();

?>

If we load the site’s front page now, it’ll get us the following result:

Moving header and footer in separate files allows us to customise these files independently.