Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting Into CSS

Eric Debelak
April 30, 2016

Getting Into CSS

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

Eric Debelak

April 30, 2016
Tweet

More Decks by Eric Debelak

Other Decks in Design

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