Cajen Tutorials

Creating Custom Pages in WordPress

Posted by User Image Cajen | Filed under blogging, tutorial series

Start.

Hi everyone! This tutorial will discuss one of the more versatile customizations that you can do with WordPress – creating your custom pages! By creating custom pages, you can create your own codes and pages, you can also change your default home page, create entirely new pages that does anything that you can imagine outside of the normal WordPress functions. For this blog’s purpose, I am going to create a page that will summarize the tutorials written here. If you’ve noticed, there are two major tutorial categories – one involves graphics and the other involves blogging. For this tutorial, the page will display the tutorials for each particular category. If you noticed, you are going to see 2(two) additional page links at the top of this page- those are the links to the new pages I've created for this blog. Let’s get started.
First we need to create a file which will serve as the template for our pages. So open up a word processor (notepad, etc.) or your favorite website software (dreamweaver, etc.). If you use Dreamweaver, create a php file and delete everything, as it usually generates header information, body tags, etc. Start with an empty file and paste this code:

PLAIN TEXT

PHP:

<?
/*
Template name: tutorial pages
*/
?>

That piece of code will tell WordPress that you are creating a new page template. Next, paste the following code:

PLAIN TEXT

PHP:

<? get_header(); ?>
<div id="main">
</div>
<? get_sidebar(); ?>
<? get_footer(); ?>

Those codes will display your blog’s header, sidebar, as well as your footer. Now the next pieces of code will tell WordPress to display your post title depending on which category your readers choose. We are going to make use of two pages, and use a switch-case function in php to determine which posts to display. Paste the following code after

PLAIN TEXT

PHP:

<div id="main">

and before

PLAIN TEXT

PHP:

Here's the code:

PLAIN TEXT

PHP:

<?
$link = get_permalink(); //get the permalink that we are currently on
switch ($link) { //use switch to determine which posts to display
case "http://localhost/cajentutorials/graphics/": //if permalink graphics is chosen display posts under graphics
?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<ul>
<?php
global $post;
$myposts = get_posts('category=6'); //get and display posts under graphics (category 6 = “Graphics”
foreach($myposts as $post) :
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><?php the_excerpt(); ?></li>
<?php endforeach; ?>
</ul>
<?php
break;
case "http://localhost/cajentutorials/blogging/": //if permalink blogging is chosen display posts under blogging
?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<ul>
<?php
global $post;
$myposts = get_posts('category=5'); //get and display posts under blogging(category 5 = “Blogging”
foreach($myposts as $post) :
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><?php the_excerpt(); ?></li>
<?php endforeach; ?>
</ul>
<?php
break;
default: //error handling, in case someone links to a non-existing category
echo "No posts under that category exists.";
break;
}
?>

Also this code will tell WordPress to display the excerpt of that post and not the entire content. If you wish to display the content instead of the excerpt (say, if you don’t enter excerpts for your posts), then use the_content instead of the_excerpt.

phpMyAdmin

Here's the complete code:

PLAIN TEXT

PHP:

<?
/*
Template name: tutorial pages
*/
?>
<? get_header(); ?>
<div id="main">
</div>
<? get_sidebar(); ?>
<? get_footer(); ?>
<?
$link = get_permalink(); //get the permalink that we are currently on
switch ($link) { //use switch to determine which posts to display
case "http://localhost/cajentutorials/graphics/": //if permalink graphics is chosen display posts under graphics
?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<ul>
<?php
global $post;
$myposts = get_posts('category=6'); //get and display posts under graphics (category 6 = “Graphics”
foreach($myposts as $post) :
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><?php the_excerpt(); ?></li>
<?php endforeach; ?>
</ul>
<?php
break;
case "http://localhost/cajentutorials/blogging/": //if permalink blogging is chosen display posts under blogging
?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<ul>
<?php
global $post;
$myposts = get_posts('category=5'); //get and display posts under blogging(category 5 = “Blogging”
foreach($myposts as $post) :
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><?php the_excerpt(); ?></li>
<?php endforeach; ?>
</ul>
<?php
break;
default: //error handling, in case someone links to a non-existing category
echo "No posts under that category exists.";
break;
}
?>

Save the file, I saved mine “tutorialpages.php” and upload using your favorite FTP. Make sure you upload it to your themes main directory (yourSiteName/wp-content/themes/yourThemeName/).

Now that we have our working page template uploaded, it's time to create the pages. Login to your WordPress dashboard, choose Write->Page. For my blog, I created two pages and named them “Graphics” and “Blogging” respectively. The permalinks for the two pages are: http:cajentutorials.com/graphics/ and http:cajentutorials.com/blogging/ respectively. Take note of the permalinks that your particular blog has generated as you are going to use them in the code that we have discussed earlier. Now when creating the page, make sure that the page will use our custom template, you can assign this by scrolling down and choosing the page template for the page you are creating. When you’re done, click on publish.

page template drop down

You are pretty much done here, you can check your blog and see your newly created pages as well as the link on the top page of your blog.
There are a lot of possibilities that you can do when creating pages, your limit is your imagination. Try and experiment and if you have anything to share, do post it as a comment. Enjoy creating your new pages and again, I would love to check your blog. Please let me know how your blog is doing. Till then!

End.

Rate this:

2.5

Bookmark & Share it: