CUSTOMIZING WORDPRESS THEMES

Greg Douglas Domesticequity.com ~ WCLA2012

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)

ABOUT ME

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

PLANNING & DESIGNING FOR WORDPRESS WEB DESIGN

PART 1

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

• Header/Nav

• Navigation

• Slider

• Body

• Sidebar

• Footer

• Widgets

GETTING ORGANIZED

• Media

• Pages

• Theme Options

• Editor (CSS-.PHP)

THE TOOLS

• 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

SELECTING YOUR THEME

DESIGNING YOUR UIIN 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

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

ORGANIZE FOR SPEED OF DESIGN

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

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

THE NUTS AND BOLTS OF CODING WHAT YOU DESIGN

PART 2

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

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

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

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

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

• 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

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

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.

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

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

• Code above is added to the Page Template

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

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.

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

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

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