Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Customizing WordPress Themes


Published on

Published in: Technology, Business
  • If you want a girl to "chase" you, then you have to use the right "bait". We discovered 4 specific things that FORCE a girl to chase after you and try to win YOU over. copy and visiting... ➤➤
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ➤➤
    Are you sure you want to  Yes  No
    Your message goes here

Customizing WordPress Themes

  2. 2. ABOUT MEGreg 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 (
  3. 3. PREFACEPart 1 – Planning & Designing For WordPress Web DesignPart 2 – The Nuts & Bolts of Coding What You DesignedI recently had a case-study article published in the WooThemes blog thatsummarizes 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, if you would like to see more of my theme customizations you can navigateover to an article I wrote showing some websites I have developed and thethemes I started with before I customized them:* This is my approach to giving beginners an entry point into theme customizing. Iknow there are more tools we can implement like actions and filters but the tools Iam sharing here are geared toward the designer that wants to make simpleadjustments to their themes using CSS.
  5. 5. START WITH THE END IN MINDOur Philosophy: “We make the web work.” For DomesticEquity 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. 6. GETTING ORGANIZED• Header/Nav• Navigation• Slider• Body• Sidebar• Footer• Widgets
  7. 7. THE TOOLS• Media• Pages• Theme Options• Editor (CSS-.PHP)
  8. 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
  9. 9. DESIGNING YOUR UIIN PHOTOSHOPOrganizing your .PSD layers and layer folders… Why is thisimportant?• 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
  10. 10. ORGANIZE FOR SPEED OF DESIGNOpen screen grab in Photoshop and set your guides… and let your guides set you free
  11. 11. Next design all of your graphics and organize your layers into a folder structurethat corresponds with the way that WordPress sites are sectioned off
  12. 12. This is an example of how the guides evolve as your design becomes more complex
  14. 14. CUSTOM CSS TO ENHANCEVISUAL APPEALLet’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
  15. 15. Customize Navigation Step 1: In the process of changing the Buro theme navigation to agraphical one first we need to identify what code in the CSS is controlling each one of thebuttons. To do this we need to use a browser with the capability to “Inspect the Element.”• Firefox• Safari• Google Chrome
  16. 16. Customize Navigation Step 2: Next we need to upload our graphics that will beused 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
  17. 17. DRESSING UP YOUR PLUGINSCustomizing 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
  18. 18. Customize Plugin Step 1: First step in this process is to download and/or install theNextGenGallery plugin and create one or more galleries as well as upload ourtransparent .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
  19. 19. • 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
  20. 20. Customize Plugin Step 2: Next we will need to add the div classes to our pagesand 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
  21. 21. PIMP YOUR PAGE TEMPLATELet’s add a custom built shop navigation to each shop pageon our site. To do this we will need to customize one of our.PHP Template files with some simple DIVs and unorderedlists• 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.
  22. 22. Customize Your Template Step 1: To start we will design and import our needed.PNG graphics
  23. 23. Customize Your Template Step 2: Second we will add the div id and class withour unordered list to our Pages Template and then add our .CSS to custom.css
  24. 24. • Code above is added to the Page Template
  25. 25. • Code above is added to the custom.css file to control the visual elements of our new custom navigation area
  26. 26. Customize Your Template Step 3: The last step is to go into Page Attributes andselect the Full Width Template for each page where we want our customnavigation to appear.
  27. 27. The following website designs were all customizations of the Canvas Theme by Woo Themes.
  28. 28. HOW DO THESE PRINCIPLES WORKWITH RESPONSIVE DESIGN?Every step is the same from your planning to your designing inPhotoshop except now when you are planning out your site youwill be taking into account how your responsive themechanges when viewed on phone devices. Here are some tipsfor 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:
  29. 29. IN CLOSINGThere are a lot of things to loveabout web design and WordPresstheme customizing. Find whatinspires you and let yourinspiration fuel your work.Thank you for allowing me toshare this moment with you.-Greg Douglas