WordPress Customisation for Dummies (Like Me)

999ec503c62c8972cbbc00f0aa932f4f?s=47 Job
September 08, 2016

WordPress Customisation for Dummies (Like Me)

A lot of beginners encounter all sort of tutorials on how to add some custom code to the functions.php file or even more basic: change the layout beyond what the customizer allows.

In this workshop, I introduce WordPress beginners to some good standards in terms of customisation.

Choosing a plugin that allows custom CSS (like Jetpack and Simple Custom CSS) // Setting up a child theme // Adding custom CSS to that child theme or through the plugin // Adding custom PHP to the child theme

999ec503c62c8972cbbc00f0aa932f4f?s=128

Job

September 08, 2016
Tweet

Transcript

  1. WordPress Customisation for Dummies (Like Me) @jobtex | jobthomas.com

  2. Why customise? • Chat to your neighbours (3-4 people) -

    What is customisation? - When would you use it? • Share in group
  3. Why customise? • Design • Functionality • Templates & lay-out

  4. Is it wise
 to customise? • In groups of 3-4

    - What are the dangers of customisation? - What can you do to prevent it? • Share in group
  5. Is it wise
 to customise? • Theme/plugin updates - Overrides

    the customisation - Breaks the website • Security • Bad code
  6. Avoid problems • Plugins - Open your test site -

    Activate Simple Custom CSS • Child themes - Activate Child Theme Configurator - (configuration later)
  7. Custom CSS (plugin)

  8. CSS selector: element .class #id property: color width value: red

    #4edf23 400px .entry-content h1 { color: red; }
  9. Custom CSS (plugin) • In groups of 3-4, - Customise

    the blockquote element - Different colour - Different background colour - Add as much customisation as you want • Use w3schools.com/css/
  10. None
  11. Custom CSS .entry-content blockquote { padding: 2em; margin: 0; border-left:

    5px solid #e26a1a; background: #f6893b; font-family: Montserrat, "Helvetica Neue", sans-serif; font-weight: normal; font-size: 1em; font-style: normal; color: white; }
  12. Custom CSS .entry-content blockquote { padding: 2em; margin: 0; border-left:

    5px solid #e26a1a; background: #f6893b; font-family: Montserrat, "Helvetica Neue", sans-serif; font-weight: normal; font-size: 1em; font-style: normal; color: white; } .entry-content blockquote:not(.alignleft):not(.alignright) { margin: 0; }
  13. Custom CSS

  14. Task • Customise:
 .entry-content a • Resources: - w3schools.com/css/css_intro.asp -

    w3schools.com/css/ - cssbasics.com/
  15. Child themes • Activate - Go to: Tools > Child

    Themes > Create - Activate: Appearance > Themes • Manual process
 codex.wordpress.org/Child_Themes
  16. Child themes

  17. Where to add? Design > style.css Functionality > functions.php Templates

    & lay-out > e.g. archive.php
  18. Custom PHP • Open functions.php file • Add code

  19. Custom PHP • Add text to the footer • Use

    codex.wordpress.org/Plugin_API/ Action_Reference/ • Try individually or groups of 2
  20. Custom PHP function custom_footer_text() { echo '<p>WCCT2016 is pretty kiff</p>’;

    } add_action( 'wp_footer', 'custom_footer_text' );
  21. Custom PHP function custom_footer_text() { echo '<p style="color: white; text-align:

    center;">WCCT2016 is pretty kiff</p>'; } add_action( 'wp_footer', 'custom_footer_text' );
  22. Custom PHP function hook_alert_popup() { $output="<script> alert('Page is loading...'); </script>";

    echo $output; } add_action( 'wp_head' , 'hook_alert_popup' );
  23. Custom PHP function custom_credit_text() { echo '<p>I'm at WordCamp Cape

    Town 2016 today!</p>'; } add_action( 'twentysixteen_credits', 'custom_credit_text' );
  24. WordPress Customisation for Dummies (Like Me) @jobtex | jobthomas.com