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
   

   View Slide

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.
   

   View Slide

3. MODIFYING YOUR THEME
   HOW CSS WORKS
   ▸ CSS uses selectors and properties to change the style
   ▸ HTML elements can have ids and classes: class=“site-main">
   ▸ ids are for one element per page and classes for many
   elements
   ▸ Basic CSS applies styles based on tag names, ids, classes
   

   View Slide

4. MODIFYING YOUR THEME
   HOW CSS WORKS
   ▸Tag Name: 

   CSS selector: main { }
   ▸id: 

   CSS selector: #main { }
   ▸class: 

   CSS selector: .site-main { }
   

   View Slide

5. MODIFYING YOUR THEME
   HOW CSS WORKS
   ▸.site-main {

   property-name: value;

   property-name: value;

   }
   

   View Slide

6. MODIFYING YOUR THEME
   HOW CSS WORKS
   ▸.site-main {

   color: #333;

   padding-top: 15px;

   }
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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)
    

    View Slide

11. MODIFYING YOUR THEME
    CREATE YOUR CHILD THEME’S STYLE.CSS FILE
    /*
    Theme Name: Twenty Sixteen Child
    Template: twentysixteen
    */
    

    View Slide

12. MODIFYING YOUR THEME
    CREATE YOUR CHILD THEME’S FUNCTIONS.PHP FILE
    // 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' );
    }
    

    View Slide

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
    

    View Slide