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

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/
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