Effutio » Tutorials

Page Templates in Wordpress

Neil — Tue, 29 Sep 2009 08:00:09 +0000

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.

Join the forum discussion on this post

Using Google Adsense for Search in Wordpress

Neil — Fri, 04 Sep 2009 13:38:57 +0000

Google Custom Search

Implementing a Google Custom Search into your Wordpress theme is actually pretty easy but requires a little bit of theme jiggery pokery!

OK so first things first:

Create a page called ’search’ or ’search results’ in the admin section of your Wordpress site. Take a note of the page id, this can normally be found if you hover the mouse pointer over the ‘View Page’ link or go to ‘Edit’ in the Pages menu and hover over the search page (its the number at the end you need). I would also select the full page template for the search page (what do you mean your theme doesnt have a sidebar-less full page? Spose I could write a tut on that too). Good now we have the search page published and the id of said page.

Next create your Google Custom Search in your adsense account. I’ll not go through all the steps but remember and get the search page url right and set the width correctly for the page! OK you should now have your search code blocks. Highlight the second block of code, go to your Wordpress admin and edit the search page and insert the code into the main text window (use html view and publish).

Then highlight the first/top Google code block and put that in your theme wherever you want the search to appear.

That should be the search fully operational test it in some different browsers to check. “WAIT” I here you cry. I dont want a stupid page called Search Results in my page menu! Quite right, remember the page id I told you to take note of, well here is where you use it.

In your sidebar code you will no doubt have a line like this:

We need to add an exclude function to this line which will look something like this:

Change the ‘86′ to what ever your page id is and hey presto the jiggery pokery is complete!

Join the forum discussion on this post

More Advanced Menu only logged in users or certain users can see

Neil — Thu, 23 Jul 2009 22:03:18 +0000

This is a follow on tutorial from the previous one: Menu only logged in users or certain users can see

In this one Ive added a few extra features. I suddenly thought about the previous tutorial example and saw that any logged in user can see the control panel menu in the sidebar and all the options within it. What if you only want users of a certain level to see the ‘Write New Post’ and ‘Write New Page’ options.

OK Im just gonna list the whole block of code for the sidebar login that I have implemented on this site then talk a bit about the new bits:




Login





 Username


 Password



 Remember me




Register
Recover password




Control Panel

Dashboard
Write new Post
Write new Page
Logout



Control Panel

Dashboard
Logout

OK so if you have read my earlier tutorials on this topic you will recognise a lot of this code and Im not going over it here. So lets take a look at the new bits so we know what changes have been made.

First new line is after the else statement. This basically sets the user level that can access the following menu code. I have set this to level 2, as users granted level 2 status on effutio can write posts etc, but you can set this to whatever level you like (see my previous login tutorial for Wordpress pre set levels).

Then you will notice I have added a second else statement which allows any other users which are lower than level 2 to see a different menu again. Because any user lower than a level 2 cant write posts etc they can only see the ‘Dashboard’ and ‘Logout’ links.

Well I really love this login/menu code for the sidebar, I hope you do too.

Join the forum discussion on this post

Display your Wordpress posts on other pages

Neil — Mon, 06 Jul 2009 17:21:08 +0000

Here is the scenario:

You have a Wordpress blog in a subfolder on your website. The main website might be static html or even php pages and you want to display your Wordpress blog posts on the other ‘main website’ pages.

How do you do that?

Well I shall enlighten thee! Firstly I assume that you have your blog site in a subfolder (my subfolder is cms – so change this to your folder name), secondly if your other pages are html that is to say they are named ‘index.html’ you will have to rename them to ‘index.php’ etc. Now this will upset your links so I would do it in Dreamweaver so it automatically updates all your links.

After renaming all your files you can now start the coding, put the following code at the top (I mean the top! Before any html or anything) of each page that is to display the recent posts:

Note: change ‘cms’ to your folder name containing your wordpress blog. To control how many recent posts are displayed change the ’showposts=5′ line to however many you want (leave it like this and it will display 5….obviously)

OK all good so far! Now we need the code that will display the posts, place this somewhere in your page:

Now this will simply list your post titles, which are linked to the relative post. There are other options when listing them, you may want to list the excerpt and a read more link etc. If so the code will look like this:






Read more...

You can also pull in the your Wordpress pages instead of the recent posts, simply use this code:

Replace this line

query_posts('showposts=5');

with

query_posts('page_id=7');

query_posts('pagename=about');

Pretty sweet – I recently used it on www.honeybeekeeping.co.uk

Join the forum discussion on this post

Menu only logged in users or certain users can see

Neil — Mon, 06 Jul 2009 13:50:58 +0000

I thought I would add this as a quick follow on from my previous tutorial showing you how to make a login form in your Wordpress sidebar (find it here), it used a technique to show a menu once a user had logged in.

So if you want to hide a menu from readers but show it to registered users you could use the following example:

Say you had a menu that looked something like this in your sidebar:


Registered User Menu

Registered user menu options here!

If you only wanted registered users to be able to see and use this menu simply add before the code above and of course close the php statement with at the end of it. Nice one now only registered, logged in users can see the menu!

What if you need a menu that only appears to users of a certain level? Well can use another handy php staement. Place at the beginning of your menu code block and close it again with . This example will show the menu only to admins ‘level_10′ you can change this to suit whichever user level you want. Below is the standard wordpress user level list:

Administrator: level_10
Editor: level_7
Author: level_2
Contributor: level_1
Subscriber: level_0 (although you would never use this as you could use is_user_logged_in() function)

You can of course create your own user roles and levels using this plugin

Join the forum discussion on this post

Login directly from a page in Wordpress using a sidebar login form

Neil — Mon, 06 Jul 2009 12:20:06 +0000

As you can see I use a sidebar login for here on Effutio.com that completely bypasses the standard Wordpress 2.8 login screen page. No big deal you may be thinking but it is one less page that users have to wait to load, it adds a professional look and encourages people to login.

OK now that you are convinced that being able to login from home page (or any page where the code is placed) I’ll show you how to achieve it. Ive placed my login form at the top of the sidebar but feel free to experiment putting it elsewhere (maybe the header).

So we need to create a form that captures and the users login details, here is mine:




 Username


 Password



 Remember me

Insert this form code into your sidebar code probably between some

tags and hey presto you have a login form that allows users to login directly from the page. You will also see a checkbox allowing users to stay logged in too just like the standard Wordpress login page (so we dont lose any functionality).

Lets expand on the above form by adding the option for users to register and recover their password if forgotten! These two lines of code do the job:

Register
Recover password

Excellent now it looks really professional and has everything we need…….or does it. What about logging out I hear you cry! Yeh it would be cool if the option to logout only appeared if the user was already logged in! Well I’ll show you how to do that too. So how do we say ‘if the user is not logged in show the the login form and if not show the alternative menu with logout option’? Like this:


Login





 Username


 Password



 Remember me




Register
Recover password



Control Panel

Dashboard
Write new Post
Write new Page
Logout

You can see that I display a control panel menu when the login form is not displayed. This code is taken directly from my sidebar.php file and of course you will probably have to adapt it slightly to fit your own theme.

This code is designed to work with Wordpress 2.8+, it wont work in previous versions.

You can take this hidden menu further and I do in my next tutorial here

Join the forum discussion on this post