- Design a Professional Blog Layout in Photoshop
- Building a Responsive Layout With Skeleton: Starting Out
- Building a Responsive Layout With Skeleton: Navigation
- Building a Responsive Layout With Skeleton: jQuery Plugins
- Building a Responsive Layout With Skeleton: Finishing Off
- Building a Responsive Layout With Skeleton: Widescreen
- Skeleton to WordPress: Getting up and Running
- Skeleton to WordPress: Finishing Off
During previous parts of this series we’ve covered a lot. We took a Photoshop layout, built it into an adaptive web page using the Skeleton framework, explored aspects of CSS3, implemented various jQuery plugins and considered our options for wide screen layouts. One thing remains..
Be under no illusions; developing a bullet-proof WordPress theme takes a lot of time and effort. During the following tutorials we’re going to get our Magazine theme working, but only in its most basic form. WordPress is a big platform and is capable of almost anything you can throw at it – when you’re finished with these screencasts there’ll be plenty more for you to do!
Assuming you’ve installed WordPress somewhere and you’ve downloaded the source files to kick things off, let’s now see about packaging things up as a WordPress theme. There are some requisite files we need, plus a thumnail image, then it’s a question of correcting some paths and organizing our project files.
WordPress’ Menu and Widgets
Having gotten our theme up and running, let’s now hook up the menu and widget areas of the layout. We’ll need to add a new file to our project (
functions.php) which is going to handle some of this basic functionality.
I made reference to quite a few bits and pieces during these screencasts, so here are the various links to help you out.
- If you’ve never set up WordPress before, take a look at their Famous 5-Minute Install.
- For setting up a MAMP local server on OS X check out Chris Coyier’s First Moments with MAMP, Ryan Olsen’s Developing WordPress Locally With MAMP or How to Set Up a Killer WordPress Testing Environment Locally on Nettuts+.
- Details about all the WordPress functions used in this tutorial can be found on the WordPress Codex.
I also made use of a few WordPress plugins, which you can find and use in your own installation: