More Than Scratch The Surface » wordpress themes

Custom Page Templates – Calling An External CSS File

Stephen Cronin — Mon, 30 Mar 2009 13:21:42 +0000

Note: Not long after writing this post, I discovered that the best way to load external CSS files is by using the wp_enqueue_style function. Similarly, the best way to load JavaScript files is by using the wp_enqueue_script function. The method outlined below is not necessary – although it may still be useful for other things to be added to the head section.

Custom page templates are a powerful feature of WordPress that can be used to make pages (not posts) do something different from normal. You can make them do pretty much anything. Obviously, this can greatly increase the flexibility of your site.

Amongst other things, I’ve used custom page templates to create a basic photo wall and a dynamic listing of jobs in China.

However, because of the way most WordPress themes are created, calling an external CSS file from a custom page template is not straightforward. Here, I explain the problem, look at the options and explain how to use ‘plugin functionality’ to overcome the problem.

Creating Custom Page Templates

Much has been written about creating custom page templates, so I won’t cover it in detail here. Briefly, you need to do the following:

Create a php file in your theme directory, containing the functionality you want (I normally start with an existing template and modify it).
Ensure there is a comment at the top of the file, so WordPress knows it’s a template. For example (and don’t forget to change the name):
In the Admin panel, edit the page you want to use the custom template with and set the Template field to the template you created.

That’s it in a nutshell. For more detailed instructions, please see:

WordPress tips and tricks – custom templates by Binary Moon
How to use custom page template in WordPress themes by Vladimir Prelovac

Calling An External CSS File

There may be times when you want to include something in the head section of the HTML document. The most obvious example is a call to an external CSS file to provide custom styling for the page.

Adding the style information to the main CSS file would add unnecessary weight to every page / post, when it’s only needed on one page. Inline CSS should be avoided where possible. So the best solution is an external CSS file that is called only for that page (ie called by the custom page template).

This article focuses on calling an external CSS file, but it also applies to anything that you want to add to the head section of the HTML document, such as calling a JavaScript file or adding a meta tag, etc.

The Problem With Adding Items To The HTML Head

It sounds simple enough: I just call the CSS file from the custom page template, right? Right in theory, but in practice you can’t easily do this because of the way most WordPress themes are designed.

The external CSS file must be called from the head section of the HTML document. In most WordPress themes, the entire head section is contained in the header.php file. This is normally called from the custom page template using the get_header() function in the following manner:

This calls header.php, which will probably have a variation on the following:


>


<?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?>

If you try to call the CSS file before the get_header() function, for example:

then the additional code will appear BEFORE the code in header.php. In the case above, it will appear before the DOCTYPE line, which is obviously no good.

If you try to call the CSS file after the get_header() function, then the additional code will appear after the code in header.php. In the case above, it will appear after

, which is in the body of the HTML document and also no good.

There are several solutions to this problem.

Rejected Solution 1 – Don’t Use Header.php

One possible solution is to copy and paste the code from header.php into the custom template, instead of calling it via get_header(). You can then easily edit the code to add the call to the external file. Great!

The problem is that if you ever change header.php, you’ll have to remember to come back and change the equivalent code in the custom page template. That’s messy (and the chances are you’ll forget).

Rejected Solution 2 – Edit Header.php

Another possible solution is to edit header.php and use a conditional statement to only include the CSS file on the page in question. For example, if we only wanted to use the custom template on the page with an ID of 7830 we could add the following to header.php:

ID == 7830) {
	echo '';
}
?>

This would only call the external CSS file for the page with the specified ID. Note that the IF condition can be adapted to our needs. If we wanted to call the same external stylesheet for multiple pages, we could check for the existence of a custom field, or perhaps a certain tag, etc. The possibilities are endless.

The problem with this solution is that it’s messy. What if you plan to use multiple custom page templates and want a different stylesheet for each one? Your header.php will be filled with conditionals. It’s far better to find a solution where you can call the external CSS file from the custom page template.

My Solution – Add_action Function With Wp_head Hook

