WordPress: How to Create the Theme Header? Part 2

The topic this week is on building a theme for WordPress, it is very interesting and allow us to display the pages of our blog / site that we want to show at any point of our template and complete the process of customization of header the theme that we had already started last week.

In this tutorial we will create pages for the blog and we will ensure that they are displayed in the desired location immediately below the header of the blog that we made in class last week. Of course nothing prevents you from placing the list of pages at any other point of the template.

Are you ready to begin this new class?

Table of Contents

  1. We Create the Pages of our Blog.
    1. How to Set a WordPress Page as the Site Home Page?
  2. How to View the Pages of our Blog within the Template?
    1. Function wp_list_pages
      1. Change the Title of the Header in the Page’s List
      2. Delete the Title of the Header in the Page’s List
      3. Exclude a Page from the List of Pages to Display
    2. Function wp_page_menu
      1. Changing the Default Class Associated to the Menu
      2. Displaying the Home Page Link to the Site/Blog
  3. Customize the Display of our Menu of Navigation
  4. Conclusions.

1. We create the pages of our blog

WordPress provides the ability to create, in addition to classic items that are the foundation of a blog, also the pages as a normal Web site. This way we can for example create pages that describe who we are, our services, the latest news about us, our portfolio to show the latest works, a contact page, etc.. in short, a bit  of classic pages we usually find on a website is a showcase activity/product to promote.

Let us go then to create these pages in the blog that we set as an exercise for this course.

From the Admin Panel click on the Pages menu -> Add New and add to our blog, pages as About, Portfolio, News and Contact, pay attention to insert on each of them an example, the classic “Lorem ipsum …” used to fill the proofs will go well (Figure 1).

Figure 1 - Creation of a WordPress page

Delete Info page – created automatically by WordPress during the installation process – at this point a list of pages should appear as shown in Figure 2.

Figure 2 - List of WordPress pages

1.1 How to Set a WordPress Page as the Site Home Page?

What is even more interesting is that WordPress also gives the opportunity – again from the Administration Panel – to choose which content you want to display as the home page of our website.

At this point, if we wanted, we could choose to make one of our static pages, for example the page “About“, the home page of our site (Figure 3).

Figure 3 - Set an static page such as blog's home page

That way if we installed WordPress in the root of the website whenever you access the site in question, it will display the page content as Home Page About the site.

This section regarding setting up a home page for WordPress has been addressed only for educational purposes, but to practice the realization of our templates without altering the display of the default homepage provided by WordPress in the phase ‘installation‘: “ recent articles“.

Including this, we can finally put our hands on the implementation of our template starting exactly at the point where we stopped last week.

2. How to View the Pages of our Blog within the Template?

To view the pages within our templates, WordPress provides two functions, the first – the most dated – available since version 1.5 is called: wp_list_pages (); the second one, wp_page_menu (), is much more recent and was introduced with version 2.7.

2.1 Function wp_list_pages

This function (wp_list_pages) allows you to view pages with a high level of customization, all this is possible by passing some parameters that the function provides.

Let’s see a practical example applied to our template.

Open the index.php of the template and add the following lines of code in the exact point where we want to show the navigation tree containing the list of the pages of our website/blog:

<!-- START NAVIGATION -->
<ul class="nav">
	<?php wp_list_pages(); ?>
</ul>
<!-- END NAVIGATION -->

In this case we placed the menu right after the paragraph containing the description of our blog, as you can see from the markup below:

<body>
	<div class="container">
		<!-- START HEADER -->
		<h1>
			<a href="<?php echo get_option('home'); ?>/" title="Back to Home Page">
				<?php bloginfo('name'); ?>
			</a>
		</h1>

		<p class="center"><?php bloginfo('description'); ?></p>

		<!-- START NAVIGATION -->
		<ul class="nav">
			<?php wp_list_pages(); ?>
		</ul>
		<!-- END NAVIGATION -->

		<!-- END HEADER -->
	</div>
