Child Themes and CSS in WordPress

Child Themes and CSS in WordPress

• 1.
   
• 2.
  Matthew Vaccaro matthewvaccaro.com This presentationwill be on slideShare* slideshare.net/mattyvac *soon-ish Me My website I sometimes update. Credentials: Once held a microphone.
• 3.
  Where I
• 4.
  Basic Stuff we allknow about WordPress •  Was a blog •  Still a blog platform, but now also a CMS! •  CMS = authoring, collaboration, administration without extensive programming knowledge Past Presentation Plug: “WordPress as a CMS” on slideShare.net
• 5.
  WordPress Part of aCMS is the ability to theme or ‘skin’ the system. What is a child theme? •  A theme is a collection of files and template that changes the look, feel, and interaction of a website •  In WP: wp-content/themes •  Child themes are an extension of a theme •  Child themes were introduced officially in WP 3.0 (technically available before that in previous versions) •  Child themes allow you to extend or make changes to a theme without modifying the core code and functions
• 6.
  Child Why use childthemes? •  No direct edits to core code of parent theme •  Ease of replication •  No extensive knowledge of code necessary
• 7.
  Working With Themes Creating • Cheat with plugin (h#p://wordpress.org/extend/plugins/one-­‐click-­‐child-­‐theme/  ) OOORRRRR… •  Make your new theme folder in wp-content/themes –  *-Child-Theme –  My-Parent-Theme gets My-Parent-Theme-Child-Theme •  Add style.css file inside of new folder and link it to your main theme •  Add new files if necessary /*   Theme  Name:  College  of  Medicine  Main  Theme  Child  -­‐  Mini  Sites   Theme  URI:     DescripFon:  A  child  theme  for  the  UCF  College  of  Medicine  Mini   Sites.   Author:  JusFn  Sisley  &  Ma#hew  Vaccaro   Author  URL:  h#p://www.med.ucf.edu   Template:  UCF-­‐College-­‐of-­‐Medicine   Version:  0.0.1   */  
• 8.
  Switch to quickCT example…
• 9.
  Editing •  Use theadvanced editor in the WordPress control panel or use your own desktop program (SublimeText, DreamWeaver, Aptana Studio, Eclipse…or Notepad) –  When using the WP CP editor, make sure permissions are correct –  Local development is best! GitHub! MAMP/WAMP! Yay! –  FTP into your server to make edits in real-time (Not recommended) L •  Edit your CSS file to make overriding changes to the main CSS file •  Edit your functions.php file which is loaded in addition to the main functions.php file. Does not override. •  Add additional files or make edits to previously added files to increase functionality Working With Themes
• 10.
  Working With Themes 99Problems, but…just kidding. Only one issue to look out for: •  ”I want to pull information from other blogs in my network!” –  To do this, you would use switch_to_blog(); –  Watch performance. Look at the information you are pulling and decide if your server can handle it. •  Switch_to_blog(); switches to another specified blog for the duration of the function call until restore_current_blog(); is called •  More Info: http://codex.wordpress.org/WPMU_Functions/switch_to_blog
• 11.
  Basic CSS is… A cascadingstyle sheet. A sheet of styles, of you will. •  Allows design elements to be changed •  Styles within CSS areas define how to display HTML elements •  Images, fonts, structural elements •  Colors, font faces, spacing, heights, floats •  Added to spec with HTML 4.0 long ago Types of CSS External – Internal – Inline External: File called something.css on the server linked to the theme Internal: <style> tag places somewhere in the code Inline: style=“” code placed somewhere inside other code
• 12.
  Switch to CSSexample… (Just kidding though, we’re only going to do a little CSS)
• 13.
  Basic Be nice toyour CSS. •  Follow WP styles –  Makes it easier for future edits or others who may see the code later –  Review the main WP stylesheet to see common conventions and style groupings if you don’t already have set standards for your site Example: .element-­‐class  {    margin:  20px  0px  10px  0px;   }   .element-­‐class  {    margin:  20px  0  10px  0;   }   NO!   YES!   In  the  correct  example,  the  ‘0’  values  aren’t  followed  by   ‘px’.  This  follows  the  same  convenFons  as  the  master   file.  
• 14.
    (The End)