Although I’m starting to play with WordPress themes, my background is in WordPress plugins. If I wanted to call an external CCS file from a plugin, I’d use the add_action function with the wp_head hook. There’s really no difference between plugins and themes when using WordPress functions, so this technique works just as well in a custom page template.

Here’s how to do it:

'."\n";
}
add_action('wp_head', 'mypage_head');
?>

First, we define a simple function called mypage_head that echos the HTML code calling the external stylesheet. That’s all it does. Of course, you could echo anything here, such as a call to a JavaScript file, a meta tag, etc.

Next, we use the add_action function, with the wp_head hook, to call the mypage_head function. This tells WordPress to run our function whenever the wp_head function is called (this is called by your header.php).

Lastly, we call header.php using the get_header function. This calls wp_head and WordPress remembers to the mypage_head function and your code is added.

It’s not messy, because all the code is in the custom page template. You can leave header.php as it is. But it doesn’t require you to remember to change code if you change header.php, because you’re re-using header.php.

Final Thoughts

That’s my solution: to use the add_action fuction to add something to the header. What do you use? I know there are other solutions out there (including plugins), so I’d be interested in hearing what you do.

Poll – Which WordPress Theme Framework To Use?

Stephen Cronin — Fri, 27 Feb 2009 13:32:08 +0000

So far, my WordPress development work has consisted of writing WordPress plugins and occasionally hacking themes. I’ve always said that I wanted to write a WordPress theme from scratch, but never had time to do so. One of my sites is going to need a redesign shortly, so here’s my big opportunity.

However, with the rise of the WordPress theme framework and the limited time available to me, I’ve started thinking that the sensible thing to do is use a theme framework. But which one?

What Is A Theme Framework?

I’m not going to answer this definitively, because it’s too large a topic!

The short answer is that a Wordpress theme framework is a base that can be used to write a WordPress theme on top of. Most of the work is already done for you. There’s generally no need to call WordPress functions. All you need to do is create the style (via CSS) and add any custom functions you might need.

Of course, it’s not really that simple, as many theme frameworks extend WordPress by creating hooks that can be used for advanced customisation and make use of child themes, so you can upgrade the theme framework core without your changes being affected.

What Are The Choices?

There are quite a few WordPress theme frameworks out there, but the most popular ones seem to be:

Ian Stewart’s Thematic
Justin Tadlock’s Hybrid
Alex King’s Carrington
Ptah Dunbar’s WPFramework

There are also Premium WordPress Theme Frameworks, such as Chris Pearson’s Thesis, but I’m not going to pay for one when there are so many great free options.

It’s worth acknowledging Scott Wallick’s Sandbox which is the granddaddy of the theme framework concept and which influenced many of the theme frameworks listed above.

Tell Me Which Theme Framework You Would Use!

There’s too much choice! I don’t know the difference between these theme frameworks, so I’m not sure which way to go. They all seem good and are created by WordPress developers with great reputations.

I’m leaning toward Thematic or Hybrid at the moment. For some reason, I have the feeling that Carrington is over the top for what I need, but I may be totally off base here. I’m also tempted by the Sandbox (sometimes I have to fight my instinct to do things the hard way!).

I’m rather short on time, so rather than spend days trying and comparing these frameworks, I thought I’d ask you – which framework would you use? If you have an opinion, please take part in the poll:

Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.

Final Thoughts

It’s exciting times for theme developers. WordPress theme frameworks can save us a lot of time. It’s just a little confusing to know which one to use. I hope this poll can help show what the community is thinking at the moment.

2008 On More Than Scratch The Surface

Stephen Cronin — Wed, 07 Jan 2009 14:12:29 +0000

Happy New Year to all! A new year, a new start, but before I start churning out new posts, I want to have a quick look at 2008 on More Than Scratch The Surface. I’m not normally given to writing review posts, but I was looking at my Google Analytics stats for 2008 and felt moved to write a review of 2008.

The Top Ten Visited Posts In 2008

According to Google Analytics, the top ten visited pages on my blog included the home page and four of my plugin pages, which was pretty predictable. Stripping these out, leaves the following as the top ten visited posts in 2008:

Interestingly, four of these posts are actually from 2007! Apart from the WordPress Most Viewed Sidebar Widget post, which was out of date as soon as I posted it, the other three are some of my better work (although I now use a different rounded corners technique and wouldn’t recommend it anymore)

If we were to just look at 2008 posts, the following four would be added to the bottom of the list:

Although some of my best posts are in the top 10 2008 posts, there are also some that I definitely wouldn’t have included.

My Top Ten Posts In 2008

Now, if you asked me what my top posts in 2008 were, in terms of importance to me, I would have ranked them this way:

Other Interesting Stats From Google Analytics

Google Analytics also provided some interesting statistics for 2008 on this site.

Traffic

The site recorded 46,488 Visits and 74,916 Pageviews in 2008. Not bad, but I’m hoping to improve on that in 2009.

By far my largest source of traffic was Google, accounting for a little over 50% of all my traffic. This is normally 70 – 80% on a day to day basis, but a couple of posts went hot on StumbleUpon and DZone, sending a surge of traffic and driving down the percentage from Google over the whole year.

Browser Breakdown

The vast majority of visitors were using Firefox, with IE a distant second. This isn’t surprising given the nature of this blog, as it appeals to web developers and bloggers, groups given to using FireFox. The full breakdown is as follows:

Firefox – 69.74%
Internet Explorer – 21.63%
Safari – 3.95%
Opera – 2.02%
Chrome – 1.47%

Operating systems

I thought it would be interesting to look at the major operating systems used by visitors and it was dominated by Windows. The full breakdown is as follows:

Windows – 83.48%
Macintosh – 11.57%
Linux – 4.56%

Top 10 Screen Resolutions

The screen resolution of visitors is always important to web developers. I’ve included the top 10 resolutions below. Some are pretty damn big, but the important one to note is that 800×600 has almost dropped off the list at last!

1024×768 – 24.77%
1280×1024 – 19.34%
1280×800 – 17.89%
1680×1050 – 10.68%
1440×900 – 10.09%
1920×1200 – 4.56%
1152×864 – 2.68%
1600×120 – 1.83%
800×600 – 1.60%
1280×768 – 1.53%

Top 10 Countries

US (by far)
UK (London was the top city)
India
Canada
Australia
Germany
Philippines (Hi RT)
Netherlands
China
Indonesia

Goals For 2009

Here are some of my goals for the upcoming year.

Post More Often

I only managed 41 posts in 2008, slowing towards the end of the year, with only two in November and two in December. By contrast, I managed 52 posts in a little over 7 months in 2007. I’d really like to get more posts out.

It’s not for lack of ideas – I have lots of half written posts that I just need some time to finish off. I tend to spend more time working on my projects than writing about what I’m learning.

Post On Topic

It’s noticeable in my top 10 posts above that many are my Make Money Online posts. I’d like to keep posting on that topic as I learn more about it, but I want to post more often on my Web Development efforts (and WordPress of course).

Update My Current Wordpress Plugins

I want to overhaul my existing WordPress plugins, make them more efficient, add some new features and move them into the official WordPress plugin repository.

Release Some New WordPress Plugins

I started off by writing that I’d like to release another 4 WordPress plugins this year (I already have 4 half finished plugins that I want to finish off). However, thinking of my workload, I changed it first to 3 plugins, then to 2 plugins! So we’ll have to see how many I can actually get out.

Release A WordPress Theme

I’ve extensively customised themes on several of my WordPress blogs, including this one. It’s always been my intention to build a theme from scratch, which I’d then use as a basis to create WordPress Themes for release. Hopefully, I finally get around to it in 2009.

Release Some Greasemonkey Scripts

I have a couple of half written Greasemonkey scripts that I plan to finish off in the near future and I’m sure that I’ll develop more as the year progresses. I’m really loving how easy it is to tweak the behaviour of the websites I visit.

Final Thoughts

Well that’s a quick look at the year that was and the year that will be here at More Than Scratch The Surface. I hope all your endeavours for 2009 are successful as well!

If you have any big plans for your blog, feel free to share in the comments.

Roundup – Work, Plugin News, Theme Update