</body>

Now if we view the contents of the Home of our blog we should see the pages that we created earlier arranged in a bulleted list, as shown in Figure 4.

Figure 4 - Pages display on the blog's header

If you look closely, you realize that the list of pages has a title which by default is Pages, this title may be changed or eliminated by passing a parameter provided by wp_list_page function, specifically by the parameter “title_li“.

2.1.1 Change the Title of the Header in the Page’s List

The parameter “title_li“, if not specified, by default displays the string “Pages“, to edit it, simply pass a string as a different parameter value.

Let’s see an example:

<?php wp_list_pages('title_li=my pages'); ?>

The result should be the one shown in Figure 5. We passed the string my pages as the parameter value title_li.

Figure 5 - Customization of the blog's pages titles

2.1.2 Delete the Title of the Header in the Page’s List

If we want we can completely eliminate the title from the header list of pages.

How?

Simply passing a blank value to the parameter title_li. Let’s see an example:


<?php wp_list_pages('title_li='); ?>

If we now view the page of our blog will notice that the title which was previously set to the list of pages is magically disappeared (Figure 6).

Figure 6 - Deleting of the title from the blog's page list

We can further customize the navigation by using other parameters provided by wp_list_pages() function.

2.1.3 Exclude a Page from the List of Pages to Display.

In case you do not need to view certain pages on our navigation menu, you can do so by excluding the affected pages by using the Exclude switch.

Example: in our template do not want to see the News page in the navigation menu.

Just retrieve the id assigned by WordPress to the page you want to exclude this value and pass through the Exclude switch function wp_list_pages ().

In the file index.php of our template, we modify our function wp_list_pages as shown below:

<!-- START NAVIGATION -->
<ul class="nav">
	<?php wp_list_pages('title_li=&exclude=8'); ?>
</ul>
<!-- END NAVIGATION -->

The result should be the one shown in Figure 7. News page – as you can see – now no longer on the list because it has been explicitly ruled out. If you like, you can exclude multiple pages simultaneously, just pass the values (id of the pages to be excluded) separated by commas.

Figure 7 - Excluding the news page from the navigation

You can further investigate the other parameters provided by wp_list_pages function in this regard I suggest you consult the official documentation that is well crafted and full of examples.

2.2 Function wp_page_menu

We have just said that with version 2.7, WordPress has released a new feature (wp_page_menu) to view a list of pages to display. Why was implemented this new feature? And it differs from the previous?

The function that we discussed in the previous paragraph (wp_list_pages) has two limitations.

The first limit is that the function wp_list_pages () can not generate the entire code needed to display the menu, in fact, if you remember, we who manually add in our template markup needed to display the unordered list .

<!-- START NAVIGATION -->
<ul class="nav">
	<?php wp_list_pages(); ?>
</ul>
<!-- END NAVIGATION -->

This was necessary because the function takes care of just return all the pages created on our blog / site within elements <li> … </ li>.

The second limit of the function wp_list_page() is the fact that it is not able to see the link to the home page, at least not that always intervenes on the code and manually add an item <li> … </ li> at the point you want to connect to the home page of the blog.

The new feature wp_page_menu() compensates for both bounds. It is able to automatically generate the full code needed to display the navigation bar at the same time makes it possible to determine whether to display a link to the home page.

Also using this new function to our template rather than the previous one, since our code is so much cleaner and maintainable. Let’s go see the new feature in action on our template.

Open the index.php file, delete the lines of code we inserted earlier to load the navigation menu and try to get the same result using the new function:

<!-- START NAVIGATION -->
<?php wp_page_menu(); ?>
<!-- END NAVIGATION -->

wp_page_menu() function will automatically generate the following HTML markup:

<div class="menu">
    <ul>
        <li>...</li>
    </ul>
</div>

Check analyzing the source code of the home page of your blog.

2.2.1 Changing the Default Class Associated to the Menu

