Framework Templates

Chris Coyier’s Blank WordPress Theme

christine — Thu, 04 Mar 2010 05:15:26 +0000

In case you missed it, a few weeks ago, Chris Coyer, one of the authors of “Digging into WordPress“, released his blank theme. In his article he states the following:

I have a “blank” WordPress theme for myself, because I make a lot of WordPress themes. Starting from Kubrick, or any other pre-made theme, would be absurd. There is to much stuff there that would have to be stripped out or fought against to be useful. So, I have my own.

Music to my ears. When I started using WordPress years ago, I couldn’t get my head around Kubrick. Cleaning the code took way too much time and energy. I originally created my themes for a WordPress class. In order to teach students how to theme a site in 6 weeks, I needed something clean and void of excess stuff so I set up my basic theme.

I was thus curious when I read Chris’s article and downloaded his theme. It’s super clean and to my delight it’s not so different from mine. I have a lot more CSS than he does and he’s got some fancy stuff going on in his header.php, but overall I would highly recommend it. Starting from a clean theme to design a WordPress site is the best way to work. If you haven’t had a chance to try a blank theme, you should check it out.

Add unique styles to your pages using the body_class() function

christine — Fri, 12 Feb 2010 20:29:12 +0000

When WordPress 2.8 was released, a new function called body_class() was made available to developers allowing us to style our pages differently. This new function places a location-specific class on the opening tag. I must admit, I missed this function when it came out and only discovered it recently. But it’s proved very useful. I can now specify different background images for my pages and posts.

Here’s how to do it.

Open up your header.php file and change to >

The function will automatically generate extra html code. Have a look at the source code to see what classes are available to you and simply create new styles.

For example if you have an about page which has a page id equal to 2, you will notice the following code:

In your css, you could add a new style such as

body.page {background:yellow;}

This would change the background of all your pages to yellow.

body.page-id-2 {background:yellow;}

And now the yellow background will only be applied to your about page.

Nathan Rice wrote up a great article about the body_class() function and you can, of course, get more information by visiting the Codex.

Create a sidebar menu using the Simple Section Navigation Plugin

christine — Wed, 06 Jan 2010 00:08:54 +0000

One of the best feature of WordPress is its ability to be used as a powerful CMS. However, since WordPress is a blogging platform and not a true CMS, there are a few drawbacks, especially when building sites with deep navigation levels.

I was recently asked by a colleague to help develop a very large site for a Vancouver organization. The site wasn’t very complicated, but contained several dozens of pages four levels deep. The first levels were displayed as a top horizontal navigation bar, while the others appear in the sidebar depending on which page you are on.

Listing pages can easily by done by using the built in wp_list_pages() function, but this function lists all of the pages, regardless of where you are on the site. This function is ideal if you’re creating a sitemap, but not that useful for a side navigation.

As mentioned in an earlier post, the fold page list plugin can be used to generate a stylish side menu, but this still leaves us with no control as to what is displayed on what page.

For example, when one navigates to the About pages,it would be nice to view the pages which are children of about, while on the services, the children of services are displayed.

This can be achieved by using the simple section navigation plugin created by C Murray Consulting. Simply download and activate the plugin as you would any other and add this line of code to your sidebar:

","") ?>

You can view this plugin in action by visiting the brochure I demo site.

Creating a custom page template in WordPress

christine — Fri, 17 Jul 2009 15:21:17 +0000

While designing your WordPress site, you may want to create a page that’s different from your other pages and posts. I’ve created many websites which have a custom home page, portfolio section, site map etc… WordPress allows you to create custom templates in a few simple steps:

Open up your page.php or index.php and add the following code at the very top of your page:
Save your your file as new-template-name.php (you may want to use portfolio.php, sitemap.php, etc..)
Upload your file in your themes directory
In your WordPress admin, edit the page that you want custom and select the newly created template from your “Template” drop down which is found under “Attibutes”

That’s all it takes to create the template, but now you will need to customize it to make it look different from your other pages. You may want to have a different background, dimension, etc…

Examples of Custom Pages

Sitemap

If you take a look at the site map on Out of Chaos’s website, you will find a list of all of the pages. This page could have be created simply by inserting an unordered list in the editor, but if we do it that way, then we’ll need to update it every time a new page is added or deleted. An easier way to generate the list is to use a custom template.

The site map template was created by using the following code:

The code above grabs the title of the sitemap page and then generates a list of all of the pages and excludes itself.

Custom Home Page
You’ll notice that both Bluelime Media and Framework Templates‘ home pages are different from the rest of the other pages. To do this I created a custom home page using the following code:








RECENT PROJECTS

You’ll notice that in this template I’m using the improved include page function.

The ability to create custom templates allows you to create pretty much whatever you want with WordPress and makes it an ideal Content Management System.

Display a link to your RSS feed in address bar

christine — Thu, 16 Jul 2009 18:37:05 +0000

I was scanning the WordPress Support Forum the other day and someone asked how one could display an RSS feed icon in the address bar just like in the image below:

I must confess I’d never noticed this before and of course now I can see it on most websites, so I’ve updated the basic and 3 column templates to include this feature. And you can too simply by replacing the RSS feed code in the header.php from:

to:

That simple change is all it takes!

Enhance your WordPress website using the Improved Include Page plugin

christine — Mon, 13 Jul 2009 22:26:53 +0000

Ever wondered how you can provide someone with a sidebar text option without having to use widgets? Or maybe you’ve designed a slightly different home page and want to display more than one area of content? Vito Tardia’s Improved Include Page plugin is very useful for that and super easy to use.

Just like any other plugins, simply go to WordPress, download, install the plugin and activate it. Once activated you can use the following function in your templates:

Creating a sidebar text option without using widgets

If you take a look at the Aquattro Living website, you will see that the contact information appears at the bottom of the left hand side column on all pages. This information is likely to remain unchanged for a long time, but instead of inserting it in the template file and make it unmanageable by the client, all you need to do is create a new page called Contact Us Sidebar, exclude it from the main navigation and insert the include function in your sidebar.php template file.

Display more than one area of content on a template

Both West Coast Sightseeing and Ascent websites have three boxes of content on their home page. These different area of content are easy to create using this plugin. Simply create three new pages, called for example home col1, home col2, home col3 and display the content using the following code:

You would of course change the post_id numbers to the number of your new pages and mark up the css to display the columns as you’ve stipulated in your design.

Framework Templates revised following WP 2.8 release

christine — Tue, 07 Jul 2009 02:15:18 +0000

Following the much anticipated release of WordPress version 2.8, I read up about deprecated functions from past WordPress releases and realized that my templates contained a few that needed updated.

wp_get_links() is now a deprecated function and was replaced by wp_list_bookmarks()

wp_list_cats() is also deprecated and has been replaced by wp_list_categories()

These functions can be found in the sidebar.php of the 3-column and basic themes and the sidebar-custom.php of the 3-column theme. No changes are needed in any of the other templates.

Additionally, while doing research about the best way to write the search function, I came across this post which explained that both action="" and action="" are correct and will provide search results. But the second method is the one to use if you choose to have your blog in a directory other than the root. Since the second method one also works if your blog is in the root folder, I thought it would be safer and less confusing to simply replace that bit of code.

Optimize your blog with Revision Control

christine — Mon, 22 Jun 2009 21:18:27 +0000

Post revisions we’re introduced with the release of WordPress 2.6. These are incredibly useful especially when you have a multi-author blog, but unfortunately this also increases the size of your MySQL database, which decreases the speed or your site.

If you have access to your database and know what you are doing, then an easy solution is to execute the following SQL statement:

DELETE FROM wp_posts WHERE post_type = "revision";

This simple SQL query will delete all of post revisions and, if you have a lot of posts, this may considerably reduce your database in speed up your blog.

An easier way to do it however, is by installing the revision control plugin. Once installed this plugin allows you to either disable or enable post revisions or what I like to do is to limit post revisions to the latest two.

This plugin is an ideal way to optimize and speed up your blog.

3 Column Fixed Width Blog Template

christine — Tue, 02 Jun 2009 21:02:26 +0000

We’ve just released our latest framework template allowing you to build a 3 column blog with both left and right sidebar widget enabled. This template framework does not require any plugin and like all our previous templates, the code is clean and simple.

You can check out the demo here or download it.

If you have a chance to play around with any of our templates and create a blog or website, please let us know. We’ll feature your work on our blog.

Protect you data with regular back-ups

christine — Fri, 15 May 2009 17:00:17 +0000

Yes you’ve heard before, back-up, back-up, back-up. It can be hard and tedious to do database back-ups but it’s very important. Luckily for us, there’s a plugin for that. The WordPress database backup plugin makes it a cinch to carry out back-ups. Simply download the plugin, install and activate it as you would any other plugin. Once activated, you will find a new menu entitled Backup under the Tools menu. Navigating to this area will reveal a new admin window where you can make a back-up immediately or you can schedule it to be delivered to you via email or downloaded on your server or computer.

I’m not sure that back-ups could be any easier.