Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Customizing WordPress Themes


Consultez-les par la suite

1 sur 55 Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)


Similaire à Customizing WordPress Themes (20)


Plus récents (20)

Customizing WordPress Themes

  1. 1. Twenty Twelve Theme
  2. 2. This is one example of a basic theme that has been changed. As you can see, you can change a theme into almost anything you want.
  3. 3. 1) Preparation 2) Process 1) Using theme tools 2) CSS 3) Footer & Favicon updates 3) Review
  4. 4. -Site with WordPress installed and theme close 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 site like sub-domain or folder within your site, or set up on a server that is not yet active.
  6. 6. If a customer has a domain name and hosting, but not a current site, I recommend the Maintenance Mode Plugin http://sw-guide.de/wordpress/plugins/maintenance- mode/, so that you can Build the site and Experiment before the site goes live. This plugin puts up a “Coming Soon” notice for all visitors who are not logged in. Tip:
  7. 7. I recommend using ColorPic for Windows http://www.iconico.com/colorpic/ to help you choose colors and find their hex code. This can help you match logo colors. Or Color Picker for Mac.
  8. 8. There are a couple good add-ons/extensions for Chrome & FF including MeasureIt! and Page Ruler. They can be a big help in determining sizes.
  9. 9. http://www.cssbuttongenerator.com/ This is an incredible resource for creating professional looking buttons.
  10. 10. Not only before you begin, but as you make changes. You can use a text editor like notepad to copy & paste the file you’re working on, but you can also use ftp to copy all the files over.
  11. 11. The theme tells WordPress how to display data. The actual data (posts & pages) are stored in the MySqL database. Within the theme, there are CSS files and PHP files. The CSS files tell the theme how to look. The PHP files tell the theme what to do (ie where to put what content from the database.) Theme Database CSS PHP
  12. 12. header.php -includes logo and navigation index.php or home.php -home page page.php - single pages sidebar.php -can be on either side footer.php
  13. 13. This section requires knowledge of CSS. If you have a good theme, it will be broken into logical categories, header, sidebar, footer, etc. with good commenting in 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 your changes. Therefore, you need to rename the theme or create a child theme. 1) WordPress Child Themes are located in /wp-content/themes/ like any other WordPress Theme. 2) They’re activated from the WordPress admin like any other theme. 3) They’ll always have a style.css file and may often include a functions.php file. 4) They’re just like any other WordPress theme, except they don’t need any other files.
  15. 15. To create such a theme, you must specify a template to inherit. We need to make an appropriately named directory in /wp-content/themes/ for our new child theme. That gives us /wp-content/themes/child- theme-name/.
  16. 16. In that /child-theme-name/ directory create a new file called style.css. Open style.css up in your favorite text editor. Copy the following style sheet header into style.css and save the file. /* Theme Name: ChildTheme Description: A child theme for 2010 theme Template: twentyten (case sensitive) Author: Laura Hartwig License: 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 – you would need to have the following none value to override the original style.css: #colophon { border-top: none; }
  19. 19. Find out more info about Child Themes here: http://codex.wordpress.org/Child_Themes
  20. 20. Many WordPress themes now allow you to easily change your • Header • Menu • Background
  21. 21. You’ll notice that the suggested size for the header is 960x250 for this theme. I wanted to use only 150px tall. Sometimes you must change the setting for the header in the style.css file or the functions.php file, but this theme adjusts automatically.
  22. 22. Of course, you’ll see that it inserted the image below the navigation. We want to move it back on top. Go to Appearance > Editor > Header.php
  23. 23. Does everyone know how to use the custom menus?
  24. 24. You can also change the background the same way if this is an option.
  25. 25. If you are using a theme that doesn’t offer a header image customization, you can find the image info in the style.css file. Usually: #header { background: #73a0cf url(‘images/header.jpg’); } Or, in the 2012 theme: .header-image
  26. 26. For 2012 theme, it is under body {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 or Chrome to help decipher css.
  29. 29. Remember that yellow indicates margins and purple indicates padding. Also keep in mind that changing the CSS will change that item for the entire site.
  30. 30. List of web safe fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp Remember that just because that font on your computer looks great on your site, that may not be what everyone else is seeing. If people don’t have that font installed on their computer, they won’t see it. There are a very few fonts that are on every computer.
  31. 31. http://www.google.com/fonts/
  32. 32. 1) Select the font you like and choose “Quick Use” 2) Add the @import code to your style sheet near the top. (make sure it is not in the commented out section) 3) Integrate the font adding the font-family to your element. 4) If there are more than one width you would like to use, be sure to add that. For my example, I put this in my style.css sheet: @import url(http://fonts.googleapis.com/css?family=Chela+One);
  33. 33. This is one of the most under utilized options I see. Most themes have already stylized your H Tags for you. Plus, this is good SEO practice.
  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( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>"><?php printf( __( '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 favicon file. Start by creating it with your photo editing software. To make things easier, make a square file ( I like to use 48px by 48px). You can save it as any type of image, jpg, png, gif. , but name the file “favicon”.
  38. 38. b) Then I like to use http://tools.dynamicdrive.com/favicon/ to actually create the .ico file. Simply upload your image, and then download the file it returns. c) upload your favicon.ico file into your root directory 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="http://www.YourDomainName.com/favico n.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. 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 and replace the old file with your own. Sometimes there is a caching issue and you won’t see your new favicon right away, but try another browser or computer to double check.
  41. 41. Test in different browsers and make sure you are W3C compliant (http://validator.w3.org/).
  42. 42. Laura@MarkNetGroup.com 845-206-9908 https://www.facebook.com/laurahartwigdesign http://wpdecoder.com/ http://wpdecoder.com/the-basics/customizing-themes/