Blog: Using Templates, setting up a navigation menu and list of posts (More Posts)
At the moment all we’re serving is the catch-all template file, index.php. This is because there’s currently no other template for WordPress to find. It’s looking for one of 2 things: index.php, which it can find right now, or it either needs to find a front-page.php template or home.php template as its homepage.
The templates, front-page.php and home.php have different purposes. The “Front page” template does what it says on the tin. If the homepage is set to be a “static” page in the admin area, it tries to find front-page.php. And if it doesn’t find it, it falls back to index.php
Home.php is different. This is the template that displays a list of “blog posts” on your website rather than having a custom home page.
You have a choice as to whether you want your “homepage” to be served by home.php or front-page.php and that choice is made by your “Reading” settings in the WordPress admin area.
Settings -----> Reading -> "Your homepage displays.... -> "Your latest posts"
Settings -----> Reading -> "Your homepage displays.... -> "A static page".I’m going with “a static page” on this example because I want my homepage to be distinct but not to display a list of posts by default.
So we’ll create it now.
front-page.phpThis will be our first test of the WordPress Template Hierarchy. That is the mechanism by which WordPress determines what template file to use.
I’ll now copy the code currently in index.php and paste it into front-page.php. If you haven’t already, echo a reference to front-page.php to identify the template. It’ll help us check if WordPress is showing us the right template and can be removed when we’ve verified this.
<?php echo "front-page.php"; ?>You’ll then need to make 2 selections from the admin area.
Select a page you want to be served by front-page.php and as the home.php template. Create them in the admin area if necessary.
If all went according to plan, you should see the result of your php echo setting “front-page.php” on the screen.
Using Pages in WordPress
If you are following along, go ahead and add some more Pages in the admin area.
Dashboard ----> Pages ----> Add New PageYou’ll then have enough pages to work out which template you’d like served on each page. If you’re not using home.php or front-page.php or some other custom variation, Pages in WordPress will use the page.php template.
Add that template file to your project.
page.phpPages and Posts in WordPress were designed to get content dynamically and display it using loops. But you can serve your own content directly on the page template files as well.
Create a Menu in the admin area
We hopefully now have several pages on the database. Now seems like a good time to start setting up the navigation for your theme. This is done using WordPress “Menus”.
Menus are one of these features in the dashboard that don’t show up automatically. It’s easy to activate them though and make them available, in the functions.php file.
Add support so that the menus link appears in the admin area using the add support method.
<?php add_theme_support( 'menus' ); ?>To set up a menu there are a lot of things that that need to work together. First, we set up the menu and the order in which those pages appear using the admin area. We register the menu location and then place the menu somewhere appropriate in our theme.
We’ll register the navigation menu first.
function register_main_menu() {
register_nav_menus(
array(
// theme location
'main_navigation' => __( 'main_nav' ),
// You can register additional menu locations here
)
);
}
add_action( 'init', 'register_main_menu' );So here we’ve defined a function that creates a reference to a “menu location”. We can use that reference when we place it somewhere in our template files, such as maybe the header template by using another WordPress method called wp_nav_menu().
That method outputs the menu. You can see the string reference to the theme location and another parameter called “menu_id“.
<?php wp_nav_menu(
array(
'theme_location' => 'main_navigation',
'menu_id' => 'main_nav',
// You can add additional parameters here to customize the menu output
)
);
?>You should have everything you need to know to create the menu in the admin area. Go to the Menus page now.
Appearance -----> Menus -> Edit MenusLook for the “Menu Name” input box and type in an ID for your menu. If you were taking this step first, you would take note of the menu name and include it when writing your methods in code. – (in this case, main_navigation is the one to use).
Then start adding pages from the “add menu items” area. You can easily add, move and order links from these menus by dragging and dropping them into place.
If you’re following this example, you’d love for “main_nav” with disply_location checked.
Now go back to the top of the page in the admin area and click on the “Manage Locations” tab.
Make sure you select an “assigned menu” with the dropdown box and then click “Save Changes”.
All being well, you should see that not only is your menu displaying but that it displays in the order of links you defined in the admin area.
Using the Blog Posts Template (Home.php)
With the menu set up, and the home.php and front-page.php assigned, if you click on the menu link assigned as the blog page, you should see that this link defaults to the index.php template.
We can fix this by creating the home.php template.
home.php The WordPress Loop.
I mentioned before that Pages and Posts were designed to get content from text created via the admin area. This is mainly done via the WordPress Core post types; Pages and Posts. And the way it retrieves this information is through something called the WordPress Loop.
There’s a couple of ways you can write this loop, but this is the structure I prefer
<div class="post_list">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<!-- Content that loops goes here --->
<?php endwhile; else : ?>
<!-- The loop ends at this point -->
<?php endif; ?>
</div>
</article>So we’re saying that if a Post or a Page “has” content, we will keep writing the information we find while we have that content. But if no content is found, we will simply bypass that and print the code in the next code block.
<?php else: ?>Now there are 2 commonly used methods we use within the loop. They are the_content(); which posts the main content and the the_title(); which are core methods that find the main content and the the tioles of Posts or Pages. Very straightforward.
We’re working on the home.php template, so we’re mainly focusing on posting a list of titles. We can provide a link to individual blog posts by using the the_permalink(); method. Here’s an example…
<?php while ( have_posts() ) : the_post(); ?>
<!-- Content that loops goes here --->
<a href="<?php the_permalink(); ?>"><p><?php the_title(); ?> </p></a>
<?php endwhile; else : ?>single.php
When we do this, we’re taking users to the template that handles Single Blog Post pages.
If you haven’t already, add this template to your project. And, if you’ve created a static version of the single.php template that represents the page for single blog posts, copy the code from there into your newly created template.
single.php Find a good place in your template to include both the content and title methods. You won’t need to use the loop in this template.
<?php the_title(); ?>
<?php the_content(); ?>In Summary
We’ve covered a lot in this blog, but I thought it would be best to do so before we go on to the next post.
We’ve created several new templates and demonstrated where they stand in the WordPress Template Hierarchy. There are more things we need to do with these templates but it’s been a good exercise to see how we can use the WordPress Loop and content methods to retrieve content from the WordPress database.
In the next blog, I’ll move on to a use case for working with Custom Post Types.