Getting Into CSS

WordCamp Talk on starting to modify your WordPress themes with CSS using child themes.

Transcript

1. YOUR WORDPRESS THEME USING CSS TO CUSTOMIZE
2. MODIFYING YOUR THEME COVERING THE BASICS ▸ There are usually 5 technologies involved in a WordPress site: HTML, CSS, JavaScript, PHP and MySQL ▸ We will be looking at 2 of these today: HTML and CSS ▸ HTML is the structure of your webpage, it contains and organizes your content. We won’t be changing this at all today. ▸ CSS is what tells the browser how to display the HTML, for instance which fonts and colors to use.
3. MODIFYING YOUR THEME HOW CSS WORKS ▸ CSS uses selectors and properties to change the style ▸ HTML elements can have ids and classes: <main id="main" class=“site-main"></main> ▸ ids are for one element per page and classes for many elements ▸ Basic CSS applies styles based on tag names, ids, classes
4. MODIFYING YOUR THEME HOW CSS WORKS ▸Tag Name: <main></main>
 CSS selector: main { } ▸id: <main id=“main”></main>
 CSS selector: #main { } ▸class: <main class=“.site-main”></main>
 CSS selector: .site-main { }
5. MODIFYING YOUR THEME HOW CSS WORKS ▸.site-main {
 property-name: value;
 property-name: value;
 }
6. MODIFYING YOUR THEME HOW CSS WORKS ▸.site-main {
 color: #333;
 padding-top: 15px;
 }
7. MODIFYING YOUR THEME USING THE WEB INSPECTOR We can use our browser’s built in tools to understand how the site is currently styled
8. MODIFYING YOUR THEME UNDERSTANDING THE WEB INSPECTOR ▸ CSS has many, many properties and features, all of which we can’t cover in 45 min ▸ Mozilla has a great reference for CSS and many other things at developer.mozilla.org ▸ Instead let’s jump into modifying a WordPress site to see how it works
9. MODIFYING YOUR THEME HOW TO CHANGE YOUR THEME’S CSS ▸ The best practice to modify your theme is to create a child theme ▸ This allows you to update your parent theme without losing your modifications
10. MODIFYING YOUR THEME CREATE YOUR CHILD THEME ▸ In wp-content/themes create a new directory. In my example, I called this child-theme ▸ Then we need two files in that directory: style.css and functions.php ▸ In style.css, we need a theme name and a template (parent theme name)
11. MODIFYING YOUR THEME CREATE YOUR CHILD THEME’S STYLE.CSS FILE /* Theme Name: Twenty Sixteen Child Template: twentysixteen */
12. MODIFYING YOUR THEME CREATE YOUR CHILD THEME’S FUNCTIONS.PHP FILE <?php // Let's add the parent theme's styles so in our style.css file we just add our modifications add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( ‘parent-style', get_template_directory_uri().'/style.css' ); }
13. MODIFYING YOUR THEME ACTIVATE YOUR NEW THEME ▸ Now we go to Appearance->Themes and activate our new theme ▸ It will look exactly the same as before, but now we can make all of our changes in our new style.css file ▸ Now let’s just work through some examples of how to make changes