Different Layout on Each Page in One WordPress Theme

Posted: February 26, 2011 in CSS, PHP, Wordpress
Tags: , ,

WordPress can be configured to use different Page Templates for different Pages. There may be any number of reason why you need different page templates and once created you can add or remove items. It allows you to make changes to nearly any aspect of each page (body width, header, font, color, with or without sidebar, etc) without affecting the other pages.

Everytime you want to create a new page there will be an option on the right sidebar which template you will be used when displaying the page.

To create a new Custom Page Template for a Page you must create a file. For an example, let’s call it Page2.php (php files). Open Page2.php, at the top of the Page2.php file, put the following:

<?php
/* Template Name: Page2 */
?>

What follows the above three lines of code is up to you. The rest of the code you write will control how Pages that use the Page2 Page Template will display.

You may find it more convenient to copy some other Template (perhaps page.php or index.php) to page2.php and then add the above three lines of code to the beginning of the file. That way, you will only have to alter the HTML and PHP code, instead of creating it all from scratch.

Next create a separate css file for the Page2 template, you can name it Page2.css. To make it easier you may copy the original style.css and then change the formatting within css file to whatever you want. It will only apply to Page2 page.

To install the code to link the correct css file to the correct page template, find the following code in your header.php file :

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

After the code above add the following code:

<?php
if ( is_page_template(‘page2.php’)) { ?>
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_directory’); ?>/page2.css” />
<?php } ?>

This will assign a different css file for Page2 page. Thats it. It works for me. Now when you create a new page you will be given the option of selecting a template. If you wish to alter the template, remember to CHMOD the file to 777 through your control panel or FTP program.

In case you want to make more pages with more templates then just repeat the step above for each page. Name these style.css files to be correspondingly unique for each of your page.  You can create as many different templates as you need using this method then modify the body widths, fonts and colors to whatever you want. ENJOY.

Advertisements
Comments
  1. Thanks for sharing your knowledge! Unfortunately I can’t get each template to pick its assigned stylesheet. I followed your tutorial step by step for 2 different pages, so 2 different templates + stylesheets, but they still use style.css on every page.

    Can you help me out, even though your post is 8 months old?

    This is a part of my header:

    <link rel="stylesheet" href="” type=”text/css” media=”screen” />

    <link rel=”stylesheet” type=”text/css” href=”/photos.css” />

    <link rel=”stylesheet” type=”text/css” href=”/contact.css” />

  2. Oh, the PHP parts doesn’t work.. Well, you know how it should look like 🙂

  3. Never mind, fixed it. Forgot to replace the ” and ‘ quotes. Thanks for the tutorial. Works like a charm

  4. Levi says:

    Really no matter if someone doesn’t know afterward its up to other visitors that they will help, so here it occurs.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s