First real version of theme index -file

Part 5, Finalizing index.php

Buy the book

These articles are excerpts from the book's manuscript draft. You can read the book here or in an easier-to-read format and finalized by purchasing the finished book.

Table of Contents

In the previous article, we started with theme files and got the static design visible using our theme index.php file. That was a good start. In this article, we remove all the static content from the HTML code and replace it with content created with WordPress.

What content is dynamic in index.php

We copied the static HTML to the index.php file in the previous article. We also made WordPress load the stylesheets using functions.php and WordPress action wp_enqueue_scripts. That was a good start, but all the content is still static and written in the code file, which is unacceptable. So today, we will remove the static content from the file and replace it with WordPress functions that display equivalent content stored in the WordPress database or filesystem. I will start at the top of the index.php file and move towards the file’s end. Let us get started.

Page language attribute

The page language attribute is essential for assistive technologies and SEO purposes. The language attribute is in the HTML root element, and the value must match the language of the page content. So, for example this article is in English, and the lang attribute must be “en”. The language is defined in the lang attribute like this:

				
					<html lang="en">
				
			

In WordPress, you can find the site language in the Dashboard – Settings – General and the “Site Language” dropdown selection. This setting will set the language of the admin area (the Dashboard), but more importantly, it specifies the language of the content.

Setting the page language in index.php

to set the language in WordPress page template file we must call function

language_attributes() 
				
					<html <?php language_attributes(); ?>>
				
			

Notice the PHP tags inside the <html> -element.

WordPress code reference language_attributes

Page character encoding

Character encoding is essential to make content rendered correctly on every server, device, browser, or user agent regardless of the language of your content. However, because WordPress is meant to be dynamic, we do not want to hard code the character encoding into the header. So, let’s tell WordPress to use the settings from WordPress and use the charset from the server.

Change the <meta> element to define charset like in the code example below.

				
					<meta charset="<?php bloginfo( 'charset' ); ?>" />
				
			

Next comes the <title>.

Set the title element to match page title

The next step is to set the site title to match the page title and possibly the site name. Again the title element is essential for assistive technologies and search engine optimization (SEO). The title is the first that a screen reader announces to a user. And the title should express in what page the visitor is entering.

The title, URL, and the h1 element should all match each other. And as a theme developer, you have to make it happen.

To set the <title> element we do not add the element at all in the <head> but remove the whole element! The current method to set a title is to add the title as a feature your theme supports. This we do in functions.php.

So, first delete the whole line with <title> -element from the index.php file. Then open the functions.php file for edit.

Add theme support in functions.php

To add support to WordPress features, we need to add an action in functions.php. The action is “after_setup_theme”. So, add the function like this:

				
					function wpsmithy_setup() {
	add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'wpsmithy_setup' ); 
				
			

This will do the trick. Your theme will show the page name as a title just as it should.

Good, now we are done with the <head> -element. Let’s proceed to the <body> -element.

Displaying page content

This is where all the magic happens in a theme. As a theme developer, you provide only the template, and the user will provide the content. Therefore, we should design our themes to be good with any content.

The mechanism that WordPress uses to display the content is called the loop. Loop extracts each page or post data from the database and inserts it into the page. The loop will provide us as a theme developer a “Post” -item that has all the content we need. We then need to place it onto the page.

This is an example of the loop we are using on our page.

				
					<?php
	if ( have_posts() ) : 
		while( have_posts() ) : the_post();
			the_content();
		endwhile;
	endif;
?>
				
			

We need to split this code into pieces on our design, but this is just what theme development is. Let’s get going.
Read about the Loop in WordPress documentation

First, remove all the content inside the <main> element.

Because our design is such that the “hero” element with page-title is before <main> element, we can not place all the code in one place.

To simplify the idea;

  • We call the WordPress loop and get the post object.
  • Then we read the title and description from the post object and place them into the <h1> heading.
  • Finally, we will place the actual content into <main> -element.

See the code example below:

				
					<?php
	if ( have_posts() ) : 
	while( have_posts() ) : the_post();
?>

<div class="hero">
	<h1><?php the_title(); ?><br><?php echo get_bloginfo('description'); ?></h1>
</div>

<main id="main" class="limited-width">
	
	<?php
		the_content();
	?>

</main>

<?php
	endwhile;
	endif;
?>
				
			

functions to display content

This is all the content between closing </head> element and opening <footer> element. Within the loop we have used WordPress functions:

  • the_title()
  • get_bloginfo()
  • the_content()

difference between functions with beginning the_ or get_

Notice also the PHP echo command used together with get_bloginfo() function. This is because the WordPress functions that start with “the_” will echo their content automatically, whereas the functions that start with “get_” will only return the value but do not echo it to the page.

Whenever you use a function to get the value (a function that starts with “get_”), you need to echo it yourself.

Setting the title

To display the page title in the <h1> element we call the function the_title(). And to display the tagline we need to call the get_bloginfo(‘description’) and echo its contents to the <span> element inside the <h1>. The span is used to style the heading further if needed.
Read about the bloginfo function in WordPress documentation

So, the heading looks like this

				
					<h1><?php the_title(); ?><br><?php echo get_bloginfo('description'); ?></h1>
				
			

Insert the content into the main element

The loop has returned us the post -object, which contains the title and content and much more, but we will get into that content later.

At this stage of our theme development we just need to display the page content , which we do using the ‘the_content()‘ function.

				
					<main id="main" class="limited-width">
	<?php
		the_content();
	?>
</main>
				
			

Closing the while-loop and if-condition

Finally, we open a PHP block again after <main> element to close the if-condition and while loop. These were opened in the code block right after <head> element.

Footer content

Ok, we have made our static index page dynamic to display content from WordPress. Great! But what about the footer content?

The content in the footer is not specific to any one page but is common to all pages on the site. The content is not readable from the post-item that contains the page content.

We need to enable our theme to support other content areas than the specific page content. We will use so-called widgets and widget areas to allow users to add and modify content inside the footer. And I’m sorry, but we are not doing it now. There are more important tasks to do, learn and understand before getting into those.

How does this series of tutorials continue from here?

We have learned the basics of how WordPress displays its content and the role of a theme. But writing theme code is more than that. I want to teach you to 

  • organize your code correctly,  
  • write cleaner and more maintainable code
  • understand inner WordPress functions, 
  • store the code safe and have versioning and backups available
  • know the WordPress template hierarchy
  • adding theme support for features
  • work with Dashboard 
  • etc.

So, if you thought that this was it, that theme development was this easy and simple, you were wrong. What we have just done is a demo to show the basic idea. If you followed me this far, you have made a great deal of learning WordPress development. The rest just takes some more time.

The next articles

In the following articles, I will focus on structuring our theme code in smaller maintainable pieces of code. I will show you some tools to use and how to store code in a safe place as a backup and version management.

Till next time.

Picture of Kari Selovuo

Kari Selovuo

Leave a Reply

Your email address will not be published. Required fields are marked *