Stephen Cronin — Sat, 26 Jul 2008 13:18:09 +0000

This is a brief update on what I’ve been doing, my plans for the site and my WordPress Plugins.

Busy, Busy, Busy!

Work has been pretty busy. For those that don’t know, I head up the web team for a large organization based in Brisbane. The role is mostly management / internal consulting, but with
a little hands on development.

The website uses the RedDot CMS, which is an interesting challenge for me, because it’s a proprietory Windows based solution, and I come from an open source background. I haven’t learnt much about RedDot itself yet, but I’m going to focus on that soon.

We’re looking getting a project off the ground to revamp the intranet site, which I’m very interested in. You’ll probably see some intranet related posts in future as I’ve been reading a lot about this topic.

I’ve also undergone some training in the Prince2 project management and ITIL service delivery frameworks, both of which were fairly intensive.

Because work’s busy, I have less time for my online ventures. It’s a little frustrating, as I have so many things I want to do. At least I enjoy work!

WordPress Plugins

As yet, I haven’t performed any testing of my plugins in WordPress 2.6, but I know I need to do it soon. I’ve had reports that DualFeeds works fine in WordPress 2.6, but don’t know about the others.

There is one very small issue with most of my plugins. WordPress 2.6 may break the Check Version function in the Options page. This does not affect the core functionality of the plugin and is only likely to occur if you have moved the wp-content folder from its default location.

The only plugin that’s likely to have it’s core functionality affected by this issue is LocalCurrency, which uses an AJAX call similar to the one used by the Check Version function. If you use LocalCurrency, don’t move the wp-content folder from its default location.

This means I’ll need to re-release all my plugins with this fixed. I’ll take the opportunity to add a few new features that I’ve been promising for a while.

Also, as mentioned in my last post, I’m working on a new DoFollow plugin for WordPress, which will only reward the people who leave good comments with a DoFollow link. Progress is slow because of a lack of time.

I also have several plugins that I’ve written and use, but haven’t released because they need some polishing (ie an option page added, the code tidied up, etc). There are also several half written plugins, that I’ve never got back to. When I have time, I’ll plan to finish these off, but don’t hold your breath.

The problem is, the more plugins I release, the more work’s involved with maintaining and supporting them.

New WordPress Theme Coming

I’m also in the middle of creating a new theme that looks a lot better than the current one. I am a good web developer and I do have design skills, but this doesn’t come across looking at my blog. I plan to rectify this soon.

Here’s my current header (click to see full resolution):

Here’s a sneak preview of the new header (click to see full resolution):

Let me know what you think! That’s just the header. The whold theme will be revamped – in fact, I’m rewriting it from scratch.

Direct Advertising

With the new theme, I’ll probably start offering some direct advertising. Many other bloggers do this, but I haven’t taken the step yet.

I’ll nofollow the links, so as to stay in Google’s good books. I haven’t determined the pricing yet, but I’ll provide details in future.

Services

I’ve been turning down requests for custom WordPress plugins because I’ve been so busy. I’ll have to drop free model as there just isn’t time: I’m not going to stop working on my projects, unless I’m being paid for the work.

I’ll still be offering a Custom WordPress Plugin service, but I’ll have to be adequately compensated.

I’ll also offer a Custom WordPress Theme service in future, now that I have the taste for WordPress Theme development. This was always on the cards: it’s a natural extension for plugin developers with web design skills.

Final Thoughts

There’ll be a number of exciting things happening here in the coming months. I’m busy and I’m only going to get busier – but it’s all good!

A Host Of Changes (Not A Change Of Host)

Stephen Cronin — Thu, 20 Sep 2007 16:21:11 +0000

Return readers will notice some changes here at More Than Scratch The Surface. I normally don’t blog about changes, but in this case, there are so many that I thought it would be worthwhile. Here’s a rundown on them.

Modified Theme

My theme was just a customised version of the default WordPress Theme. It still is, but I’ve modified it further. One day I will design a Theme from scratch, but for now I’d rather spend my time writing plugins.

