Download - Child Themes and CSS in WordPress
Matthew Vaccaro matthewvaccaro.com This presentation will be on slideShare* slideshare.net/mattyvac *soon-ish
Me
My website I sometimes update.
Credentials: Once held a microphone.
Where I
Basic Stuff we all know 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
WordPress Part of a CMS 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
Child Why use child themes? • No direct edits to core code of parent theme • Ease of replication • No extensive knowledge of code necessary
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 */
Switch to quick CT example…
Editing
• Use the advanced 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
Working With Themes
99 Problems, 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
Basic CSS is…
A cascading style 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
Switch to CSS example…
(Just kidding though, we’re only going to do a little CSS)
Basic Be nice to your 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.
(The End)
