Custom Page Template in Wordpress

Hi there. Let’s continue from our previous tutorial – How to slice and style a wordpress theme – by making a custom page template and style it to work with your current wordpress theme. First, read some basic information about “What Are Pages?” : In general, Pages are very similar to Posts in that they both have Titles and Content and can use your site’s Presentation Templates to maintain a consistent look throughout your site. Pages, though, have several key distinctions that make them quite different from Posts.

Similarities:

• Pages are for content that is less time-dependent than Posts.
• Pages can be organized into pages and SubPages.
• Pages can use different Page Templates which can include Template Files, Template Tags and other PHP code.

Differences

• Pages are not Posts, nor are they excerpted from larger works of fiction. They do not cycle through your blog’s main page.
• Pages cannot be associated with Categories and cannot be assigned Tags. The organizational structure for Pages comes only from their hierarchical interrelationships, and not from Tags or Categories.
• Pages are not files. They are stored in your database just like Posts are.
• Although you can put Template Tags and PHP code into a Page Template, you cannot put these into the content of a Page and expect them to run.

Now, remember that in the Artists Page theme design we have a About Me and a Contact Me custom page templates.

Step 1

Open the PSD design in photoshop and slice the social network links from About Me page and the contact form from Contact Me page ( input, textarea and send button ). Save them for web & devices and store them in the images folder found in your wordpress theme directory. I made a pack for you with the sliced images so don’t get stuck in the first step on this tutorial.

Step 2

Open your favorite coding program, I use Dreamweaver. Create a new PHP file and delete the default code that the program gives you upon creating the file. Save the file in your themes directory and name it about.

Step 3

At the top of the page write the following code:

<?php
Template Name: About Me
?>

The above code defines this about.php file as the “About Me” Template. Naturally, “About Me” may be replaced with most any text to change the name of the Page Template.

Step 4

To have the same style like your current theme, open the page.php file from your themes directory, copy the following code and paste it in about.php below the templates name code:

<?php get_header(); ?>

    <div id="content">

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

            <div id="content-post">
            	<ul>
                <li class="date"><div class="time"><span class="month"><?php the_time('M') ?></span> <span class="day"><?php the_time('d') ?></span></div></li>
            	<li class="title"><h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
                <li class="comments"><span class="comm">off</span></li>
                </ul>
            </div> <!-- end content-post -->

            <div class="clear"></div>

        	<div id="post">
            	<div class="post-text">
                <?php the_content(); ?>
                </div> <!--end post-text-->
            </div> <!-- end post -->

        <?php endwhile; ?>

        <?php endif; ?>

	</div> <!-- end content -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

This shows the Page’s title at the top, and then displays the content.

Step 5

Place the following code between line 25 and 26 in your coding program:

<div class="social-network">
<ul>
<li class="facebook"><a href="#" target="_blank"></a></li>
<li class="twitter"><a href="#" target="_blank"></a></li>
<li class="flickr"><a href="#" target="_blank"></a></li>
<li class="vimeo"><a href="#" target="_blank"></a></li>
<li class="lastfm"><a href="#" target="_blank"></a></li>
<li class="youtube"><a href="#" target="_blank"></a></li>
<li class="myspace"><a href="#" target="_blank"></a></li>
<li class="rss"><a href="#" target="_blank"></a></li>
</ul>
</div> <!-- end social-network -->

These arethe social network links that will appear at the bottom of the page before the content. All you have to do is replace the # with your specific account link.

Step 6

Open style.css and write the following code below the Navigation CSS styling:

/* About Me Page CSS styling --------------------------------------------------------------------------------- */

