Posts Tagged ‘WordPress’

Child Themes: The efficient way to modify WordPress themes

November 24th, 2009

If you read the Online Journalism Blog, you might have noticed a change in the design recently. The publisher of the blog, Paul Bradshaw, asked me to design a new theme which would have a wider area for the main content. And, would keep with the traditional OJB colour scheme. A pretty open brief, which is never bad.

The finished theme is actually not a complete theme, it’s ‘only’ a child theme. As this was the first time I had ever played with child themes, I wanted to write down some thoughts and recommendations. I have done so in an article over at the OJ Blog called which you are welcome to read.

Here are the first few words:

Ever had to modify a WordPress theme, and struggled to find your way around the CSS or template files? Or, have you ever had to update a theme, just to lose all you modifications? Use child themes to modify your blog design.

Catchy right! Here’s the rest of the article

1 comment »

Posted in Web Dev

Tags:

My First WordPress Theme: Collaborate

January 19th, 2009

For you that just want to grab the .zip file and get on with it; here you go:
Download: Collaborate WordPress Theme

Although I have documented most of the process already, I thought I would go into a little more detail about the specific parts of the theme. The theme on it’s own is very different from your normal WordPress theme, in that the front page is divided horizontally, instead of vertically. On the single post- and archive pages, you get the familiar vertical divided layout with a sidebar on the right. The main motivation behind the theme was, to develop a theme specifically for collaborative blogs with several categories, just like Web & New Media Blog.

Screenshots

How to use the Theme

The theme is fairly simple to use and you don’t have to do any modification in order for it to work. A few things you should be aware of though.

The theme uses two separate sidebars.

You will find both sidebars listed in the widgets section of your admin panel. They are named ‘Home Page’ & ‘Post Page’. The first one is for using widgets on your home and archival pages. These will show up underneath the posts dividing the page horizontally. The second one is for using widgets on your individual post pages. This is more like your regular sidebar with the widgets listed vertically at the right underneath each other

When you use widgets with this theme and them from within the admin panel, you have to make sure explicitly select the specific sidebar in which you want the widget to appear. You do that from the little drop down menu at the top right corner in the ‘Widgets’ panel. You can select either ‘Home Page’ which will apply to the front page, the search pages and the archive pages including category navigation. If you want your widget to appear on your individual post pages such as the ‘Pages’ and single ‘Posts’, then you need to select ‘Single Page’ option from the drop down menu.

Be aware that you cannot use a widget in two different sidebars. WordPress only lets you add the widget to one sidebar no matter how many sidebars the theme has.

The WP-Gravatars Plugin

This plugin is not yet properly supported by WordPress 2.7 and you will have to make some manual modifications if you still want your theme to validate.

I recommend using the WP-Gravatar plugin to show the recent comments on your home page. Just install the plugin, select the widget and display it in your ‘Home Page’ sidebar. BUT! Don’t activate the authors profile widget! This will break the layout. Read the next paragraph to learn how to further customize.

The Front & Archival Pages

The main thing that makes this theme stand out in the crowd is the front page, search and archive pages. It’s not a secret that I borrowed ideas from several of the big guns in the collaborate blogging sphere, including; Lifehacker, Engadget and Boing Boing. The theme puts emphasize on topic, author and search based navigation. Each post on both the front page and on single post pages are accompanied by the authors Gravatar.

There is also a default authors list at the bottom of the pages, this easily filters all posts from a specific author. This is only displayed if there are no widgets selected in your admin section, otherwise only the widgets selected will be displayed. The default widgets are: A monthly archive list, the sites blogroll and a list of authors with links. I recommend using the theme with the WP-Gravatar Plugin and activating the ‘Recent Comments Gravatars’ Widget, make sure you select and show; ‘Home Page’ from the drop down menu on the right (in the ‘Widgets’ window). Just give it a Title of ‘Recent Comments’ and it will not break the layout. Be sure not to activate the ‘Author Profile’ widget along side with it as this will break the layout.

Sub Section of Collaborate WordPress Theme

WP-Gravatars plugin and a modified index.php that shows the authors list

If you still want to show a list of the blogs authors, you will have to make a few changes in the themes index.php file. Just move the very last occurrence of <?php endif; ?> to right above the following line: <div id="blog-authors" class="widget widget_blog_authors">. This will show the author list no matter how many widgets you are displaying on the front page.

Single Post Pages

As with ever other blog, a collaborative one is likely to get a lot of traffic that surpass the front page. This includes search engine hits and people who come from Feed Readers and other blogs. It’s a lot harder to catch people’s attention if they haven’t exclusively typed in your websites URL to find your blog. Visitors that come from feed readers, search results and even from other blogs are likely to be looking for something specific. So why not make it as easy as possible for them to find?

Single Post Page of the WP Theme Collaborate

The Collaborate theme uses a more standard layout for the individual pages. It is a two column layout with a sidebar on the right and comments at the bottom. Using a format that readers feel comfortable with and are used to, saves them time in finding what they are looking for.

With this theme I have tried to provide a very simple easy to use layout with as little distraction as possible. The authors Gravatar is displayed next to the title of the post. The Gravatar is working as a hook in the document to draw the attention to the article.

This theme is definitely not for everyone; it is specifically targeted at information heavy multiple authoring websites covering a wide range of topics.


Comments Off »

Posted in Blogging, Web Dev

Tags:

Great Interview with WordPress-Founder Matt Mullenweg

January 14th, 2009
Matt Mullenweg

Matt Mullenweg

Last night became quite a long night for me, by accident I caught an interview with Matt Mullenweg over at WeblogToolsCollection. I intended just to listen to a few minutes, go to bed and catch the rest in the morning, but the discussion was too interesting for me to cut short. It lasted over 2 hours and was hosted by Jeff Chandler.

The discussion was mostly around the issues of the GPL license, Premium (or Proprietary themes as Matt like to call them) and the recent clean out of the WordPress.org theme library. I’m not into all that premium theme GPL stuff and what I really liked about the interview was how Matt laid everything on the table about the organisation and structure around WordPress.org. His passion for the Open Source community really shined through. WordPress is all about doing what is best for the OS community and Matt made that very clear.

Matt is not afraid of voicing his opinion and did not avoid any questions or issues. He answered everything to the best of his abilities, a real pleasure for once. His commitment to the open source community is phenomenal and something every developer out there could learn from.

Stream the 2 hour long chat with Matt, download the .mp3 or read the transcript.

3 comments »

Posted in Blogging

Tags:

Speed up Your Design Process by Using Default CSS Rules

January 12th, 2009

If you know what you are doing, download the stylesheets (zip file), otherwise read on.

All the web projects I work on need custom written CSS stylesheets. While some elements like classes and id’s might be the same most of them aren’t. I always design everything from scratch, I know some work of off templates but I feel it limits the creative process and encourage cutting corners. You want every design/client to be as unique as possible, but some things can be automated.

I use WordPress for most of my web design work, and I’m about to give you a reason for doing that as well ;) if you don’t already.

I use two pre written stylesheets in almost all projects. I use the reset-styles.css written by Eric Meyer, and my own content stylesheet.

Resetting Browser Styles

Most if not every imaginable browser on the market apply its own set default styles to every web page they feed to the user. This means that if you don’t define certain styles like margins and line-height, then the browser will define them for you. As every browser defines these styles differently, you will not get any consistency unless you define them yourself. By using Mr. Meyers stylesheet you ensure that you reset all browser styles to zero. This does two things for you:

  1. It gives you consistency across browsers.
  2. It ensures that you don’t forget to define the styles that will screw up your precious design.
Reset your stylesheets to improve browser compatibility

Reset your stylesheets to improve browser compatibility

Just download the stylesheet and put it in the same folder as your main stylesheet and use the @import command to apply them to your design.

Custom WordPress Post Styles

Now that you have reset all your styles you will want to define them. I like to think of this as applying my own default stylesheet to all browsers. If you don’t define any styles all you headers (h1, h2, h3 etc.) will all look the same, your list (ul, ol) will look like plain text.

The Solution

There are certain content styles that won’t deviate much from one design to the design. For the web, you mostly use a line-height of 1½ or 2 times the font size. You list items will have slightly more ‘air’ between them and they will be slightly indented. Your headers will decrease in size from <h1> through to <h6>. I have created a stylesheet that assigns a default value to all these elements so you don’t have to do it every time.

WordPress generate a lot of styles on the fly that makes it easy to make this consistent over many designs. One of the things that I have found useful is to style all my images according the align property assigned by WordPress. When you insert an image in your post, you choose how you want to align it, and WordPress will automatically give the <img> an appropriate class. You also have the ability to use captions from within the image editor, this will also trigger WordPress to assign a certain class to the image. These styles are consistent across all WP sites, so why not apply you own values to these as well. Remember, we are only concerned with content styles that will be the same on the majority of designs.

Some of the styles in the css file include consistent styling for images aligned left, right or centred. It ensures that the image captions will show up nicely no matter how your layout varies. Blockquotes will be slightly indented with a background image and a background colour. All the list and paragraphs will have defined line-heights, margins and padding.

Right, Show me the Meat!

This save a tremendous amount of time and the values are consistent across most designs. You can easily go in and edit the content stylesheet to suit your needs. The colours used in the document are all listed at the top, so it’s just a matter of using the find/replace command if you want to change all of them at once.

Download

Go grab the zip file or have a look at the demo page.

The zip file includes all the files and images you need. Just leave the folder hierachy intact and you are good to go.

Comments Off »

Posted in Tutorials, Web Dev

Tags: