Simple:Press Documentation

FAQ: Create Custom WP Page Template


The purpose of this page is to show the average user how to create a custom page, perform a basic .css file edit as well as the removal of the sidebar. With these skills you will be able to style your SPF forum to your WordPress theme by creating a custom page “forum.php” and performing the necessary style sheet changes to your WordPress themes .css file.

Before you follow this tutorial make sure your theme doesn’t already have a full width template, there’ s a good chance the designer will have supplied a template for you to use already.
Remember that this page is geared towards those that have little or no knowledge about php / css file editing or structure.

Creating your first custom page

Step 1: Creating your forum.php page

Open up your favorite text editor, if you’re using Windows we recommend Notepad as it’s the easiest to save out as a .php file type.

The first thing to do is declare this page as a template. You can do this by entering the following code at the top of the page.

<?php 
    ⁄*
    Template Name: Forum
    *⁄
?>

You can give the Template Name any title you like but keep in mind that you will want to keep it as close to its function as possible.

The next thing that we are going to do is put your site header on our custom page.

Add the following code below the template declaration.

<?php get_header(); ?>

This call grabs your themes header and displays it at the top of your forum page.

The next thing we are going to do is create a new <div> container to hold your custom pages content. The reasoning behind this is simple, what’s the point of creating a custom page if you’re going to use your existing themes styling?

Place the following below the header call.

<div id="fullwidth">

We will look at this in more depth later in the tutorial. All you need to be concerned for now is that we need to create a <div> container ID to hold our custom page information/styling.

You will want to create a <div> ID that is relevant to the purpose of the new page styling. In this example we are stretching the forum across the entire width of the website, hence the name ‘fullwidth’. Feel free to change this if needed.

Let’s add the content that we want our new custom page to show.

Add this bit below the <div> ID.

<div class="post" id="post-<?php the_ID(); ?>">
        <div class="entry">
            <?php the_content('Read the rest of this entry »'); ?>
        </div>
    </div>

Now we have to close our ‘fullwidth’ <div> container.

Paste this line of code at the bottom of the page.

</div>

The last thing to do in this file is add your themes footer to the bottom.

Put this line of code at the end.

<?php get_footer(); ?>

Your finished file should look like this:

<?php 
    /*
    Template Name: Forum
    */
?>
<?php get_header(); ?>
<div id="fullwidth">
    <div class="post" id="post-<?php the_ID(); ?>">
        <div class="entry">
            <?php the_content('Read the rest of this entry »'); ?>
        </div>
    </div>
</div>
<?php get_footer(); ?>

Now save the file and call it something relevant. If you’re using Notepad click on File > Save As and then type the filename ‘forum.php’. In the file type menu just below where you entered the file name, select “All Files”. Now when you hit OK you will have a new forum.php hanging about at the location you chose to save it to.

It is important to save this file as plain text with a .php extension, otherwise it won’t work

Upload this file to your WordPress themes directory /wp-content/themes/(Your themes root folder).

Editing your themes .css

Step 2: Navigate to /wp-content/themes/(Your themes root folder) and look for the style.css file. Open it in Notepad because this is where we will add the styling for the ‘fullwidth’ div ID we created above. Alternatively you can use the built in editor found in your WordPress dashboard under Appearance ☛ Editor and then select the Stylesheet (style.css) file under the Theme File ☛ Styles heading.

Make a copy of this file and keep it as a backup, if anything goes wrong you will be able to use this copy to restore you .css file!

Try searching for ‘#content‘, if you can’t find #content it’s possible your theme doesn’t use this naming convention. However there will normally be something that has a similar meaning, some themes may call it #main for example. But you are looking for the section that contains the styling information for the main content area of your blog. If you look through the file then the chances are something will probably look right.

Next you will want to place the following on a blank line before the #content or what ever it’s called in your theme.

#fullwidth {
    float: left;
    padding: 5px 5px 5px 5px;
    width: 100%;
}

You will need to edit all the settings to match your theme. You can usually get away with setting the width to 100% and just adjusting your margins. There is no quick fix to get this right. Every site is different so it’s going to be somewhat trial and error, if you have an understanding of CSS then you can probably find most of the settings you need in the file.

Save the css file and upload it to your server overwriting the existing one. If you used the theme editor in your WordPress dashboard then you just need to hit the save button.

If you visit your forum page and you are still being plagued by a sidebar you will need to check your header.php file. Perform a search for <?php get_sidebar(); ?>. If it’s present in your header you have a couple of options.

  1. Delete the sidebar call, do this if you do not want the side bar on your site at all.
  2. Open your sidebar.php file and find <!– begin sidebar –> and add <?php if ( is_home() ) { ?> just before it and a <?php } ?> just after it to close the ‘IF’ statement. This is telling the sidebar call that if it’s showing the home page than it needs to show the sidebar and if it’s not showing the homepage it doesn’t need to show the sidebar.

The second option should leave the sidebar intact on your homepage and other pages but will remove it from your custom page.

Now that you have created your custom forum page and edited your theme’s style.css you are ready to apply it to your forum page.

Select Pages from your WordPress dashboard and then find the page that is titled ‘Forum’ and click on edit. When the edit screen opens look to the right of the screen and search for templates. There is a drop down menu, go ahead and select it and chose your new forum.php template and then hit update page. Now go visit your forum, you should see a forum page that fills the entire website without a sidebar.

More Topics In FAQ


Copyright © 2006-2019 Simple:Press. All Rights Reserved.