The Content

Firstly create your page in WordPress that you’ll use as your toggle-able content page. Add your title and content and then add a custom field like active and set the value to yes.

SIDENOTE: It might be a good idea to set the slug of this page to something generic like /info/. This way, if the content has a ‘Read More’ link of sorts, the client wont have to continually change the slug each time he changes the title of this content area.

Now you’re done in the WP Admin, now you can get into your WP PHP template file where this toggle-able content will display.

The Functionality

Basically what you’re going to create, is a code snippet that will query the page ID of the page you created above, but before displaying the content of that page, it’ll check if the custom field value is set to yes. If it’s not, then no content will display, if its set to yes, then… well you can guess what’ll happen

The Code

<? $recentPosts = new WP_Query(); $recentPosts->query('page_id=73'); while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
<? if (get_post_meta(73, 'active', true) == "yes") { ?>
	<h3><? the_title(); ?></h3>
	<? the_content(); ?>
<? } else { } ?>
<? endwhile; ?>

And that’s that. It’s a pretty simple trick and you should be able to apply the principle to a number of circumstances.

Be sure to register for the event at www.wordcamp.co.za

The basics

You’re basically going to setup a number of if/else statements in your template where you want your header image to appear. The final statement will be an else statement so that if none of the above rules apply, it’ll degrade so that you’ll always have a header image on your page.

You’re going to create a custom field that has the name of the image that you want to use as a header image. You don’t have to add the full path to the image. Since you’re uploading your custom image in the WordPress uploader, it’ll always end up in the same folder and so the path to the image will be entered in the template.

The how-to

So firstly create your image, and upload it to your page.

Then add a custom field called “header” and put the name of the file as the value of the field.

Then open up your template where you want your image to appear and add the following PHP – tailored to work as you need it to…

<? if (get_post_meta($post->ID, 'header', true)) { ?>
	<img src="<? bloginfo('url'); ?>/wp-content/uploads/<? echo get_post_meta($post->ID, 'header', true) ?>" alt="<? bloginfo('name'); ?>" />
<? } else { ?>
	<img src="<? bloginfo('template_directory'); ?>/images/header.jpg" />
<? } ?>

So what you’ve now done, is tell the template to check if the custom field “header” has a value. If it does, then use that value to display your image. However, if the custom field is empty, then it’ll degrade to the second default image that you specify.

And presto: you can now use your WP admin to control header images on each page. This is also a good way to do it because now your client can update/add his header images on his own without having to bug you.

Firstly, I logged into PHPMyAdmin and browsed the users table. I edited the entry for my ‘admin‘ account and found the ‘user_pass‘ field.

This field will by default have an encrypted version of your password, something like $P$BERsVRczS226JkUY29j72YuVSzm3yP/ .

Instead of trying to decrypt this, I just generated a new MD5 password and pasted the encrypted version in this field.

I encrypted a new password using the iWebTool website. Type in the password you’d like to have, and then click ‘Encrypt’. That then generates your MD5 password. For example I typed in ‘wpguru‘ as my password and that generated ‘f1c061320553d089aa807e975e2a936f‘.

All you need to do then is paste that encrytped password into the WP database field and presto, your lost password problem is fixed.

Every theme will have an index.php file. The index.php file is your home page. This page will have your loop, that will most often bring in your latest posts etc.

Find this line:

<? if (have_posts()) : while (have_posts()) : the_post(); ?>

and just above it add this line:

<? query_posts('page_id=5'); ?>

Note that ‘5′ can be changed to whatever page you want to be your home page.

What this does, is generate a specific query that the following loop will carry out. In this case, it will call the content from post_id=5.

Bear in mind that if you have a dynamic WP page list, you’ll probably want to exclude the page you created to be your home page from your normal page list. You can do this by adding the exclude argument to your page list call. Like so:

<? wp_list_pages('title_li=&sort_column=menu_order&exclude=5'); ?>

And presto, you have a static front page.

The Template Method

Whenever WordPress needs to display ‘posts’, it uses the single.php template. What we’re going to do, is use the single.php file simply to redirect WP to the template it needs to use.

Firstly, remove all the content from your current single.php file and paste it in (for example) ‘template-blog.php‘. Then create a second file that you’ll use as your uniquely styled template, lets say ‘template-other.php‘.

Then add the following to your single.php file.

<?php
if (in_category('20')) {
   include(TEMPLATEPATH . '/template-other.php');
} else {
   include(TEMPLATEPATH . '/template-blog.php');
}
?>

The above code, is pretty simple to understand. You’re saying that if, the post being viewed is in category ‘20′, then use the template specified, otherwise revert to the other template ‘30′.

Simple!

