Download - Child Themes and CSS in WordPress
![Page 1: Child Themes and CSS in WordPress](https://reader034.vdocuments.site/reader034/viewer/2022042700/55946e3c1a28abfa718b465a/html5/thumbnails/1.jpg)
![Page 2: Child Themes and CSS in WordPress](https://reader034.vdocuments.site/reader034/viewer/2022042700/55946e3c1a28abfa718b465a/html5/thumbnails/2.jpg)
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.
![Page 3: Child Themes and CSS in WordPress](https://reader034.vdocuments.site/reader034/viewer/2022042700/55946e3c1a28abfa718b465a/html5/thumbnails/3.jpg)
Where I
![Page 4: Child Themes and CSS in WordPress](https://reader034.vdocuments.site/reader034/viewer/2022042700/55946e3c1a28abfa718b465a/html5/thumbnails/4.jpg)
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
![Page 5: Child Themes and CSS in WordPress](https://reader034.vdocuments.site/reader034/viewer/2022042700/55946e3c1a28abfa718b465a/html5/thumbnails/5.jpg)
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
![Page 6: Child Themes and CSS in WordPress](https://reader034.vdocuments.site/reader034/viewer/2022042700/55946e3c1a28abfa718b465a/html5/thumbnails/6.jpg)
Child Why use child themes? • No direct edits to core code of parent theme • Ease of replication • No extensive knowledge of code necessary
![Page 7: Child Themes and CSS in WordPress](https://reader034.vdocuments.site/reader034/viewer/2022042700/55946e3c1a28abfa718b465a/html5/thumbnails/7.jpg)
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 */
![Page 8: Child Themes and CSS in WordPress](https://reader034.vdocuments.site/reader034/viewer/2022042700/55946e3c1a28abfa718b465a/html5/thumbnails/8.jpg)
Switch to quick CT example…
![Page 9: Child Themes and CSS in WordPress](https://reader034.vdocuments.site/reader034/viewer/2022042700/55946e3c1a28abfa718b465a/html5/thumbnails/9.jpg)
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
![Page 10: Child Themes and CSS in WordPress](https://reader034.vdocuments.site/reader034/viewer/2022042700/55946e3c1a28abfa718b465a/html5/thumbnails/10.jpg)
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
![Page 11: Child Themes and CSS in WordPress](https://reader034.vdocuments.site/reader034/viewer/2022042700/55946e3c1a28abfa718b465a/html5/thumbnails/11.jpg)
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
![Page 12: Child Themes and CSS in WordPress](https://reader034.vdocuments.site/reader034/viewer/2022042700/55946e3c1a28abfa718b465a/html5/thumbnails/12.jpg)
Switch to CSS example…
(Just kidding though, we’re only going to do a little CSS)
![Page 13: Child Themes and CSS in WordPress](https://reader034.vdocuments.site/reader034/viewer/2022042700/55946e3c1a28abfa718b465a/html5/thumbnails/13.jpg)
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.
![Page 14: Child Themes and CSS in WordPress](https://reader034.vdocuments.site/reader034/viewer/2022042700/55946e3c1a28abfa718b465a/html5/thumbnails/14.jpg)
(The End)