Customizing WordPress Themes


Transcript of Customizing WordPress Themes

Page 1: Customizing WordPress Themes


Greg Douglas ~ WCLA2012

Page 2: Customizing WordPress Themes

Greg Douglas –

Creative Director,

• 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 (


Page 3: Customizing WordPress Themes

PREFACEPart 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:

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:

* 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.

Page 4: Customizing WordPress Themes



Page 5: Customizing WordPress Themes


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

Page 6: Customizing WordPress Themes

• Header/Nav

• Navigation

• Slider

• Body

• Sidebar

• Footer

• Widgets


Page 7: Customizing WordPress Themes

• Media

• Pages

• Theme Options

• Editor (CSS-.PHP)


Page 8: Customizing WordPress Themes

• 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


Page 9: Customizing WordPress Themes
Page 10: Customizing WordPress Themes


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

Page 11: Customizing WordPress Themes

Open screen grab in Photoshop and set your guides… and let your guides set you free


Page 12: Customizing WordPress Themes

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

Page 13: Customizing WordPress Themes

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

Page 14: Customizing WordPress Themes
Page 15: Customizing WordPress Themes
Page 16: Customizing WordPress Themes



Page 17: Customizing WordPress Themes


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

Page 18: Customizing WordPress Themes

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

Page 19: Customizing WordPress Themes
Page 20: Customizing WordPress Themes

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

Page 21: Customizing WordPress Themes


Customizing the look of your plugin

• Start by selecting a plugin. To do this a great place to start is

• 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

Page 22: Customizing WordPress Themes
Page 23: Customizing WordPress Themes

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

Page 24: Customizing WordPress Themes

• 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

Page 25: Customizing WordPress Themes

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

Page 26: Customizing WordPress Themes


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.

Page 27: Customizing WordPress Themes

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

Page 28: Customizing WordPress Themes

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

Page 29: Customizing WordPress Themes

• Code above is added to the Page Template

Page 30: Customizing WordPress Themes

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

Page 31: Customizing WordPress Themes

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.

Page 32: Customizing WordPress Themes

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

Page 33: Customizing WordPress Themes
Page 34: Customizing WordPress Themes
Page 35: Customizing WordPress Themes
Page 36: Customizing WordPress Themes
Page 37: Customizing WordPress Themes
Page 38: Customizing WordPress Themes
Page 39: Customizing WordPress Themes


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:

Page 40: Customizing WordPress Themes

IN CLOSINGThere 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