The main change is that I’ve widened it: it was optimised for 800×600 with one sidebar, it’s now optimised for 1024×768 with two sidebars. I’ve put both sidebars on the right, although I may change this. I’ve stayed with fixed width, because I prefer to know exactly how it will look.

I’ve been threatening to do this for a while. Actually it’s only been 6 weeks (seems longer) since I said I’d do this in the comments of Untwisted Vortex’s The Death of the 640×480 Resolution.

Menu Bar

I’ve removed the Pages section of my sidebar and added a menu bar instead. I suspect this will get crowded as I write more plugins, but for now I’m happy with it.

Contact Page

I now have a Contact page, which was one of the things picked up when my site was reviewed on Untwisted Vortex.

I am using a WordPress plugin to do this, but I won’t tell you which one yet. I tried out five different plugins in making the selection and I’m planning a series of reviews in the coming weeks. I don’t want to spoil the conclusion!

Articles Page

I’ve added the Articles plugin by Alex King and used it to create an Articles page, so my articles are not buried over time, as pointed out by Hari when he reviewed my site. I will supplement this with some extra article features in future (such as a Most Viewed Articles section in the sidebar).

One thing I noticed while setting this up is that I have gotten away from article style posts in recent times. I am going to work to get back to articles in future.

The Corn Factor

I removed my ‘blurb’ and changed my tagline (from A Journey In Web Development to Exploring Web Development). My blurb seemed good to me when I started out, but now it seems corny. To prove I still have the corn factor, I’ve added the infinite loop image to my header.

If I had a travel blog, I’d add a great photo to the header, but it’s not so easy to do when you are writing about web development! I’m sure something better will come later.

Social Widgets

The Bumpzee, MyBlogLog and BlogCatalog widgets have migrated from my sidebar to my footer. They were just taking too long to load. They aren’t any quicker in the footer, but at least they aren’t holding up the rest of the page.

DualFeeds Beta

I’ve also been running the beta version of DualFeeds 1.1, which includes a sidebar widget and the ability to show the RSS feed links after each post. You can see these in action on my site.

Actually, I’ve held up the release of DualFeeds 1.1 while I’ve been redesigning the site. People haven’t been clamouring for it and I want to have my site right before I start pushing the update.

FeedBurner

I started using FeedBurner for my feeds several weeks ago, as part of testing DualFeeds 1.1. I am not sure I’ll keep using it. It’s nice to get stats about the number of subscribers and there are other benefits, but although FeedBurner works well for the main feeds, it’s not so good with WordPress’ dynamic feeds (eg category feeds). I’ll discuss this further later on.

Also, it appears that FeedBurner feeds don’t work in China, meaning I can’t use my desktop reader to read my own feed! Makes testing interesting. The Subscribe To Email feature may sway me to stick with them.

Antisocial Plugin

I’ve adopted Andy Beard’s Antisocial hack of the Sociable plugin, which adds social bookmarking links to end of each post. Antisocial makes the links nofollow, so you don’t leak too much PageRank. I’m not sure if anyone is using them, but they sit just nicely below my feed icons.

The Dreaded Adsense

I’ve been warned that Adsense is not going to make me much money and that it may even drive readers away. I understand that my core readers are mostly Adsense blind and less likely to click ads. So why am I adopting it?

I’m about to develop a site for someone else and I may do more freelance web development in future. I should at least try Adsense shouldn’t I? I’ll be trying other options too in future, but I’ll try not to go overboard.

Polls

I’ve adopted Lester Chan’s WP-Polls plugin. Polls are a great way to interact with your visitors, so I’ll be adding one every so often.

Alexa Widget

I’ve added an Alexa widget, now my ranking is semi-respectable. I know, I know, there are serious flaws with Alexa, but it’s one way to measure my progress. Let me add it damn it!

The Future

That’s all the changes for the moment. There will be more changes coming in future (rework my About page, separate comments and trackbacks, add a top commentator section, sort out my meta tags and a bunch of other stuff). I’ll leave all of that until after I get the DualFeeds 1.1 update out the door.

If you’ve read this far, you truly have stamina (or at least you’re not easily bored!).