Intermediate WordPress
Taught by James Steinbach / @jdsteinbach
Installing WordPress on Your Own Server
Download the WordPress Zip
[Local]
Unzip and copy files & folders to root of local hosting directory.
[FTP]
Unzip and upload files & folders to root of live hosting directory.
Create a Database User
PHPMyAdmin
http://yourserver.com/phpmyadmin/
Set Up Your Database
Set Up Your Database
Things to remember:
- user name
- change host to
localhost - db name (= username)
- password
Set Up WordPress
http://yourserver.com/
Set Up WordPress
Set Up WordPress
Set Up WordPress
- Database Name & User Name are the same value – from PHPMyAdmin.
- Password is the password from PHPMyAdmin.
- Database Host should remain
localhost. - Change Table Prefix to any other string that ends with an underscore.
Example:9ns7_
Set Up WordPress
Set Up WordPress
Set Up WordPress
- Site Title: your site title
- Username: literally anything but
admin! - Password: save this
- Your Email: where you want to receive site email notifications
Set Up WordPress
Set Up WordPress
Q/A Break
Installing Custom WP Themes
Installing Themes in Dashboard
Appearance → Themes
Installing Themes from the Repo
Installing Themes from Elsewhere
Where Do You Get “Elsewhere” Themes?
Trusted Sources
Trusted Sources
Professional Developers
Quality Theme Stores
Build Them Yourself!
Untrusted Sources
Base64 Encoding
TimThumb Images
“Premium” Themes
Just themes that cost $$
“Premium” doesn't guarantee quality
Testing Themes for Quality
Speed: Test the demo page
developers.google.com/speed/ pagespeed/insights/
Security: Run Theme Check plugin
wordpress.org/plugins/theme-check/
Search all theme files for:base64 | eval | timthumb
Q/A Break
Building a Child Theme
Why Build a Child Theme?
You've got an existing theme,
that theme gets automatic updates,
but you need to make modifications
What Is a Child Theme?
A small set of custom theme files
that relies on another theme
but adds or overrides templates or styles
How Do I Make a Child Theme?
- Install the parent theme you want to modify
- Create a new theme folder for your child theme
- Add the necessary files
Child Theme Necessary Files
style.css
functions.php
Child Theme: style.css
/*
Theme Name: Twenty Sixteen Child
Theme URI: http://example.com/twenty-sixteen-child/
Description: Twenty Sixteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentysixteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-sixteen-child
*/Child Theme: style.css
Template: twentysixteen
The “Template” is the folder name of the parent theme.
Start writing your CSS overrides below.
What About the Parent's Styles?
Create your child theme's functions.php
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style',
get_template_directory_uri().'/style.css' );
}
?>Don't use CSS @import.
Adding Google Web Fonts to a Child Theme
Adding Google Web Fonts to a Child Them
Added to functions.php
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_google_fonts' );
function enqueue_google_fonts() {
wp_dequeue_style( 'twentyfifteen-fonts-css' );
wp_enqueue_style( 'google-fonts',
'//fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic|Merriweather:400,400italic,700,700italic' );
}
?>Sdding Google Web Fonts to a Child Theme
Add to style.css
body {
font-family: Lato;
}
h1, h2 {
font-family: Merriweather;
}Override Anything You Like
WordPress has a set way of naming template files for any kind of content a theme or plugin can create.
If you use any filenames that match the WP naming convention, you'll override the parent theme's files.
Template File Names
Template File Names
Single Post: “Intermediate WordPress”
single-post.php
single.php
singular.php
index.php
Template File Names
Post Category = /music/
category-music.php
category.php
archive.php
index.php
Template File Names
Single Page: “Contact Me” (id = 38)
page-contact-me.php
page-38.php
page.php
singular.php
index.php
Template File Names
Post Type Archive = /events/
archive-events.php
archive.php
index.php
Template File Names
Post Type Single = /events/
single-events.php
single.php
singular.php
index.php
Template File Names
Q/A Break
Break…
Installing Plugins
Installing from WP
Installing from 3rd Party Developers
Finding Trusted 3rd Party Plugins
Recommendations from experienced developers
Open source code
Other contributions to WP Plugin Repo
Useful WordPress Plugins
- Security
- Speed
- SEO
Security
WordFence Security
WordFence Security
Best security with the least set-up work
Scan site for vulnerabilities / compromises
iThemes Security
iThemes Security
A lot more work up front, but more configurable
Plays nicer with certain other plugins
BackWPUp Free
BackWPUp Free
Schedule backups of your database & files
Store backups on Dropbox, Google Drive, or Amazon S3
Pro Version: $75
WP Remote
WP Remote
Update all your WP sites from 1 dashboard
Speed
W3 Total Cache
W3 Total Cache
Create cached copies of all your site pages
Minify and concatenate your scripts & styles
WP Super Cache
WP Super Cache
Less complex than W3 Total Cache
Just caching, not minifying / concatenating
Maintained by Automattic
EWWW Image Optimizer
EWWW Image Optimizer
Works in the background to compress all images upoaded to the site
Bulk optimizes existing images
SEO
Yoast SEO
Yoast SEO
Customize post / page titles and meta for search engines
Scan content for target search terms
Google Analytics by Yoast
Google Analytics by Yoast
Authenticate through Google, or paste your tracking number
Automatically adds GA code to all posts/pages
Q/A Break
Helpful WordPress Plugins
Forms
Custom Content
Styles
Sales
Forms
Formidable Forms
Formidable Forms
Advanced drag & drop form creator
Customizable email routing for submissions
Bulk export entries
Pro Version: $70
Other Forms
Gravity Forms
Similar features to Formidable Pro, cost $40
Contact Form 7
Super “simple,” but not accessible at all
Custom Content
Types (and Views)
Types
Create custom post types and taxonomies
Create custom fields for post types and taxonomies
Views
Separate, paid upgrade from same developers
Create custom template pages without writing PHP
Part of a $150 plugin package
Advanced Custom Fields
Advanced Custom Fields
Create custom field groups and attach them to any piece of content
Requires PHP knowledge to build custom templates
Pro Version: $25
Styles
Captain Typekit
Captain Typekit
Paste a Typekit kit ID
It automatically adds the Typekit JS to your site
Google Web Font Customizer
Google Web Font Customizer
Don't pick too many fonts!
Sales
WooCommerce
WooCommerce
Custom online store management
Display and sell products (physical or digital)
Basic store functionality is free, but many paid upgrades