Through one of the parameters provided by the new function you can change the class name that is associated by default to the menu. The parameter in question is: menu_class.

Example: assign a class called “nav” to our menu.

<!-- START NAVIGATION -->
<?php wp_page_menu('menu_class=nav'); ?>
<!-- END NAVIGATION -->

2.2.2. Displaying the Home Page Link to the Site/Blog

What if we want to see the home page of our site in our menu navigation?

Can simply pass the appropriate parameter (show_home) with a value equal to one (or true) to the function wp_page_menu ():

<!-- START NAVIGATION -->
<?php wp_page_menu('menu_class=nav&show_home=1'); ?>
<!-- END NAVIGATION -->

The result you can clearly see in Figure 8, now in the site navigation is also “Home“.

Figure 8 - wp_page_menu() function used for include the Home page in the navigation menu

You can further investigate the use of the function wp_page_menu () and parameters available, consulting the official documentation.

Now we organise the way in which this list of pages is displayed on the screen and let’s make it aesthetically a bit nicer.

3. Customize the Display of our Menu of Navigation

Let’s put the hands on our style sheet and set some rules that take effect on our navigation menu just created:

/*navigation*/
.nav ul {list-style-type:none;margin:0;padding:0;}
.nav ul li {margin:0;padding:10px;;display:block;float:left;}

We did not do anything exceptional, we simply limited to:

  • remove the default marker list (list-style-type);
  • reset margins and padding of the unordered list;
  • clear margins and set for each list item, 10px of padding for each of the four sides (top, right, bottom, left);
  • make the items in the list of type block and align them left.

Thus we see on screen a navigation menu with various items that compose horizontally (Figure 9).

Figure 9 - Customization of the navigation menu

Obviously we are restricting to minimum aesthetic customizations, just to give an idea of how to proceed. Projects in “real” we will be free to give full rein to our imagination and make the appearance much more appealing.

At this point I would say that we also remove the annoying red border that we assigned to our container a few lessons ago when we had no content to display.

4 Conclusions

That is how our template is shown at the end of the first four classes (Figure 10).

Figure 10 - How is it our theme after our customization

We started from scratch, we created the markup needed to display the header of our topic which is currently composed of the title, description and navigation menu comprising all the pages that we created earlier.

In the next lesson we will enter the heart of WordPress, what in technical jargon is called “the loop” and is used to process and showing the main contents of several pages in which we navigate.

It seemed more difficult it? We are already well advanced. It feels a certain satisfaction to develop something from scratch and see it take shape step by step, do not you agree?

Index of Articles in this guide

In order to make the consulting of this guide easier at the end of each article I will bring the index of all the issues treated.

  1. How to Install WordPress locally?
  2. WordPress: Let’s have a look at the Administration Panel
  3. How to Create a WordPress Template Starting from Scratch?
  4. WordPress: How to Create the Theme header? (part 1) (part 2)
  5. Let’s take a look at WordPress Loop
  6. Adding the Sidebar to our theme
  7. WordPress: how to make dynamic the Header and the Sidebar of the template?
  8. Hierarchy of the templates and their use: how to create a template for the articles?
  9. How to Create Personalized Templates for WordPress Pages?
  10. Using the Widgets on the Sidebar of Our Template
  11. Personalizing the Template of WordPress Comments

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Nando is administrator of Edi Group, a Sicilian web agency founded in 2005. He deals with the development of web applications in php language and the implementation and administration of databases. And besides Microsoft Trainer with years of experience in regional and private training courses as a designer and lecturer.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

4 comments

  1. Alvera Oviedo

Trackback e pingback

  1. Tweets that mention WordPress: How to Create the Theme Header? Part 2 | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Web RSS News, Antonino Scarfì. Antonino Scarfì said: RT @YIW WordPress: How …
  2. Create A Theme
    [...] WordPress: How to Create the Theme Header? Part 2 | Your ... The topic this week is on building …

Leave a Reply

Current month ye@r day *