.social-network { margin: 20px 15px 0 42px; }
.social-network ul { list-style: none; }
.social-network ul li { display: inline; float:left; margin:5px 25px 0 0; }
.social-network ul li.facebook a { background: url('images/facebook.png') center no-repeat; width:152px; height:35px; display:block; }
.social-network ul li.facebook a:hover { background: url('images/facebook-over.png') center no-repeat; width:152px; height:35px; display:block; }
.social-network ul li.twitter a { background: url('images/twitter.png') center no-repeat; width:144px; height:35px; display:block; }
.social-network ul li.twitter a:hover { background: url('images/twitter-over.png') center no-repeat; width:144px; height:35px; display:block; }
.social-network ul li.flickr a { background: url('images/flickr.png') center no-repeat; width:152px; height:37px; display:block; }
.social-network ul li.flickr a:hover { background: url('images/flickr-over.png') center no-repeat; width:152px; height:37px; display:block; }
.social-network ul li.vimeo a { background: url('images/vimeo.png') center no-repeat; width:144px; height:38px; display:block; }
.social-network ul li.vimeo a:hover { background: url('images/vimeo-over.png') center no-repeat; width:144px; height:38px; display:block; }
.social-network ul li.lastfm a { background: url('images/lastfm.png') center no-repeat; width:152px; height:38px; display:block; }
.social-network ul li.lastfm a:hover { background: url('images/lastfm-over.png') center no-repeat; width:152px; height:38px; display:block; }
.social-network ul li.youtube a { background: url('images/youtube.png') center no-repeat; width:144px; height:40px; display:block; }
.social-network ul li.youtube a:hover { background: url('images/youtube-over.png') center no-repeat; width:144px; height:40px; display:block; }
.social-network ul li.myspace a { background: url('images/myspace.png') center no-repeat; width:152px; height:40px; display:block; }
.social-network ul li.myspace a:hover { background: url('images/myspace-over.png') center no-repeat; width:152px; height:40px; display:block; }
.social-network ul li.rss a { background: url('images/rss.png') center no-repeat; width:144px; height:37px; display:block; }
.social-network ul li.rss a:hover { background: url('images/rss-over.png') center no-repeat; width:144px; height:37px; display:block; }

This will style and position the links in the page.

Step 7

For the Contact Me page just follow Step 3 and 4 changing the templates name to Contact Me. Use this plugin – Simple Contact Form – to step up a quick and easy contact form. On line 25 replace this:

<?php the_content(); ?>

With this:

<?php if (function_exists (gCF)) gCF(); ?>

Step 8

The plugin comes with it’s own stylesheet. Edit that with and put the following css code:

#gcf { width:202px; margin:0 auto; }
#gcf input { background:transparent; width:140px; margin:0; padding: 6px 0 0 40px; color:#5f6565; border:none; }
#gcf textarea { background:transparent;	font-family:"Tahoma", Arial, Sans-serif; font-size:13px; color:#5f6565;	border:none; width:150px; height:120px; padding:10px 0 0 30px; }
#gcf-name { background:url('images/name.png') center no-repeat; width:202px; height:38px; margin-bottom: 15px; }
#gcf-email { background:url('images/email.png') center no-repeat; width:202px; height:39px; margin-bottom: 15px; }
#gcf-message { background:url('images/text.png') center no-repeat; width:202px; height:150px; margin-bottom: 15px; }
#gcf-captcha { background:url('images/security.png') center no-repeat; width:202px; height:36px; margin-bottom: 15px; }
#gcf input#sub-c { background:url('images/send.png') center no-repeat; width:202px; height:33px; margin-top:-20px; }
#gcf input#sub-c:hover { background:url('images/send-over.png') center no-repeat; }
#gcf-code { width:136px; height:55px; position:relative; right:-200px; top:-50px; }

Step 9

Log into wordpress administration. Go to Pages and by default there is a About page created if not create it, name it About. On the right, below the Publish box is Attributes box. From Templates, click the drop down menu arrow and the About me page should be there to select it. Write some content if you like then hit Publish. Do the same with the Contact page.

With this completes the tutorial. That was easy, wasn’t it ? Made a pack with the 2 pages and the plugin.