Contact Effutio
About Effutio Author
You must be logged in to post


Lost Your Password?

Search Forums:


 






Wildcard Usage:
*    matches any number of characters
%    matches exactly one character

Page Templates in Wordpress

Read original blog post

UserPost

2:00 am
September 29, 2009


Neil

Admin

posts 18

1

I realise this is a very simple thing to achieve in Wordpress and has probably been written about a thousand times, however I thought about what a great tool it is in Wordpress's arsenal and surprisingly not used on too many sites Ive seen.

Aside from being able to use page templates to create different page designs they are very useful when using Wordpress plugins such as NextGen Gallery and SimplePress Forum.

These two plugins benefit greatly from using a full width page template i.e. no sidebar. So I will not go into the full intricacies of page templates and their many uses and implementations. Instead I will just show a simple example of how to create a full width page template with no sidebar. Ideally used for galleries and forums.

First of all open the directory containing all your Wordpress template files, normally found here: your-root/wp-content/themes/your-theme-name/

Look for the file entitled 'page.php' open it in your favourite code editor. Next create a new file called 'page_fullwidth.php' or similar in the same folder as page.php.

Next copy all the code from page.php and paste it into page_fullwidth.php, you can now close page.php as you no longer need it.

You must tell Wordpress that this file is a page template, to do this we must add the following code right at the top of the code:

You can call the template whatever you want, instead of 'Page Full Width' you could use 'Forum' or 'Gallery'. This is the name that will be displayed (and can be set) in the 'Attributes' section on the right hand side under 'Template' in the add/edit page screen.

OK, now you are ready to make the changes to the structure of the page. In this case we want to remove the sidebar. so look for the following line and remove it:

Now you have to add some CSS. Namely adding divs that are the correct width for the new page. SO your CSS will probably have a container for the content called 'container' or 'contentwrapper' etc and will probably look something like this:

#contentwrapper {
	float:left;
	width: 620px;
	margin: 0 0 15px 10px;
	padding: 0;
	text-align: left;
  }

Obviously the width is to small to allow content to flow right across your new page template so me must change it to match the width of the containg div (if your theme is full screen and all widths are in percentages dont worry about doing this, most are fixed width these days though). Anyway create a new contentwrapper just for this page template. It should look something like this:

#contentwrapper2 {
	float:left;
	width: 910px;
	margin: 0 10px 15px 10px;
	padding:0;
	text-align: left;
  }

Remember and change the div declaration name in your page_fullwidth.php:

so the page template uses the new CSS.

There you have it, a full width page template with no sidebar.

Check out my next tutorial and learn how to setup and implement multiple/different sidebars, footers, headers and comment templates.


Read original blog post



About the Effutio forum

Forum Timezone: Europe/London

Most Users Ever Online: 17

Currently Online:
2 Guests

Currently Browsing this Topic:
1 Guest

Forum Stats:

Groups: 2
Forums: 9
Topics: 18
Posts: 18

Membership:

There are 11 Members

There is 1 Admin

Top Posters:

jtsales – 1
wuzyla55 – 1

Recent New Members: jtsales, Mareng12, wuzyla55, yunck05, sarkar00ss446

Administrators: Neil (18 Posts)



Rss Feed Tweeter button Facebook button Technorati button Reddit button Myspace button Linkedin button Webonews button Delicious button Digg button Flickr button Stumbleupon button Newsvine button

Switch to our mobile site

Web Design - Web Host