Applying different page structures in different pages inside a single theme in wordpress

This topic is for the beginner level wordpress themers. It may sound very easy to the experts, but I know for the beginners it can be a real pain.

The real issue is , lets assume we are developing a website in wordpress and the basic structure of the site is two column like the default ten twenty theme, a big column for the content and a narrow right panel. In contact page the client wants it only one column and in another page the client wants it three column. We have to do that keeping all the functionality and basic structures intact.

The simple answer of this problem is creating different templates and applying them in different pages. First of all we can not do it online or it is not possible for users having username.wordpress.com extension. Because they do not have the privilege of uploading or changing the file structure.

I am assuming that you have downloaded the latest version of wordpress and installed it in your machine. After installing you will see the default theme is twentyten which is a two column structure. We need to login now. After login go to Pages > Add new Pages. which will help you to create a new page. Give it a title Contact , give it some content and publish it. In bottom right panel find a dropdown menu with heading Template, If you click on the dropdown you will found two options, default template and one column no sidebar. Select one column no sidebar for the contact page. Click the update button on top. Click on preview. You will see on top navigation a menu has been created named contact, clicking on that page will go to contact page which has only one column. Lets check how this templates are created.

In your computer go to the location where you have installed wordpress. Follow the path wordpress\wp-content\themes\twentyten. Inside twentyten folder open page.php in any editor. This is the basic structure of twntyten which all the pages of the site will follow. The main structure is

and the sidebar is coming from

Now open the page  onecolumn-page.php in any editor. The main container is there but you will not found any That is why it is only only one column. How is it coming to template option? Go to the top of the page , find this line * Template Name: One column, no sidebar. this is the key. Whatever template name you will give it will come to the template dropdown.

Let us create a three column page. I copied the onecolumn-page.php, named it threecolumn-page.php, opened the page added the and another column on left. (Not giving details about the XHTML structure as it is an article about wordpress not XHTML) Changed the template name to

/*
* Template Name: Three Column
*/

I saved the changes. Then I created a new page named it Jurysub (you can give it any name you want). The template dropdown is now showing 3 options with our new template option Three Column. Assign the Three column template with the Jurysub page. Publish or preview it. You can now see the changes.

Lets hope you will found this article helpful. Happy reading.


Advertisements

3 responses to this post.

  1. Hi. thnx for your post it is very useful. I didn’t understand how will i apply the new template to only one page? If you take a look at my page http://www.smartbloger.info on the top i have two pages “about me” and “shop mania”. for the “shop mania” page i want it to add a different template. i have another problem with entering the page, i dont know why i cant enter it.

    anyway if you give it a look at every advice is appreciated

    Reply

  2. Hi thnx for your reply
    container is just to maintain the page in the middle?
    how can i fix it?

    about the different template for different page. how can i link one page to another temlate? because if i change the template all the pages will change?

    Regards

    Reply

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

%d bloggers like this: