Creating a New WordPress Page Template
CIMSplash

Artisteer themes, by default give you a one-column page template as well as a template with your sidebar(s) if you choose to create a theme with a sidebar. In your page editor in WordPress, you’ll see in the right hand column just below the “Publish” button, there is a drop-down menu that gives you your page template options. So, on any page, you can choose either the one-column or default page template.

What if you want a unique page styling or design for a specific page on your blog other than just one or two column options? You would simply need to create a new page template. With a new page template, you could have a completely different header styling, call to a separate menu, create a splash page with a separate widget area for sliders, and the list could go on and on.

I’m going to give you an example of how I used this technique to create a unique home page for a recent design project. You’ll notice in the example images below, the home page has a large banner area with a slider to one side and some text to the right, but no regular sidebar. The second image is the default page template with the regular sidebar and no extra banner area in the top.

First, I’ll show you how to create the new page template, then I’ll show you how to modify and style it.

1.) Make a New Page Template: Open a copy of your page.php or your onecolumn-page.php file in a text editor like Notepad (In my case, I opened up the onecolumn-page.php file because I didn’t want the regular sidebar to appear on this page.) Add the following code to the top of the file and be sure to give your template name something that defines what type of page you are making:

<?php
/*
Template Name: splash-page
*/
?>

2.) Save Your New Template: Hit Save As, and rename this page as something different (matching the template name you gave it). Just make sure that you include the -page.php part at the end. In my case, I entitled my page splash-page.php.

3.) Edit Your New Template: What you add or take away from the template is completely up to you. In my case, I wanted to have a different header for the page. The only change I made to this new page template, though, was to call to a new header file. To do this, I just adjusted the following code from this:

<?php get_header(); ?>

to this

<?php get_header('2'); ?>

Notice that in the first line, there is nothing within the parenthesis. this just tells WordPress to find the first header.php file it finds. In the second version, I’ve added 2 in quotation marks because I want WordPress to find the header-2.php file that I created.

3.) Create a New Header File: Open up your header.php file, and save it as header-2.php. Now, add the changes that you want within that new header. In my case, I added some extra sidebars to the header. See my tutorial on how to add a widgetized sidebar into your header.

The following is what I added to the end of my new header file because I wanted my sidebars to rest directly on top of the page content.

This is what the bottom of the original header file looked like after the final div of the menu code:

    <div class="cleared reset-box"></div>
    <div class="art-sheet">
        <div class="art-sheet-body">

This is how the code looked after I added my banner to the new header file:

   <div class="banner">
    <div class="banner-center">
	<div class="banner-left-wrapper"><?php get_sidebar('banner1'); ?></div>
        <div class="banner-right-wrapper"><?php get_sidebar('banner2'); ?></div>
    </div>
    </div>
    <div class="cleared reset-box"></div>
    <div class="art-sheet">
        <div class="art-sheet-body">

Note: This is a great way to add a secondary menu that can only be found on certain pages (for example, if you want different menu items shown on a certain page.) Use my post on how to create a secondary menu to see how you can do this. All you have to do is register a new menu, then replace the primary menu from the new header file with your new secondary menu, and if you want it to look the same as your other menu, you don’t have to adjust anything else.

4.) Style Your New Header: This would apply only if you are adding something that you want to look completely different (rather than just a different menu). In my case, I just needed to add style to the new sidebar area and the wrappers that surrounded it. This is what my code looked like that I added to my css file:

/* begin Banner */
div.banner
{
  position: relative;
  width: 100%;
  height: 285px;
  background-image: url('images/banner.jpg');
  background-repeat: repeat-x;
  overflow: hidden;
}

div.banner-center
{
  position: relative;
  width: 900px;
  height: 285px;
  margin: 0 auto;
}

div.banner-left-wrapper
{
  position: absolute;
  display: block;
  width: 555px;
  height: 265px;
  top: 10px;
  left: 10px;
  border: 1px dashed #965b4c;
}

div.banner-right-wrapper
{
  position: absolute;
  display: block;
  width: 300px;
  height: 285px;
  top: 5px;
  right: 10px;
}
/* end Banner */

