Archive for the ‘Web Dev’ category

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

7 Free & Open Source Software Alternatives for Web Developers

January 26th, 2009

There are several open source and free alternatives to almost every piece of software on the market, and this article is just a run down of apps I have found especially useful over time. In this article I take a look at some of the free alternatives on the market.

Aptana – Web Development Environment

Aptana has just recently overtaken Dreamweaver as my editor of choice. It comes in two versions; a free and a paid. The differences can easily be overlooked and seems to come down to support requests. The interface is clean and doesn’t look too boring which can often be the case with open source software. The team behind aptana have recently added support for PHP which I have been wanting in some time. I didn’t make the switch fully until they added PHP support. PHP support comes via a plugin and is really easy to install. It is probably not completely up to scratch if you are a hardcore PHP developer, but for us humans who just wants something to edit our WordPress files,Aptana is perfect.

Aptana, My Favourite IDE

Aptana, My Favourite IDE

There are several cool features supported in Aptana and here are just a few of my favourites:

  • Syntax highlighting
  • Auto Code completion
  • Easy tag wrapping
  • Auto indention
  • Auto source formatting

The Pro version, though not free, still checks in way cheaper than Adobe’s DW at $99 with upgrades costing $79. The main focus of the app is on Ajax development, but it is more than adequate for web designers HTML work and CSS coding. One thing I like about the paid version and which might just make me buy it, is the built in FTP feature which by the way works better than the one in Dreamweaver.

FTP Software

FireFTPEven though I like the built in FTP feature of Aptana and Dreamweaver, I still need a standalone FTP client for those unrelated files and WordPress zip files that needs uploading to various hosting accounts. The one I currently use is a Firefox add-on called FireFTP and it does the job just fine. It doesn’t have any fancy features, but it’s stable and reliable. Not much to say about it, it just works.

Word Processing and Spreadsheets

None of us can live without some form of Word processing software, spreadsheets are used by many for budgeting and invoicing, so pretty essential. The only ones I really have experience with, mainly because they were too good to get rid off, is Google Docs and Open Office. Open Office is a fully fledged Office Suite right up there with that of Microsoft Office. And despite recent actions, Open Office is a very popular and widely used Office Suite. Google Docs run in your browser and can be accessed from anywhere. I normally use it for writing things like blog posts and documents that I would like to have access to from anywhere.
openoffice

I also like that Google Docs doesn’t apply an insane amount of styling to my documents when it comes to copying and pasting them into WordPress. It’s nice that you don’t have to go through each paragraph to remove font styles.

Email

This might seem like an obvious one, but if you use Microsoft Outlook, you might not know that there even exist any other software for managing your emails. Up until a few months ago I liked to have a desktop email client, but now I have completely switched to Gmail for several reason. Mostly because of it’s great search features and labels, but I also got tired of having to keep several computers in sync. I wanted all my email to be available to me anywhere I went. If you want to use a desktop client and have all your emails synced at all time, I recommend Thunderbird in conjunction with Gmail. Simply use Gmail as you email hub and use IMAP with your Thunderbird client. This way you will always have all you email in sync across all your PCs and still have it all in Gmail. I had this setup for quite some time, but found myself simply using Gmail exclusively, so I ditched Thunderbird in the end.

Design & Art Work

This is an area where I haven’t completely managed to get rid of Adobe’s flagship Photoshop, but I keep making an effort in order to save some cash. As you are reading this article, I assume that you use Photoshop and are looking for an alternative.

The GIMP is pretty popular but very different from Photoshop

The GIMP is pretty popular but very different from Photoshop

There are quite a few on the market but none exactly like Photoshop. The obvious alternative is the GIMP, and by using GIMPShop you can imitate many of Photoshop’s features and get the apps visual appearance to resemble that of PS. You can even get a script to add the same keyboard shortcuts to GIMP, but it is still not Photoshop, and you will have to make an effort if you want to completely make the switch. But if you need the money it’s definitely an alternative.

Other options include Paint.NET (Windows Only), Blender for 3D creation and Inkscape for an alternative to Adobe Illustrator. I don’t have enough experience with these tools to offer any commentary, so if you have any, leave them in the comments.

Invoicing & Time-tracking

We all need something to keep track of our time, and invoice clients. For that task I use Freshbooks, you are limited to a few clients at a time with the free version, but that is not a problem for me as I usually only work with one client at a time. You have great time-tracking abilities and simple elegant invoicing, which you can even brand in the free version which I like. You can provide your clients with a login so they can track the process and save you all those email updates.

Multimedia Playback

No one can work without some noisy distractions and for most of us that includes listening to a lot of music. You are probably using iTunes which is of course free, but not really open source.

Songbird

If you want an open source iTunes alternative, I recommend checking out Songbird, it has been in beta for several years and has just recently been released in a stable version. My favourite is MediaMonkey which comes in both a free, and a paid version, but both great alternatives to iTunes.

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.


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.