1. CUSTOMIZING
WORDPRESS THEMES
Greg Douglas Domesticequity.com ~ WCLA2012

2. ABOUT ME
Greg Douglas –
Creative Director, Domesticequity.com
• I’ve been designing for the web since 1998,
and have been a WordPress
designer/developer for about 2 years.
• I specialize in template and custom website
design for medium size to large corporate
companies.
• I am a Woo Affiliate Worker and most of my
client work has been built on a Woo Theme
(woothemes.com)

3. PREFACE
Part 1 – Planning & Designing For WordPress Web Design
Part 2 – The Nuts & Bolts of Coding What You Designed
I recently had a case-study article published in the WooThemes blog that
summarizes most of what I will be sharing here today. You can read the case-
study and copy and paste my source code directly from the article here:
woothemes.com/2012/05/case-study-the-lab-anti-mall/
Also, if you would like to see more of my theme customizations you can navigate
over to an article I wrote showing some websites I have developed and the
themes I started with before I customized them: domesticequity.com/domestic-
equity-studio-woothemes-affiliate-worker
* This is my approach to giving beginners an entry point into theme customizing. I
know there are more tools we can implement like actions and filters but the tools I
am sharing here are geared toward the designer that wants to make simple
adjustments to their themes using CSS.

4. PART 1
PLANNING & DESIGNING
FOR WORDPRESS WEB
DESIGN

5. START WITH THE END IN MIND
Our Philosophy: “We make the web work.” For Domestic
Equity Studio that means 3 things.
• Excellent/Inspired visual design
• Create an engaging and unique user experience
• Don’t miss the forest for the tree
• Well organized easy to find content
• This is a tool for your client to make more money
• The content is the most important thing in their site
• Fast!
• They want their website updates made fast
• You want to build their website fast so your
company can stay strong and profitable

6. GETTING ORGANIZED
• Header/Nav
• Navigation
• Slider
• Body
• Sidebar
• Footer
• Widgets

7. THE TOOLS
• Media
• Pages
• Theme
Options
• Editor
(CSS-.PHP)

8. SELECTING YOUR THEME
• Google search
“WordPress Themes”
• Elegant Themes
• Thematic
• Graph Paper Press
• Woo Themes
• Based on the content
of the site and the
discussions you have
had with your client
select your theme
• Do a screen grab of
your selected them
demo

10. DESIGNING YOUR UI
IN PHOTOSHOP
Organizing your .PSD layers and layer folders… Why is this
important?
• You create a consistent approach for all of your design work
• It allows you to make your design very complicated and layer
heavy without driving yourself insane
• It will help you to move fast through the design phase
streamlining what can sometimes be a long and arduous
process
• Sets you up for more success and speed in the development
phase of your WordPress website development

11. ORGANIZE FOR SPEED OF DESIGN
Open screen grab in Photoshop and set your guides… and let your guides set you free

12. Next design all of your graphics and organize your layers into a folder structure
that corresponds with the way that WordPress sites are sectioned off

13. This is an example of how the guides evolve as your design becomes more complex

16. PART 2
THE NUTS AND BOLTS
OF CODING WHAT
YOU DESIGN

17. CUSTOM CSS TO ENHANCE
VISUAL APPEAL
Let’s pop the hood: Looking a little closer at our case-study
• Many of the smaller changes made to this theme can be styled
in the “Theme Options” like fonts and header classes but there
are some elements I have designed in my .PSD that are beyond
the scope of “Theme Options”
• In the following slides we will drill down into two, possibly three
areas of our theme customization to show how some simple .CSS
can be applied with dramatic affect
• We will start by looking at how to replace any WordPress text
based navigation with graphical buttons

18. Customize Navigation Step 1: In the process of changing the Buro theme navigation to a
graphical one first we need to identify what code in the CSS is controlling each one of the
buttons. To do this we need to use a browser with the capability to “Inspect the Element.”
• Firefox
• Safari
• Google Chrome

20. Customize Navigation Step 2: Next we need to upload our graphics that will be
used in place of the text nav.
• Note that the button and the hover state are both a part of the same graphic
• The height of the button is 75 pixels but the height of the graphic we are
uploading is 150 pixels

21. DRESSING UP YOUR PLUGINS
Customizing the look of your plugin
• Start by selecting a plugin. To do this a great place to start is
WordPress.org/plugins.
• Some good examples of categories of plugins to customize are
• Calendars
• Music Players
• Galleries
• For our example we will focus on my favorite plugin…
• The NextGenGallery!
• We will use .PNG images behind our NextGenGallery to create
a look that breaks the grid and makes the otherwise normal
looking gallery look totally unique

23. Customize Plugin Step 1: First step in this process is to download and/or install the
NextGenGallery plugin and create one or more galleries as well as upload our
transparent .PNG background graphic
• NextGenGallery provides good support to help you install and create your galleries so we
won’t go into detail about the gallery setup specifics
• You will notice above that the transparent .PNG background graphic we are uploading
contains no gallery photos or text in the graphic

24. • Also it will be important to create and upload our gallery images
• Note: In the images above that I have added the same distressy edges to
each photo to be placed in each gallery to create a consistent look between
the background and foreground graphics

25. Customize Plugin Step 2: Next we will need to add the div classes to our pages
and the .CSS we have written to the custom.css file
• Code on the left is added to the specific page to be customized
• Code on the right is added to the custom.css file to control the visual
elements within each div

26. PIMP YOUR PAGE TEMPLATE
Let’s add a custom built shop navigation to each shop page
on our site. To do this we will need to customize one of our
.PHP Template files with some simple DIVs and unordered
lists
• Choose a page template to customize (in this case I chose Full
Width page Template)
• Paste your custom code into the template page
• Write your CSS to control the properties of the new content
• Open each page and assign the template to the pages that
need to display the new content.

27. Customize Your Template Step 1: To start we will design and import our needed
.PNG graphics

28. Customize Your Template Step 2: Second we will add the div id and class with
our unordered list to our Pages Template and then add our .CSS to custom.css

29. • Code above is added to the Page Template

30. • Code above is added to the custom.css file to control the visual elements of
our new custom navigation area

31. Customize Your Template Step 3: The last step is to go into Page Attributes and
select the Full Width Template for each page where we want our custom
navigation to appear.

32. The following website designs were all customizations of the Canvas Theme by Woo Themes.

39. HOW DO THESE PRINCIPLES WORK
WITH RESPONSIVE DESIGN?
Every step is the same from your planning to your designing in
Photoshop except now when you are planning out your site you
will be taking into account how your responsive theme
changes when viewed on phone devices. Here are some tips
for designing visually stunning responsive WordPress sites
• Start with a theme that is responsive to begin with
• Thematic is good for this
• Canvas 5 by Woo Themes is stellar
• There is an increasing number of themes being designed to be
responsive so a simple search should help you find more options
• Install the theme and experiment with it to see how the content is
displayed differently on a phone
• Let the limitations of the responsive template inform how you design
your site from the get go (hint: this gets easier the more you practice
• Here is an example of a totally tricked out responsive WordPress
website: http://konnichiwa-sushi.com

40. IN CLOSING
There are a lot of things to love
about web design and WordPress
theme customizing. Find what
inspires you and let your
inspiration fuel your work.
Thank you for allowing me to
share this moment with you.
-Greg Douglas