That’s all there is to it. The possibilities for styling or editing the code are endless. Remember, that you can also call to a new footer in the new page template that you create, modify the way that the loop is displayed, or call to different sidebars.

Other Suggestions:

  • If you want to adjust how categories appear, simply create a new archive.php, modify, and save it as category-(insert ID here with no parenthesis).php file.
  • This would also apply to styling a single post, etc.

© 2011 – 2012, reflectingthedesigner.com. All rights reserved.

Terri
December 8th, 2011 at 3:13 pm

Hey Hi,

Great to find your site with extremely helpful information! I do have a question…How can I integrate a blog into a static site? I have duplicated my site design (static html pages in the root directory) and installed WordPress in a sub directory. I want the main horizontal menu accross the whole site, including the blog, to be exactly the same. Meaning I want the blog to be linked to from the main site menu and on the blog I want the static existing pages linked to from the blog horizontal nav. In essence I want to merge my menus. I am kinda new to WP design, though not to building static websites. Can you help me understand what the process is to do this task?
Thanks,
Terri

December 8th, 2011 at 10:55 pm

Terri, there is no need to go to all of the trouble of creating static html pages separate from WordPress. WordPress allows you the functionality of creating your entire site through their framework. You just need to set a static page as your home page under the Reading Tab in Settings of your WordPress Dashboard, and choose one of your other pages to act as your blog page. Using WordPress for everything makes it so much easier to add and edit content as well as media and other plugins.

Hope that helps.

Terri
January 23rd, 2012 at 7:51 pm

Thanks so much! I have gotten a handle on the static page and building the entire site in WP, which helps a lot. I have another question, but I’m not sure this is the correct thread. I’ll look for a good spot for the question :-)

Thanks again!

November 18th, 2013 at 5:34 am

You can either just turn your existing blog into multisite, but … I would recommend making a new blog, as multisite, in your domain, and then export/import a sub site. Unless you want the blog to be the main part of the site !
Actually, I would suggest re-evaluating WordPress — as CMS go, it’s a small learning curve, both for you and for him, and it’s possible to strip it right back, so that the only HTML/CSS outputted is what you write yourself.
Check out Roots theme as an option — based on Twitter Bootstrap & HTML 5 boilerplate — or if you prefer, check out some tutorials on coding a theme from scratch. It’s surprisingly quick to get going & you have complete control over the outputted HTML/CSS.

December 24th, 2011 at 8:11 pm

Hi, this is a fantastic resource for Artisteer users! Thank you all the effort that must go into your site.
I am wanting to find out how I can add a “read more” style button to where the text just says read more on my archive pages.
I would like to be able to design the button myself.
Do you know if there is a simple way to do this? I am not all that good at editing code stuff!

December 27th, 2011 at 1:00 am

I thought I had done a post on this, but I guess not. Will have to add one soon. It’s actually fairly simple to do. You’ll need to go into your functions.php file to modify a bit of code in two spots. Just hit Ctrl+F and type in “Continue Reading” and it should bring you to the right spot. You can change the text and span class, then add CSS for that span class in your stylesheet with the image you’ve created. I’ll do a post when I have time of the full details.

Patrick
December 27th, 2011 at 2:26 pm

Hi, you have certainly suggested a way , but given that you start with an Artisteer created template, it still involves hand coding/editing a new file, which surely for may will be daunting if not hot and miss for those not comfortable with hand coding php to get the redesign/styling they want which is surely the point of using Artisteer in the first place for many.
Is there not a way of making a slightly modified version of an existing template in Artisteer. Exporting the WordPress files then copying/renaming any necessary files to your main template folder, adding a new template name to the inside of the new page.php and renaming it so it will be available in the page section.
I’m trying this but for some reason it isn’t working.

December 27th, 2011 at 8:16 pm

Most of my examples demonstrate creating a few different Artisteer exported files and using the styling code from each to get the desired affect. This particular example was to add the extra bar to the page which is not something you can generate within Artisteer itself. You could create a header style that looks like it and copy those files, but there would be a lot of renaming, and in the long run it would be more difficult for someone not used to code to be able to get all of the necessary parts renamed.

If you could be more clear on exactly what you are trying to do, I might be of some help to you.

Ryan
January 9th, 2012 at 7:46 pm

Fantastic! First time to the site and you solved a problem that I have been stuck on for 4 hours.

Thanks!

January 9th, 2012 at 11:45 pm

You’re welcome, and I’m glad it worked for you.

Rebecca
January 29th, 2012 at 3:37 pm

I want to create a “splash page” for my theme that has a different header image at the top. where do I change the code to change the header image on my new splash page. I have the splash page, new header file – just don’t see where to change the image name.

Thanks for the help

Raja
March 21st, 2012 at 1:50 am

Hi Sarah,

Great site with very very insightful articles. It is a definite resource site for Artisteer. I’m a template designer myself (rookie to intermediate). I bookmarked your site because I’ve to come here on regular basis.

Best of luck. Thank you.

March 25th, 2012 at 10:21 pm

I’m glad that it is helpful, Raja.

March 21st, 2012 at 9:34 am

hi sarah,

how do we do this if want boxes in content ?
for eg 3 boxes

in artisteer >> layout >> 3 collums >> same sizes

then working with the custom widgetizing ?
and follow your tutorial >> http://reflectingthedesigner.com/wordpress/2010/12/31/adding-more-widget-styles-to-wp-part-2/

>>> bigblock1 bigblock2 bigblock3 (if you want 3 diff big blocks | adapting css/wrapper/options/widgets)
>>> if layout block al tree the same just bigblock1 ?

and if i want the other pages with different widgets follow
http://reflectingthedesigner.com/wordpress/2010/12/31/adding-more-widget-styles-to-wp-part-2/

and call there like you said
block2
———————-

so then you must call for 1ST the template like here above
and then fill out the content within the widgets?

March 25th, 2012 at 10:20 pm

I’m not quite sure that I understand what you are trying to accomplish. You could create three new sidebars as you mentioned (horizontally covering the screen.) You could actually just copy the footer block code and rename it and you would have 3-4 dynamic sidebar areas. The block styling will always be optional per widget, so that shouldn’t need to change.

As far as showing different blocks on different pages, you just need to add a simple plugin like Widget Logic or Display Widget, and you can set the widgets to appear only on certain pages. So, you can set the new sidebars you’ve created with their widgets to only appear on a specific page if desired.

April 18th, 2012 at 6:46 pm

tanks
gonna try this tmentioned topic also

April 18th, 2012 at 6:56 pm

tried Display Widget
great plugin!!!!

is a must have !!!

August 4th, 2012 at 9:56 am

Thank’s for this (Creating a New WordPress Page Template) great tutorials. I was having a hard time with those.

DB
August 6th, 2012 at 2:41 pm

If I create a second template, how does navigation work within WP? How does my home page know to go look for the new template? Is there code that should be added to the original template (home page)? I am using Artisteer and trying to create a home page with blog posts, as well as other pages that should NOT have blog posts or comments (About, Shop, etc). I cannot remove the comments or sidebar in the other pages. How is this done?

August 26th, 2012 at 9:43 pm

Comments can be removed from individual pages by simply unchecking the Discussion Box toward the bottom of the page editor. You can choose a single column page template, by choosing it from the drop down options underneath the box where you Publish the page. Any new templates you create will be added to that as well. Any time you create a page in WordPress it’s not blog or post related. If you aren’t seeing all your options on your Page or Post Editor, go up to “Screen Options” at the top and be sure that you’ve checked with items you want to see and edit.

November 8th, 2012 at 7:58 am

Thanks for the tutorial! Page templates are really easy to set up and now the theme must come with several page templates – at least for full width option.

November 12th, 2012 at 8:40 pm

As a note, Aristeer generated templates automatically come with a full width option as well as the sidebar option that you select.

LEAVE A COMMENT

Powered by sweetCaptcha


Anti-Spam Protection by WP-SpamFree