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

Simple Steps to Modify the Look and Feel of Your Site

Published in: Technology, Business
  • HOW TO UNLOCK HER LEGS! (SNEAK PEAK), learn more... 
    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
  • Thanks, glad you liked it. I'm scheduled to do part 2 in a few months. Please check out or to get more great WordPress tips or follow my blog at
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi Laura, great ppt. Really bummed that I missed this. Great material presented, thanks.
    Are you sure you want to  Yes  No
    Your message goes here

Customizing WordPress Themes

  1. 1. Twenty Twelve Theme
  2. 2. This is one example of a basic theme thathas been changed. As you can see, youcan change a theme into almost anythingyou want.
  3. 3. 1) Preparation2) Process1) Using theme tools2) CSS3) Footer & Favicon updates3) Review
  4. 4. -Site with WordPress installed and themeclose to what you are looking for.-FTP access to site-Image editing software (i.e. Photoshop)-Knowledge of CSS-Backup copy of the original theme. (Just in case)
  5. 5. Use a development sitelike sub-domain orfolder within yoursite, or set up on aserver that is not yetactive.
  6. 6. If a customer has a domain name and hosting, but not acurrent site, I recommend the Maintenance Mode Plugin, so that you canBuild the site andExperiment before thesite goes live. Thisplugin puts up a“Coming Soon” noticefor all visitors who arenot logged in.Tip:
  7. 7. I recommend using ColorPic for Windows to help youchoose colors and find their hex code. This canhelp you match logo colors.Or Color Picker for Mac.
  8. 8. There are a couple good add-ons/extensions forChrome & FF including MeasureIt! and Page Ruler.They can be a big help in determining sizes.
  9. 9. is an incredible resource for creatingprofessional looking buttons.
  10. 10. Not only before you begin, but as you makechanges. You can use a text editor like notepadto copy & paste the file you’re working on, but youcan also use ftp to copy all the files over.
  11. 11. The theme tells WordPress how todisplay data.The actual data (posts & pages)are stored in the MySqLdatabase.Within the theme, there are CSSfiles and PHP files.The CSS files tell the theme howto look.The PHP files tell the theme whatto do (ie where to put whatcontent from the database.)Theme DatabaseCSS PHP
  12. 12. header.php-includes logo andnavigationindex.php or home.php-home pagepage.php- single pagessidebar.php-can be on either sidefooter.php
  13. 13. This section requiresknowledge of CSS.If you have a goodtheme, it will bebroken into logicalcategories, header,sidebar, footer, etc.with good commentingin the code.
  14. 14. If you decide to make changes to a default theme like Twenty Twelve,keep in mind that it will be updated and you don’t want to lose yourchanges. Therefore, you need to rename the theme or create a childtheme.1) WordPress Child Themes are located in/wp-content/themes/ like any other WordPress Theme.2) They’re activated from the WordPress admin like anyother theme.3) They’ll always have a style.css file and may ofteninclude a functions.php file.4) They’re just like any other WordPress theme, exceptthey don’t need any other files.
  15. 15. To create such a theme, you must specify a templateto inherit. We need to make an appropriatelynamed directory in /wp-content/themes/ for our newchild theme. That gives us /wp-content/themes/child-theme-name/.
  16. 16. In that /child-theme-name/ directory create a newfile called style.css. Open style.css up in yourfavorite text editor. Copy the following style sheetheader into style.css and save the file./*Theme Name: ChildThemeDescription: A child theme for 2010 themeTemplate: twentyten (case sensitive)Author: Laura HartwigLicense: GNU General Public License*/@import url("../twentyten/style.css");
  17. 17. <?php// This theme uses wp_nav_menu() in one location.register_nav_menus( array(primary => __( Primary Navigation,twentyten ),) );?>
  18. 18. If in the original style.css you have :#colophon { border-top: 2pt solid #000; }Simply removing the border-top: 2pt solid#000; part will NOT remove the border – youwould need to have the following none value tooverride the original style.css:#colophon { border-top: none; }
  19. 19. Find out more info about Child Themes here:
  20. 20. Many WordPress themesnow allow you to easilychange your• Header• Menu• Background
  21. 21. You’ll notice that the suggested size for the header is 960x250for this theme. I wanted to use only 150px tall. Sometimes youmust change the setting for the header in the style.css file orthe functions.php file, but this theme adjusts automatically.
  22. 22. Of course, you’ll see that it inserted the imagebelow the navigation. We want to move itback on top. Go toAppearance > Editor > Header.php
  23. 23. Does everyone know how to use the custommenus?
  24. 24. You can also change thebackground the same way if thisis an option.
  25. 25. If you are using a theme that doesn’t offer a headerimage customization, you can find the imageinfo in the style.css file. Usually:#header {background: #73a0cfurl(‘images/header.jpg’);}Or, in the 2012 theme:.header-image
  26. 26. For 2012 theme, it is underbody {background-color:(keep in mind there may be more than one “body”)
  27. 27. “Inspect Element” on Google Chrome
  28. 28. Firebug Add-on for Firefox orChrome to help decipher css.
  29. 29. Remember that yellow indicatesmargins and purple indicates padding.Also keep in mind that changing the CSSwill change that item for the entire site.
  30. 30. List of web safe fonts: that just becausethat font on your computerlooks great on your site, thatmay not be what everyoneelse is seeing. If peopledon’t have that font installedon their computer, they won’tsee it. There are a very fewfonts that are on everycomputer.
  31. 31.
  32. 32. 1) Select the font you like and choose “QuickUse”2) Add the @import code to your style sheetnear the top. (make sure it is not in thecommented out section)3) Integrate the font adding the font-family toyour element.4) If there are more than one width you wouldlike to use, be sure to add that.For my example, I put this in my style.csssheet: @importurl(;
  33. 33. This is one of the most under utilized options Isee. Most themes have already stylized yourH Tags for you. Plus, this is good SEOpractice.
  34. 34. But we can do better.First, customize your CSS in your style.css file
  35. 35. Part one- site info:<div class="site-info"><?php do_action( twentytwelve_credits ); ?><a href="<?php echo esc_url( __(, twentytwelve ) ); ?>"title="<?php esc_attr_e( Semantic PersonalPublishing Platform, twentytwelve ); ?>"><?phpprintf( __( Proudly powered by %s, twentytwelve), WordPress ); ?></a></div><!-- .site-info -->
  36. 36. <div class="site-info"><?php do_action( twentytwelve_credits ); ?>Put your custom text here.</div><!-- .site-info -->
  37. 37. a) First you need a faviconfile. Start by creating itwith your photo editingsoftware. To make thingseasier, make a square file( I like to use 48px by 48px).You can save it as any typeof image, jpg, png, gif. , butname the file “favicon”.
  38. 38. b) Then I like to use toactually create the .ico file. Simply upload yourimage, and then download the file it returns.c) upload your favicon.ico file into your rootdirectory or the images file of your root directory.
  39. 39. d) add this to the header.php file if not already there:<link rel="icon"href="" type="image/x-icon" />I like to put it in next to the other link files like<link rel="stylesheet" type="text/css"media="all" href="<?php bloginfo(stylesheet_url ); ?>" />
  40. 40. e) Some themes already have a favicon with them.In that case, you will need to locate the file, usually –wp-content/theme/yourtheme/images andreplace the old file with your own. Sometimesthere is a caching issue and you won’t see yournew favicon right away, but try another browser orcomputer to double check.
  41. 41. Test in different browsers and makesure you are W3C compliant(
  42. 42. Laura@MarkNetGroup.com845-206-9908