0
CUSTOMIZINGWORDPRESS THEMESGreg Douglas   Domesticequity.com ~ WCLA2012
ABOUT MEGreg Douglas –Creative Director, Domesticequity.com•   I’ve been designing for the web since 1998,    and have bee...
PREFACEPart 1 – Planning & Designing For WordPress Web DesignPart 2 – The Nuts & Bolts of Coding What You DesignedI recent...
PART 1PLANNING & DESIGNINGFOR WORDPRESS WEBDESIGN
START WITH THE END IN MINDOur Philosophy: “We make the web work.” For DomesticEquity Studio that means 3 things.      • Ex...
GETTING ORGANIZED• Header/Nav• Navigation• Slider• Body• Sidebar• Footer• Widgets
THE TOOLS• Media• Pages• Theme  Options• Editor (CSS-.PHP)
SELECTING YOUR THEME• Google search  “WordPress Themes”   • Elegant Themes   • Thematic   • Graph Paper Press   • Woo Them...
DESIGNING YOUR UIIN PHOTOSHOPOrganizing your .PSD layers and layer folders… Why is thisimportant?•   You create a consiste...
ORGANIZE FOR SPEED OF DESIGNOpen screen grab in Photoshop and set your guides… and let your guides set you free
Next design all of your graphics and organize your layers into a folder structurethat corresponds with the way that WordPr...
This is an example of how the guides evolve as your design becomes more complex
PART 2THE NUTS AND BOLTSOF CODING WHATYOU DESIGN
CUSTOM CSS TO ENHANCEVISUAL APPEALLet’s pop the hood: Looking a little closer at our case-study• Many of the smaller chang...
Customize Navigation Step 1: In the process of changing the Buro theme navigation to agraphical one first we need to ident...
Customize Navigation Step 2: Next we need to upload our graphics that will beused in place of the text nav.•   Note that t...
DRESSING UP YOUR PLUGINSCustomizing the look of your plugin•   Start by selecting a plugin. To do this a great place to st...
Customize Plugin Step 1: First step in this process is to download and/or install theNextGenGallery plugin and create one ...
•   Also it will be important to create and upload our gallery images•   Note: In the images above that I have added the s...
Customize Plugin Step 2: Next we will need to add the div classes to our pagesand the .CSS we have written to the custom.c...
PIMP YOUR PAGE TEMPLATELet’s add a custom built shop navigation to each shop pageon our site. To do this we will need to c...
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 withour unordered list to our Pages Template and t...
•   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 andselect the Full Width Template for each pag...
The following website designs were all customizations of the Canvas Theme by Woo Themes.
HOW DO THESE PRINCIPLES WORKWITH RESPONSIVE DESIGN?Every step is the same from your planning to your designing inPhotoshop...
IN CLOSINGThere are a lot of things to loveabout web design and WordPresstheme customizing. Find whatinspires you and let ...
Customizing WordPress Themes
Customizing WordPress Themes
Customizing WordPress Themes
Customizing WordPress Themes
Customizing WordPress Themes
Customizing WordPress Themes
Customizing WordPress Themes
Customizing WordPress Themes
Customizing WordPress Themes
Customizing WordPress Themes
Customizing WordPress Themes
Upcoming SlideShare
Loading in...5
×

Customizing WordPress Themes

1,155

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,155
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Do a demo in Firefox of how to “Inspect the Element”
  • Demo where this CSS code gets pasted into the custom.css
  • Do a demo in Firefox of how to “Inspect the Element”
  • Do a demo in Firefox of how to “Inspect the Element”
  • Do a demo in Firefox of how to “Inspect the Element”
  • Do a demo in Firefox of how to “Inspect the Element”
  • Do a demo in Firefox of how to “Inspect the Element”
  • Do a demo in Firefox of how to “Inspect the Element”
  • Do a demo in Firefox of how to “Inspect the Element”
  • Do a demo in Firefox of how to “Inspect the Element”
  • Do a demo in Firefox of how to “Inspect the Element”
  • Transcript of "Customizing WordPress Themes"

    1. 1. CUSTOMIZINGWORDPRESS THEMESGreg Douglas Domesticequity.com ~ WCLA2012
    2. 2. ABOUT MEGreg 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. 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 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 navigateover to an article I wrote showing some websites I have developed and thethemes 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. 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.
    4. 4. PART 1PLANNING & DESIGNINGFOR WORDPRESS WEBDESIGN
    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
    13. 13. PART 2THE NUTS AND BOLTSOF CODING WHATYOU DESIGN
    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 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
    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: http://konnichiwa-sushi.com
    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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×