Create a Custom Wordpress Page

Custom pages are useful when creating new themes or modifying existing ones. To create a custom page is very easy, however, designing one is another matter.

In this example we are going to create a simple custom page with no sidebar.

Step 1 (The most important code of the custom page)

The part that matters the most is the “Template Name”. This can be anything you want. Once you name it, it will be listed as a template under your page templates.

1
2
3
4
5
6
7
8
9

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
/*
Template Name: Your Custom Page Name
*/
?>

Step 2 (Your custom code)

In this example we have taken the original code from the default Wordpress page.php file and made 2 changes. First we removed the sidebar code at the bottom and secondly we renamed the class to “widecolumn”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php get_header(); ?>
 
	<div id="content" class="widecolumn" role="main">
 
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
			<div class="entry">
				<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
 
				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
 
			</div>
		</div>
		<?php endwhile; endif; ?>
	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
	</div>
 
<?php get_footer(); ?>

Step 3 (Add your CSS)

Here you basically create your css code to take advantage of your current theme. The main code you create will use the class “widecolumn” to set the rules for the page. This will all depend on your theme specifics.

Step 4 (Apply the Template to a Page)

This final step is very simple. Once you create your new page in Wordpress, you simply apply the Template from the template’s drop down menu.

Summary

This demonstrates a simple way to create a wide page with no sidebar. However, you don’t have to be limited to just this. You can also create a regular HTML page with some CSS and have it display as a custom page. It’s all limited by your imagination. All you have to do now is experiment and design. Thanks for reading.