By Joseph Labrecque

Created

January 24, 2011

I’ve been wanting to take control of my personal blog theme for some time in order to both simplify how everything was being displayed, and to obtain a greater degree of flexibility over time. There are a lot of great themes out there for WordPress, and I’ve been fairly happy with many of those I’ve tried – but they still were not exactly what I wanted.

I decided to come up up with something of my own by creating a child theme of the default WordPress “TwentyTen”. Seeing as how I don’t need many features on here, and that “TwentyTen” is a modern design that supports all the new 3.0 features, a child theme sounded perfect. I also tend to shift these around over time, and this would allow that as well.

Adobe Fireworks

Adobe Fireworks

The first thing I did is sketch out on paper a sample of the sort of layout I was looking to create. I then created a basic measured layout in Fireworks, followed by a number of textured image segments for the navigation menu, page background, and content area. Fireworks is great for stuff like this, due to the robust texturing system available.

Adobe Dreamweaver

Adobe Dreamweaver

Dreamweaver CS5 has extended support for PHP-based CMS and blogging systems like WordPress. During prerelease, I was playing around with these features quite a bit but had actually never done any work with the final release. It’s actually very convenient to be able to view and interact with the live website files (on my testing server, of course) while designing and tweaking elements of the theme. Dreamweaver can also be enabled to provide code-completion for core WordPress functionality, although I didn’t need it in this case.

Most of what I did was remove a lot of the header stuff I didn’t need, and create a custom navigation menu along the top of the page. The rest of the work was just a lot of CSS hack and slash to get things looking right, setting up new elements, and skinning everything with my exported images. It actually went a lot more smoothly than anticipated.

Adobe BrowserLab

Adobe BrowserLab

Most of the cross browser rendering checks were done on my local machine using Chrome 8, FireFox 4 beta, and Internet Explorer 8. I have other machines I could log into and check browsers like Opera or the IE9 beta, but don’t have a way to test on OSX from my home. Anyone familiar with DropFolders knows the snails-pace I take when it comes to doing any Apple stuff… So I fired up BrowserLab and was able to check my basic design rendered on what must have been nearly 20 different browsers across Windows and OSX.

It is interesting to see how relatively similar the design rendered across browsers. The most trouble that I noticed was lack of support for my embedded fonts in older browsers. You can also see in the above image that we definitely have some shifting going on in regard to the positioning of elements on the page, but nothing so terrible to render the design unusable.

I’m very pleased with both the resulting design, and the simple, unified workflow involved in getting to this point. There are lots of little things that will probably come up which I’ll modify in the future… but it’s great to know now how very simple it will be to do so.

Check it out over at http://inflagrantedelicto.memoryspiral.com/!

COMMENTS

  • By Michelle - 5:26 PM on August 23, 2011  

    I’m working on creating a child theme for WordPress using Dreamweaver as well and one roadblock I’m running into is when I use the Inspect tool and then edit the properties of a div (for example add a border, background color, etc) these edits are put in the parent theme style sheet rather than the child theme. How did you get your edits to show up in your child theme stylesheet? or did you just manually add them to your child theme stylesheet?

    • By Joseph Labrecque - 8:10 PM on August 23, 2011  

      Yeah, be sure to edit the child theme and not the parent. I generally just use DW as a code editor and am unsure what the inspect tool does – sorry!

    • By Steve - 10:00 PM on January 26, 2012  

      The inspect tool is good for testing code and getting immediate feedback. Once you’ve found what you want, manually add it to your child theme style.css

      Make sure that your child theme’s CSS and parent theme’s CSS are talking correctly.

      Parent should include:
      @import url(‘css/common.css’);

      Child Theme should include:

      /*Put it at top of doc, after author URI and tags*/
      Template: [name of parent theme in lowercase]

      /*Then a little further down place the following*/
      /* Get Theme-Parent CSS */
      @import url(‘../platformpro/style.css’);

      Hope that helps!

    • By Sharif - 11:11 AM on September 26, 2012  

      Hey michelle I have the same problem as yours. Did you find the way to put the codes automatically on the child theme stylesheet?