Slide 1
Slide 1 text
WordPress Customisation
for Dummies (Like Me)
@jobtex | jobthomas.com
Slide 2
Slide 2 text
Why customise?
• Chat to your neighbours (3-4 people)
- What is customisation?
- When would you use it?
• Share in group
Slide 3
Slide 3 text
Why customise?
• Design
• Functionality
• Templates & lay-out
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
Is it wise
to customise?
• Theme/plugin updates
- Overrides the customisation
- Breaks the website
• Security
• Bad code
Slide 6
Slide 6 text
Avoid problems
• Plugins
- Open your test site
- Activate Simple Custom CSS
• Child themes
- Activate Child Theme Configurator
- (configuration later)
Slide 7
Slide 7 text
Custom CSS (plugin)
Slide 8
Slide 8 text
CSS
selector: element .class #id
property: color width
value: red #4edf23 400px
.entry-content h1 {
color: red;
}
Slide 9
Slide 9 text
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/
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
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;
}
Slide 12
Slide 12 text
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;
}
Slide 13
Slide 13 text
Custom CSS
Slide 14
Slide 14 text
Task
• Customise:
.entry-content a
• Resources:
- w3schools.com/css/css_intro.asp
- w3schools.com/css/
- cssbasics.com/
Slide 15
Slide 15 text
Child themes
• Activate
- Go to: Tools > Child Themes > Create
- Activate: Appearance > Themes
• Manual process
codex.wordpress.org/Child_Themes
Slide 16
Slide 16 text
Child themes
Slide 17
Slide 17 text
Where to add?
Design > style.css
Functionality > functions.php
Templates & lay-out > e.g. archive.php
Slide 18
Slide 18 text
Custom PHP
• Open functions.php file
• Add code
Slide 19
Slide 19 text
Custom PHP
• Add text to the footer
• Use codex.wordpress.org/Plugin_API/
Action_Reference/
• Try individually or groups of 2
Slide 20
Slide 20 text
Custom PHP
function custom_footer_text() {
echo '
WCCT2016 is pretty kiff
’; } add_action( 'wp_footer', 'custom_footer_text' );Slide 21
Slide 21 text
Custom PHP
function custom_footer_text() {
echo '
WCCT2016 is pretty kiff
'; } add_action( 'wp_footer', 'custom_footer_text' );Slide 22
Slide 22 text
Custom PHP
function hook_alert_popup() {
$output=" alert('Page is loading...'); ";
echo $output;
}
add_action( 'wp_head' , 'hook_alert_popup' );
Slide 23
Slide 23 text
Custom PHP
function custom_credit_text() {
echo '
I'm at WordCamp Cape Town 2016 today!
'; } add_action( 'twentysixteen_credits', 'custom_credit_text' );Slide 24
Slide 24 text
WordPress Customisation
for Dummies (Like Me)
@jobtex | jobthomas.com