tel: +2348055401551 (sms, whatsapp)
skype: tokunboajewole

Wordpress Tutorial: how to create a page-template

In our previous tutorial, we created a child theme, activated it and changed the background color from grey to black, to make sure the child-theme is working perfectly.

In this tutorial, I will explain how to create a custom page template.

'Pages' are a post-type of wordpress, and while most parts of a website's structure / arrangement might look the same, sometimes another page/s need to have a different look apart from the normal. Sometimes, this possibility(page-template) might not be included in the Wordpress theme used, and this is where custom page templates come in.

Too easy an example:

Twenty-ten has 2-page templates: 'Default Template' and 'One column, no sidebar'. On my home page, I want to use the default page template but I want a non-white background; some other color, for example.

So lets create a custom page template.

With reference to the fresh wordpress installation in 'previous tutorial', I have:

  • created a couple of categories,
  • installed FakerPress plugin and populated my wordpress site with a few users, posts and pages
  • created / assigned a menu into Primary Navigation
  • the front page to show latest posts

Ready, Set, Go:

Notes:

  • parent theme is at: wp-content >> themes >> twentyten
  • child theme is at: wp-content >> themes >> twentyten-child

1) copy page.php from parent-theme folder into child-theme folder.

2) rename page.php(in child-theme) to colored-homepage.php(names can be descriptive of use/function).

3) open colored-homepage.php and edit the header as follows...in bold:

<?php
/*
Template Name: My Colored Home Page
*/
get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php
/*
* Run the loop to output the page.
* If you want to overload this in a child theme then include a file
* called loop-page.php and that will be used instead.
*/
get_template_part( 'loop', 'page' );
?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Save and close the file 'colored-homepage.php.

Go back to Wordpress admin. This new page template is now available at Page >> Page Attributes >> Template.

Fig-1: Page-template page attributes

colored-home

4) create a new page: page title = Home. Select 'My Colored Home Page' as template.

5) Create another page titled: Blog. Leave its content blank. Select 'Default Template'. Save the page.

6) Go to Settings >> Reading settings
- front page display = static page
- select 'Home' as front page
- select 'Blog' as posts page
- refresh the frontpage and see your home page:

Now, we could add some CSS for the colored page and edit the div-id accordingly.

Here:

/* css for colored page */
#container-red {
background-color: #00FFFF;
float: left;
margin: 0 -240px 0 0;
width: 100%;
}

and...below (notice the bold line)

<?php
/*
Template Name: My Colored Home Page
*/
get_header(); ?>
<div id="container-red">
<div id="content" role="main">
<?php
/*
* Run the loop to output the page.
* If you want to overload this in a child theme then include a file
* called loop-page.php and that will be used instead.
*/
get_template_part( 'loop', 'page' );
?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

colored-front

note: the above concept could be used beyond mere changing of background color to changing the entire page's layout.

Add comment


Security code
Refresh

I use Linux 24x7

Recent Comments