You can also string multiple of such statements together using the elseif PHP command, like so:

<?php
if (in_category('20')) {
   include(TEMPLATEPATH . '/template-other.php');
} elseif(in_category('30')) {
   include(TEMPLATEPATH . '/template-unique.php'); 
} else {
   include(TEMPLATEPATH . '/template-blog.php');
}
?>

There’s another method that this can be done.

The Custom Field Method

I’m a big fan of WordPress custom fields and this is another great method you can use to easily assign templates to specific post categories.

What we’re going to say, is ‘if the custom field ‘wide’ exists, then use the specified template, otherwise use the other template. Here’s how it works:

<?php
if (get_post_meta($post->ID, 'wide', true)) {
   include(TEMPLATEPATH . '/template-other.php');
} else {
   include(TEMPLATEPATH . '/template-blog.php');
}
?>

Then when writing/saving your post, all you need to do is add a value of ‘yes’ to the template custom field that you’ll create called ‘wide’ and presto, your single.php file will spot the presence of the custom field and use the specified template.

You can of course also use both the above methods within your template if you want to, for example, add or remove certain areas from your page. You can do this by using if/else statements within your template. Like so:

Hopefully, this’ll give you some more ideas as to how you can further tweak your WP.

Here’s a demo of what we’re going to accomplish. (Tested in IE7 & FF)

Getting started

Firstly, you’ll need to setup your pages in WordPress in a hierarchal manner. IE:

• Home Page
• About Us (2)
  • What We Do
  • What We’ve Done
  • Who Works For Us
• Services (6)
  • Portfolio
  • Our Clients
• Contact Us

… for example. NOTE: The numbers in brackets represent the ID of that page. Replace this later with your own actual page ID’s.

This will usually generate nested <ul> and <li> list that will work as your navigation.

<ul id="nav">
	<li><a href= "#">Home Page</a></li>
	<li><a href= "#">About Us</a>
		<ul id="aboutus">
			<li><a href= "#">What We Do</a></li>
			<li><a href= "#">What We've Done</a></li>
			<li><a href= "#">Who Works For Us</a></li>
		</ul>
	</li>
	<li><a href= "#">Services</a>
		<ul id="services">
			<li><a href= "#">Portfolio</a></li>
			<li><a href= "#">Our Clients</a></li>
		</ul>
	</li>
	<li><a href= "#">Contact Us</a></li>
</ul>

Sorted?

Making it dynamic

What you’re going to do now, is break that list down somewhat and create your own navigation. The top level menu items will be static, and their subpages will be dynamic. Like so:

<ul id="nav">
	<li><a href= "#">Home Page</a></li>
	<li><a href= "#">About Us</a>
		<ul id="aboutus">
			<? wp_list_pages('title_li=&sort_column=menu_order&child_of=2'); ?>
		</ul>
	</li>
	<li><a href= "#">Services</a>
		<ul id="services">
			<? wp_list_pages('title_li=&sort_column=menu_order&child_of=6'); ?>
		</ul>
	</li>
	<li><a href= "#">Contact Us</a></li>
</ul>

The Script

There’s a tiny piece of javascript required to show/hide the drop down menu’s. From an accessibility point of view, you can link the top level navigation item so that if JS is disabled, the user will still be able to get around your site. Here’s the script.

// JavaScript Document
 
function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}

Your complete navigation would look as follows (including the Javascript commands):

<ul id="nav">
	<li><a href= "#">Home Page</a></li>
	<li onmouseover="javascript:toggleLayer('aboutus');" onmouseout="javascript:toggleLayer('aboutus');"><a href= "#">About Us</a>
		<ul id="aboutus">
			<? wp_list_pages('title_li=&sort_column=menu_order&child_of=2'); ?>
		</ul>
	</li>
	<li onmouseover="javascript:toggleLayer('services');" onmouseout="javascript:toggleLayer('services');"><a href= "#">Services</a>
		<ul id="services">
			<? wp_list_pages('title_li=&sort_column=menu_order&child_of=6'); ?>
		</ul>
	</li>
	<li><a href= "#">Contact Us</a></li>
</ul>

The CSS

Now, you’ll need to do a bit of freestyling on your CSS to style it as you’d like and getting it positioned as it should be. The important thing to include, is the CSS to hide the nested <ul> and the absolute positioning so that it doesn’t affect any other elements when its shown:

@charset "utf-8";
/* CSS Document */
 
* {margin:0;padding:0;}
body {text-align:left;padding: 30px;font: 12px Tahoma, Arial, Helvetica, sans-serif;}
 
ul, ol {padding: 10px 0;}
 
#nav ul {display:none;position:absolute;margin: 16px 0 0 -1px;} /* hide the sub nav */
*+ html #nav ul {margin: 16px 0 0 -122px;} /* ie 7 hack */
#nav li {list-style:none;display:block;float:left;}
#nav a {display:block;float:left;padding: 5px 15px;border:1px solid #ddd;margin: 0 0 0 -1px;text-decoration:none;width:90px;}
 
/*subnav styling*/
#nav ul li, #nav ul li a {float:none;}
#nav ul li a {margin: -1px 0 0 0;width:150px;}
#nav ul li a:hover {background:#efefef;color:#000;}

This is the CSS used to achieve the effect in the demo. You can of course change it to suit your site’s styles.

And presto, you’ll have a drop down menu. As you add sub pages in your WP admin, those pages will automatically be included in your drop down.

Slick

Here’s a demo of what we’re going to do.

Just in case you’ve been coding in a box for the last 10 years, jQuery is a great JS library that has a number of nifty usages. One of its popular plugins is the ‘thickbox‘ and its what we’re going to use now to create a simple means of logging in for you/your clients.

Prepare your site

In your header.php file you need to include 3 files: jquery.js, thickbox.js and thickbox.css. Then upload the included loading.gif animation to your images folder. The includes for these files would look like this:

<script type="text/javascript" src="<? bloginfo('template_directory'); ?>/jquery-latest.pack.js"></script>
<script type="text/javascript" src="<? bloginfo('template_directory'); ?>/thickbox-compressed.js"></script>
<link rel="stylesheet" type="text/css" href="<? bloginfo('template_directory'); ?>/thickbox.css" media="screen" />

NOTE: call the jquery file before the thickbox.js file.

Then open your thickbox.js file and edit the path to your theme’s images folder. It’ll look something like this:

var tb_pathToImage = "/wp-content/themes/yourtheme/images/loadingAnimation.gif";

Ok, now your site is thickbox’d. Nice.

Make it happen

Of the many usages of the thickbox, the one we’re going to use now is the thickbox for Inline Content. In essence, you’re going to have your login form somewhere on your page (preferably in an element that is included on every page on your site like your sidebar) but its going to be hidden by an inline CSS style:

<div id="form" style="display:none;">

Somewhere else on your page, you’re going to have a link (like in your topnav) that when clicked, will open that hidden div/form in the thickbox. This link will have, instead of a URL as its href target, some magic thickbox commands that will summon your hidden login form. The link would be as follows:

<a href= "#TB_inline?height=200&width=200&inlineId=form" class="thickbox" title="Login to the WP Guru site">Login</a>

What’s happening here is that the link is calling an inline div that’ll be displayed in a thickbox with the sizes specified and you’re identifying the inline div ID that will be called. Note that class=”thickbox” is critical to the thickbox’s successful usage.

The login form

The actual login form can be simplified down to its core elements so that you have nice neat code made up of only what you need. You can of course tweak this to be just what YOU need. The actual login form is found around line 378 in the wp-login.php file (v2.5).

<div id="form" style="display:none;">
	<form name="loginform" id="loginform" action="http://wpguru.co.za/wp-login.php" method="post">
		<p>
			<label>Username<br />
			<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" /></label>
		</p>
		<p>
			<label>Password<br />
			<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
		</p>
		<?php do_action('login_form'); ?>
		<p class="forgetmenot"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
		<p class="submit">
			<input type="submit" name="wp-submit" id="wp-submit" value="<?php _e('Log In'); ?>" tabindex="100" />
			<input type="hidden" name="redirect_to" value="/" />
			<input type="hidden" name="testcookie" value="1" />
		</p>
	</form>
</div>

You can of course style up the div that contains your form with your site logo etc to make the whole login process seem even more bespoke.

TIP: You can set the overlay color of your jQuery thickbox (default set to 75% black) to match your site, in line #39 of your thickbox.css file.

Solutoire.com TAGStention is one of the better WordPress Dreamweaver Extensions available and the one that I’m currently using now. Normally I make use of a growing cheat-sheet file that has all my often used WordPress tags, loops and commands. This TAGStention addition to Dreamweaver looks to be replacing this file of mine with some simple menu clicks.

Here’s some of the features that I find very useful.

When making your header.php file, this handy menu. With your cursor in the right place, you can, with a few deft clicks, insert all your vital header information.

When making a dynamic theme that can be moved or applied on/in any domain/folder, using WordPress’s bloginfo() tag proves very handy. TAGStention provides a bloginfo wizard that’ll allow you to choose the tag you want to insert – perhaps a little cumbersome, but useful nonetheless.

There’s still many ways that I think an extension like this can be improved and so I’m currently looking at developing my own extension. I’ll be sure to post about it here when its finished.

You can download TAGStention here.