Customizing WordPress Themes

  • 1,633 views
Uploaded on

Simple Steps to Modify the Look and Feel of Your Site

Simple Steps to Modify the Look and Feel of Your Site

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,633
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
7
Comments
2
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Twenty Twelve Theme
  • 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. 1) Preparation2) Process1) Using theme tools2) CSS3) Footer & Favicon updates3) Review
  • 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. Use a development sitelike sub-domain orfolder within yoursite, or set up on aserver that is not yetactive.
  • 6. If a customer has a domain name and hosting, but not acurrent site, I recommend the Maintenance Mode Pluginhttp://sw-guide.de/wordpress/plugins/maintenance-mode/, 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. I recommend using ColorPic for Windowshttp://www.iconico.com/colorpic/ to help youchoose colors and find their hex code. This canhelp you match logo colors.Or Color Picker for Mac.
  • 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. http://www.cssbuttongenerator.com/This is an incredible resource for creatingprofessional looking buttons.
  • 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. 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. header.php-includes logo andnavigationindex.php or home.php-home pagepage.php- single pagessidebar.php-can be on either sidefooter.php
  • 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. 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. 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. 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. <?php// This theme uses wp_nav_menu() in one location.register_nav_menus( array(primary => __( Primary Navigation,twentyten ),) );?>
  • 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. Find out more info about Child Themes here:http://codex.wordpress.org/Child_Themes
  • 20. Many WordPress themesnow allow you to easilychange your• Header• Menu• Background
  • 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. 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. Does everyone know how to use the custommenus?
  • 24. You can also change thebackground the same way if thisis an option.
  • 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. For 2012 theme, it is underbody {background-color:(keep in mind there may be more than one “body”)
  • 27. “Inspect Element” on Google Chrome
  • 28. Firebug Add-on for Firefox orChrome to help decipher css.
  • 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. List of web safe fonts:http://www.w3schools.com/cssref/css_websafe_fonts.aspRemember 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. http://www.google.com/fonts/
  • 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(http://fonts.googleapis.com/css?family=Chela+One);
  • 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. But we can do better.First, customize your CSS in your style.css file
  • 35. Part one- site info:<div class="site-info"><?php do_action( twentytwelve_credits ); ?><a href="<?php echo esc_url( __(http://wordpress.org/, twentytwelve ) ); ?>"title="<?php esc_attr_e( Semantic PersonalPublishing Platform, twentytwelve ); ?>"><?phpprintf( __( Proudly powered by %s, twentytwelve), WordPress ); ?></a></div><!-- .site-info -->
  • 36. <div class="site-info"><?php do_action( twentytwelve_credits ); ?>Put your custom text here.</div><!-- .site-info -->
  • 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. b) Then I like to usehttp://tools.dynamicdrive.com/favicon/ 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. d) add this to the header.php file if not already there:<link rel="icon"href="http://www.YourDomainName.com/favicon.ico" 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. 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. Test in different browsers and makesure you are W3C compliant(http://validator.w3.org/).
  • 42. Laura@MarkNetGroup.com845-206-9908https://www.facebook.com/laurahartwigdesignhttp://wpdecoder.com/http://wpdecoder.com/the-basics/customizing-themes/