Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Web Design
Skinning a Wordpress Site (TheMacFeed)
Introduction
So, you want a blog do you? You want to broadcast your thoughts, opinions, hobbies or anything else come to that, to the massive audience out there on the WWW. Why not? Loads of people blog on a daily basis and there is a blog out there for everyone. But where do you start? For the purpose of this piece I will be using the example of TheMacFeed which is a Wordpress driven blog that I have recently finished styling for an Apple mad friend in the US. I will not take you through every stage of bringing the design together as your scrolling finger will have serious RSA by the time you have finished but I will cover the very basics of what I did and then leave you to figure out the rest. I will also refer to pages in the wordpress site itself as to the mechanics of installing plug-ins or themes.
What is Wordpress?
If you have not come across it before then you have been surfing the web with your eyes closed. Wordpress is a PHP driven blog machine that pops up all over the internet. Some of your favourite sites might be based on Wordpress as it is probably one of the most accessible ways for people new to the web to get started with a website. It has an awesome community of enthusiasts who are more than willing to help out with your project and the Wordpress Forum has thousands of members. Wordpress is 'Open Source'. This means that it is free and anyone is welcome to contribute a mod or a plug-in to enhance the owner and user experience. As the Wordpress community is so big there is no shortage of the functions you will need to craft your blog in exactly the way you want to. You can also download pre-built themes and, if you can find one that suits your purposes exactly then there is probably not much point in you reading on here. If you can't find what you need then you will need to make some changes to the design and CSS and it is this journey of mine that I will take you through.
The Tools
You are going to need some intellectual tools to start with. By this I mean some experience of CSS, HTML and PHP. Without these you will only be able to install pre-built themes and plug-ins. You will need to have built a website or two in my opinion! Secondly you will need some software and a hosting company with Cpanel controls. I will start with Cpanel. Cpanel hosting is a great way to 'point and click' install some pretty powerful PHP tools. Cpanel currently has support for Joomla, Drupal, Simple Machine Forums, PHPBB and many other applications. The beauty of Cpanel is that by just filling in a few basic details it will install Wordpress for you, set up the MySQL database and give you a working version of the blog in a matter of minutes. Of course you could upload all the files to a regular host and create the database yourself but why would you? Cpanel hosting is affordable and flexible with a whole host of other benefits. The best hosts I have found for Cpanel in the UK are Eukhost.
I would also recommend a copy of Dreamweaver for editing the pages and files but any web design software should do the job. On top of that a copy of the latest version of Firefox browser is your secret weapon. You will need to download an extension called 'Developer Tools' which basically lets you pull a page apart as you view it online. To really get down to which styles and divs are affecting which parts of the design. Invaluable when tackling a Wordpress theme as there is a lot of CSS and the styles will often be spread across different style sheets.
Into the guts of Wordpress
The starting point for TheMacFeed was to choose a very simple template to download and install. Instructions on how to do this are here. I used a plain theme called 'Simplex' and it gave me a great basis on which to build. When you install a new theme the CSS files you work on are usually within the template folder. In this case I changed the styles.css and the default.css. The first thing to do was to narrow the main body of the page. The style for this is called 'narrowcolumn' and was easily changed to 875px wide using the width style in the CSS. We decided to make the header bar and the menu area stretch full width of the page so that the site appears to fill a wide monitor and this was achived by using 100% width on the menu and header styles. I also did the same with the footer of the website as well for exactly the same reason and to give the page some balance.
Logo and Colour Scheme
I will say that the design was entirely the work of Daniel, the MacFeed owner, but I really like the logo he came up with and the colours were excellent. A good logo can give a great basis for organically 'growing' a design and can often drive many of the style decisions for the rest of a site. A logo is the first building block in a page. Once we had this I was presented with a rough 'sketch' of how the layout should fit together. One of the first things we did was to create a banner for the header image. The banner was the same width as the main body of the site and featured the logo with some smart 'Apple' text. After this we styled the rest of the header area and the menu bar with the same blue as the logo background. This created a 'fresh' and clean looking page, a far cry from the black of the original Simplex colourscheme.
Then we looked at the main navigation. To tie in with the logo we decided to go for a few simple links and to position them underneath the logo. There is a built in dropdown menu option with Wordpress so this was used to organise the 'Reviews' links into sensible categories such as 'iphone apps' and 'mac software'. As a note, all of the HTML for the header area sits in a file called 'header.php'. It can be a little strange for developers who are used to building a single page to picture how the site will pull together as one page once the 'header.php' is 'included' in the rest of the page. The same goes for the sidebar area. This can mean that a div tag can open in the header and close in the main index page. Just something else to get your head around. If you want to read about how PHP 'includes' work then read my tutorial on the subject.
Bells and Whistles
What good is a blog nowadays if you can't make some ready cash from it or tie in neatly with the social networking sites such as Twitter or Digg? Well, Wordpress has a plug in for advertising and social networking. First, the ability to be able to 'Tweet' or 'Digg' the articles on TheMacFeed. Installing the plug-in through the control panel is pretty easy and placing the code where it was needed was even easier. The PHP code simply sits above the other HTML in the sidebar.php file. Styling them within a paragraph tag made sure that they lined up and sat neatly on the page. I also added these icons at the foot of the single.php page, just below where the comments section is. This is the natural place to find these icons as you will read the article and then decide if it is worth a comment or if you would like to 'Tweet' or 'Digg' the URL. Daniel also wanted to sell some advertising space so, another plug-in. I created a div which sits above the main content of the website and inserted just two lines of PHP code. The plug-in allows for statistics such as number of impressions and number of clicks. This information should help Daniel to attract advertisers as the website develops and grows in readership.
The final thing was the Search Bar. Daniel wanted this placed above the header section rather than inside it. I also removed the built in styles. The overall look is much better than the styled button previously. Let's face it, 85% of viewers will look at this site on Safari and Apple actually bother to style buttons and form elements in a cool way which fits nicely in with the look and feel of the website. Why not use what Safari has given us?
Daniel will laugh when he reads this. I have cut out about three weeks of chopping and changing the design from 'fixed width' or with red highlights rather than blue. There is no need for me to go into the hours that we spent on messenger with Daniel saying 'just one more thing...'. The time difference between the UK and US alone meant that Daniel had to become almost completely nocturnal as he made sure he was available around the times when I could be working on the site. It was hard work getting there and I wouldn't want you to feel that it just fell into place. It was a rewarding experience though and I feel that I am improved as a designer having done this project. I hope that Daniel and his team get a lot of pleasure from having their own website, I know I do. I also hope that they make some serious money and one day a small donation might be headed towards my PayPal account! I would recommend Wordpress to anyone who wants a blog. It is the one and only blog tool for me. Go on...dive in!
