WordPress: how to make dynamic the Header and the Sidebar of the template?

During the lessons of this guide we have created the major part of our template; today before we go forward introducing the personalization of other elements concerning the theme , we’ll see how it’s possible to improve the organization of the code written so far.

WordPress, in fact, provides functions  that permit to include automatically – inside the template- the code of  some .php file present in the folder of our theme. In this way it’s possible to improve the comprehension of the code and make everything more modular, recalling in a dynamic way portions of the code to use in different template inside the same theme

In one of the first lessons we’ve said that when one realizes a theme for WordPress it’s possible to create several templates (different from each other) to assign at the different elements of the blog: archives, categories, single articles, pages, etc.

If we want to create a template dedicated to the visualization of the single article that would be slightly different from the standard template that we’re creating (for example we want that it contains the list of comments, the form to submit a new comment, a short description of the author, etc.)  in all probability we’ll use  however common elements like for example the header and the sidebar that we have already created.

The functions  get_header() and get_sidebar() provided by WordPress allow us  to include both in a dinamic way the contents of the two files named : header.php e sidebar.php that have to be present inside the theme folder. 

How to make dynamic the header of the template?

To make dinamic the contents of the header of our template – in order to recall it later with the function get header ()- it is necessary to create a new file that we will save  with the name header.php in the same theme folder.

At this point all we have to do is take away from the file index.php of our template all the code part concerning the visualization of the header and paste it inside the new file that we have just created.

So, this will be the markup of our page header.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <title><?php bloginfo('name'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', 'yiw'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', 'yiw'), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_head(); ?>
</head>

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

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

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

		<!-- END HEADER -->

Now in our file index.php, in the place of the portion of code that we took away, we  insert the function get header() that once it executes  it will include in a dynamic way the whole code present in the file header.php.

At this point the beginning part of our page index.php will be like this:

<?php get_header(); ?>

<!-- START LEFT COLUMN -->
<div id="content">
	<?php if (have_posts()) : ?>
	...

Figure 1 - Files in the theme's folder

2. How to make dynamic also the sidebar?

The same concept is applicable also to the sidebar, in fact all we have to do is cut the whole code relating the sidebar that we have created in the previous lesson and past it inside a new file, that we’ll call sidebar.php and that we’ll save in the principal theme folder that we’re creating.

Following the contents of the file sidebar.php:


<div>
<ul>
<!-- START SEARCH FORM -->
<li>
<h2>Cerca</h2>

<form method="get" action="<?php bloginfo('url'); ?>/">
<input value="<?php the_search_query(); ?>"    />
<input value="search" />
</form>
</li>
<!-- END SEARCH FORM -->

<!-- START ARCHIVES -->
<li>
<h2>Archivio</h2>

<ul>
<?php wp_get_archives('type=monthly&show_post_count=1'); ?>
</ul>

</li>
<!-- END ARCHIVES -->

<!-- START CATEGORIES -->
<ul>
<?php wp_list_categories('title_li=<h2>Categories</h2>&hide_empty=0'); ?>
</ul>
<!-- END CATEGORIES -->

<!-- START BLOGROLL -->
<?php wp_list_bookmarks(); ?>
<!-- END BLOGROLL -->

</ul>
</div>

And this is how the contents of the file index.php seems now:

<?php get_header(); ?>

<!-- START LEFT COLUMN -->
<div>
<?php if (have_posts()) : ?>

<!-- START LOOP -->
<?php while (have_posts()) : the_post(); ?>

<!-- BEGIN POST -->
<div <?php post_class(); ?>>

<!-- START TITLE -->
<h2>
<a href="<?php the_permalink() ?>">
<?php the_title(); ?>
</a>
</h2>
<!-- END TITLE -->

<!-- START DATE -->
<p>
<?php the_time('j F Y') ?> by <?php the_author() ?>
</p>
<!-- END DATE -->

<!-- START POST CONTENT -->
<div>
<?php the_content(__('|| Read more &raquo;')); ?>
</div>
<!-- END POST CONTENT -->

<!-- START CATEGORY POST -->
<p>
Pubblicato in <?php the_category(', ') ?>
</p>
<!-- END CATEGORY POST -->

<!-- START COMMENTS -->
<p>
<?php comments_popup_link('No comments &raquo;', '1 Comment &raquo;', '% Comments &raquo;'); ?>
</p>
<!-- END COMMENTS -->

</div>
<!-- END POST -->

<?php endwhile; ?>
<!-- END LOOP -->

<!-- START NAVIGATION -->
<div>
<div><?php next_posts_link(__('&laquo; Next')) ?></div>
<div><?php previous_posts_link(__('Prev &raquo;')) ?></div>
</div>
<!-- END NAVIGATION -->

<?php else: ?>
<h2><?php _e('Not found'); ?></h2>
<p><?php _e('Sorry, but what you are looking for is not here.'); ?></p>
<?php endif; ?>

</div>
<!-- END LEFT COLUMN -->

<!-- START SIDEBAR -->
<?php get_sidebar(); ?>
<!-- END SIDEBAR -->

</div>
<!-- END CONTAINER -->

</body>

</html>

Notice that now in the markup of the page index.php the whole part concerning the header and the sidebar have been eliminated and at their place we’ve used the functions get header() and get sidebar() to recall dynamically the code required.

In Figure 2 you can see how the structure of the files present in the theme folder seems now.

Figure 2 – List of the files present in the theme folder.

3. Which is the difference between  template and subject?

For the non experts it’s probably better starting to explain the difference between theme and template when we’re talking about WordPress, because I’ve noticed that many use both terms in the same way as if they were synonyms.

With the term template we indicate the single graphic layouts to apply to the different typologies of pages that form the website, so we can have a template for the pages that visualize the articles, a template for the pages that visualize the index of the categories, a template for the pages that visualize the search results, etc

The group of these templates, that will form the different pages of the site/blog, will be called theme.

So clarified the difference between these two words, let’s see how to make dynamic a few sections of the template.

4. Why should we make dynamic some sections of the template?

Making dynamic some sections of the main template we’ve made more readable and more comprehensive the code as well as made it modular, we can load these portions of code even on other templates of the same subject.

For example  if we decide to create a new template to apply to the visualization  of the articles and want that this template has the same header and same sidebar of the general one ( as often happens in many blogs), all we have to do is recall – inside the new template – the two sections in a dynamic way with the relative functions we’ve seen.

In this way we also increase the maintenance so if we decide in the future to modify the header (or the sidebar) used at the same time by many templates different from our theme, all we have to do is simply modify the single file header.php or sidebar.php that contains the used markup. Doing this way, the modification has an instant effect on all the templates.

5.The parameters of the functions  get_header() and get_sidebar()

The functions  get_header() and get_sidebar() accept a parameter that, if it passes, will include the  contents of a file that has the same name of the main file (header.php or sidebar.php) followed by a dash and a string that have pass as parameter.

Doing this way get_header(‘name’) will include the contents of the file header-name.php.

Let’s do a practical test to clear our minds: on the page Contacts we want to visualize a header different from the one used in the other pages of the blog/site. So, we can create a new file that we’ll call header-contacts.php in which we’ll insert the relative markup to the header we intend to visualize only on the page Contacts. Afterwards we can recall the contents of this file with the usual function passing as parameter the string contacts that we added to the name of the file: get_header(‘contacts’). So it will include the contents of the file header-contacts.php.

What’s been said is valid also for the function  get_sidebar(),  so if we want to load a different sidebar on a certain page we can create ad hoc a file, for example: sidebar-news.php and recall the contents with the function get_sidebar(‘news’).

We’ll see in action these functionalities in the next lessons, when we’ll develop the other templates for the theme we’re creating.

6. Add the footer to the template

In the last lessons  we’ve created the header  (the heading), the main contents  (the articles to show) and the sidebar of our template. Before we start with the personalization of the other elements let’s finish the development of the general template (index.php) with the addition of a footer at the end of the page.

On our page index.php, immediately after the recall of the sidebar, we add the following line:


<div class="clearer"></div>

On the style sheet we’ll add the appropriate rule:


.clearer {height:0px;overflow:hidden;margin:0px;clear:both;}

The use of the div with the class clearer doesn’t have a structural motif but just presentation: in case the contents of one of the two sections (the list of the articles and the sidebar positioned  with the propriety float of the CSS) is too short and doesn’t cover the height of the other section, it’s necessary to retain the float.

Now we add this markup to the file index.php to obtain the footer of our template:

<!-- START FOOTER -->
<div class="footer">
	<p>Copyright 2010 &copy; Your Inspiration WordPress</p>
</div>
<!-- END FOOTER -->

And this new rule on the associated style sheet:

/*footer*/
.footer p  {text-align:center;font-size:90%;margin:20px 0;}

In Figure 3 you can see how the general template of our theme seems at the end of this lesson

Figure 3 - Our template at the end of this lesson

6.1 How to make dynamic the inclusion of the footer on the template?

The concept of the header and of the sidebar explained in this lesson is valid also for the footer, in fact WordPress puts at our disposal the function get_footer() to recall dynamically the contents of the file footer.php. We must not forget that such file has to be put in the main folder of the theme.

At this point you should be able to recall dynamically the content of the footer that we have just put in.  I’ll  leave it to you  this small task as a work to finish.

7. Conclusions

With this lesson we concluded the development  of the general template of our  theme. At the moment it contains one single template (index.php) that will be used to visualize all types of content present in our blog, since there aren’t any template available.

And  if in the page dedicated to the visualization of the single articles we would like to set a different type of visualization?  In the next lessons we’ll see how to personalize the visualization of the other sections of the blog through the creation of other templates inside the same theme.

8. Index of the articles dealt 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:

5 comments

Trackback e pingback

  1. Tweets that mention WordPress: how to make dynamic the Header and the Sidebar of the template? | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by soshableweb and Tom Bangham, V. Tavares (E-Goi). V. Tavares (E-Goi) said: WordPress: …
  2. wp-popular.com » Blog Archive » WordPress: how to make dynamic the Header and the Sidebar of the template? | Your Inspiration Web
    [...] Read more: WordPress: how to make dynamic the Header and the Sidebar of the template? | Your Inspiration Web …
  3. Hierarchy of the templates and their use: how to create a template for the articles? | Your Inspiration Web
    [...] new here, you might want to subscribe to the RSS feed for updates on this topic. …

Leave a Reply

Current day month ye@r *