child themes and css in wordpress
DESCRIPTION
Getting started with child themes and editing CSS - The ins and outs of modifying your wordpress theme by using child themes to create a new look and layout for your blog or website. Attendees will learn how to create child themes, insert CSS, and edit basic CSS and layout features of their blog or website.TRANSCRIPT
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)