WORDPRESS SITE
BUILDING BASICS
Jeff McNear
• https://plasterdog.com
• https://webprosmeetup.org/
• jeff@plasterdog.com
• 847/849-7060
• Focus on building customized
WordPress installations & custom
themes
• Building & repairing WordPress sites
since before WordPress 3.0
• Have significant exposure to Joomla,
Drupal, PHP Fusion, ZenCart … and
some others
It’s best to know how a thing works before
you start to modify it …
OPEN SOURCE CMS
WORDPRESS
WORDPRESS
CORE CODE IS AUGMENTED
VIA MODULE COMPONENTS:
OVERALL FILE STRUCTURE:
NON CORE FILES ARE IN
WP-CONTENT
THEME STRUCTURE
THE THEME DEFINES A
CONSISTENT LAYOUT
WORDPRESS STRUCTURE:
PAGES:
• Stand-alone content
• More likely to have
alternative templates
• Can have parent/child
relationship
• No relevant taxonomies
POSTS:
• Two associated
taxonomies: categories &
tags
• May have alternative
templates as well
• Themes contain template
configurations for
taxonomy archives
• Content can be shown in a
dynamic way
TAXONOMIES:
CATEGORIES
• Can be hierarchical
• Multiple selections allowed
• Unique archive template(s)
TAGS
• No hierarchy
• Multiple selections allowed
• Unique archive template(s)
• Often incorrectly used
MENUS:
=> Appearance
=> Menus
• Can be assigned by region
or via widget
• Any existing content or
archive is selectable
• Theme controls the
behavior and styling
WIDGETS:
=> Appearance
=> Widgets
• Many default options
• Plugins will often add
their own widget
• The Theme defines the
widget regions
MEDIA:
=> Media
• Any uploaded file is
considered media
• Images are rendered into
three sizes upon upload
• Default behavior is to
structure files into folders
defined by month
• A good naming
convention can be crucial
SITE NAME & TAGLINE:
=> Settings
=> General
• Important for SEO even if
the theme doesn’t show
the fields on the “front
end”
READING SETTINGS:
=> Settings
=> Reading
• Determines the landing
page
• Determines whether the
site is exposed to indexing
• Determines the number
of posts shown in an
archive
PERMALINK SETTINGS:
=> Settings
=> Permalinks
• In most cases “post
name” is preferred
• Changing this after site
launch could cause SEO
issues
DISCUSSION SETTINGS:
=> Settings
=> Discussion
• If you aren’t encouraging
comments, shut things
down
• If comments are allowed
moderate them
• Akismet is crucial
MEDIA SETTINGS:
=> Settings
=> Media
• Default sizes usually are
just fine
• If you change them after
the site is launched you
will need the “regenerate
thumbnails” plugin
USER PERMISSIONS:
=> Users
• By default user
permissions define
editorial permissions
• The “subscriber” role
allows validated user to
see “private” content
DEFAULT USER LEVELS:
• Administrator – somebody who has access to all the
administration features within a single site.
• Editor – somebody who can publish and manage posts
including the posts of other users.
• Author – somebody who can publish and manage
their own posts.
• Contributor – somebody who can write and manage
their own posts but cannot publish them.
• Subscriber – somebody who can only manage their
profile.
THE GUTENBERG EDITOR:
COMMON BLOCKS:
• Paragraph
• Image
• Heading
• Gallery
• List
• Quote
• Audio
• Cover
• File
• Video
FORMATTING BLOCKS:
• Code
• Classic
• Custom HTML
• Preformatted
• Pullquote
• Table
• Verse
LAYOUT BLOCKS:
• Button
• Columns
• Group
• Media & Text
• More
• Page Break
• Seperator
• Spacer
WIDGET BLOCKS:
• Shortcode
• Archives
• Calendar
• Categories
• Latest Comments
• Latest Posts
• RSS
• Search
• Tag Cloud
EMBED BLOCKS:
• Embed
• Twitter
• YouTube
• Facebook
• Instagram
• WordPress
• SoundCloud
• Spotify
• Flickr
• Vimeo
• Animoto
• Cloudup
• Crowdsignal
• DailyMotion
• Hulu
• Imgur
• Issuu
• Kickstarter
• Meetup
• Mixcloud
• Reddit
• and on and
on…
BLOCK CONTROLS:
For each block there are controls
found in the right column which
allows further modification of the
contents of that block.
Advanced controls allow for a class to
be attached to the block.
MORE BLOCK CONTROLS
Blocks can be re-
positioned either by
clicking and dragging (via
6 dot icon) or the up and
down arrows.
Some blocks will have
controls in the block
region as well as in the
right column
WORDPRESS DATA STRUCTURE:
DEFAULT FIELDS:
PRIMARY SECONDARY TERTIARY
Title
Content
Excerpt
Author
Post Date
Comments
Publication Status
Featured Image
Post Type
Comment Status
Comment Count
Ping Status
Modified Date
Menu Order
Post Password
COMMON THEME TEMPLATES:
PRIMARY SECONDARY TERTIARY
Index
Page
Post
Header
Footer
Sidebar
Archive
Category
Tag Archive
Featured Image
Alternate Page Templates
Alternate Post Templates
DYNAMIC CONTENT:
Extracting content via queries:
• Home/Landing pages
• Archive Arrays
• Search Results
EXTENDING FUNCTIONALITY:
PLUGIN TYPES:
As of 1/14/2020 there are 55,287 plugins on
wordpress.org
• FORMS
• CALENDARS
• E-COMMERCE
• SEO
• BACKUPS
• SECURITY
• CACHING
• EXTENDING FIELDS
CHOOSING A PLUGIN:
PAY ATTENTION TO:
• How current is the plugin
• Is it in compliance with
WordPress core
• Read both the good and bad
reviews
• How popular is the plugin
HOW IS SUPPORT HANDLED:
RECOMMENDED PLUGINS:
COMMENT FILTERING
Akismet https://wordpress.org/plugins/akismet/
FORMS
Contact Form 7 https://wordpress.org/plugins/contact-form-7/
Ninja Forms https://wordpress.org/plugins/ninja-forms/
EVENTS
Events Calendar https://wordpress.org/plugins/the-events-calendar/
All in One Calendar https://wordpress.org/plugins/all-in-one-event-calendar/
E-COMMERCE
WooCommerce https://wordpress.org/plugins/woocommerce/
EDD https://wordpress.org/plugins/easy-digital-downloads/
SEO
Yoast SEO https://wordpress.org/plugins/wordpress-seo/
All in One SEO https://wordpress.org/plugins/all-in-one-seo-pack/
BACKUPS
Updraft https://wordpress.org/plugins/updraftplus/
Duplicator: https://wordpress.org/plugins/duplicator/
IMAGE CONTROL
Smush https://wordpress.org/plugins/wp-smushit/
EWWW https://wordpress.org/plugins/ewww-image-optimizer/
SECURITY
Wordfence https://wordpress.org/plugins/wordfence/
All in One https://wordpress.org/plugins/all-in-one-wp-security-and-firewall/
CACHING
W3 Total Cache https://wordpress.org/plugins/w3-total-cache/
Lite Speed Cache https://wordpress.org/plugins/litespeed-cache/
EXTENDING FIELDS
ACF https://wordpress.org/plugins/advanced-custom-fields/
PODS https://wordpress.org/plugins/pods/
CHOOSING A THEME:
SHOWCASE THEMES FROM
WORDPRESS.ORG:
Almost every year the
WordPress Project
releases a new core
theme which showcases
the latest developments
in core.
These themes work well
with the child-theming
process
ASSESS THEMES LIKE PLUGINS:
PAY ATTENTION TO:
• How current is the theme
• Is it in compliance with
WordPress core
• Read both the good and bad
reviews
• How popular is the theme
HOW IS SUPPORT HANDLED:
Many of the most popular themes on
the repository will be supported by the
general community … not necessarily
the plugin authors
“PREMIUM THEMES”:
To be accepted into the
Wordpress.org repository a
theme needs to pass
vigorous standards.
Premium Theme sources
Set their own standards
THEME MODIFICATION:
CUSTOMIZER:
 Appearace
 Customizer
Controls will vary based on the theme.
Additional CSS Panel allows for CSS overrides
CHILD THEME:
https://developer.wordpress.org/themes/advanced-topics/child-themes/#how-to-create-a-child-theme
What is a Parent Theme?
A parent theme is a complete theme which includes all of the required WordPress template
files and assets for the theme to work.
What is a Child Theme?
A child theme inherits the look and feel of the parent theme and all of its functions, but can
be used to make modifications to any part of the theme. In this way, customizations are kept
separate from the parent theme’s files. Using a child theme lets you upgrade the parent
theme without affecting the customizations you’ve made to your site.
How to Create a Child Theme
1. Create a child theme folder
2. Create a stylesheet: style.css
3. Enqueue stylesheet
BASELINE THEMES:
A baseline theme has all the elements you need, but will generally be unusable until you
modify them:
https://underscores.me/
“a theme meant for hacking with ultra-minimal CSS - less stuff to get in your way”
https://themble.com/bones/
“built around the latest in Web Standards, Bones is a rock solid foundation to start any
WordPress project”
http://html5blank.com/
“an open source boilerplate theme for WordPress”
TYPICAL ISSUES SEEN:
PLUGIN BLOAT:
• Only one plugin per function
• Plugins with a finite purpose
• Un-Supported Plugins
• Premium Plugins with expired licenses
CONTENT ORGANIZATION:
• Pages should be used sparingly
• Posts should be organized in a logical category
manner
• Many site authors over-use tags
• Orphan drafts and abandoned content should
be deleted
• Media files should have a logical naming
convention
IMAGE FILE SIZE:
While WordPress does resize images into four sizes (thumbnail, medium,
medium large, large) upon upload, optimizing before upload is still crucial:
FREE IMAGE OPTIMIZATION TOOLS:
https://www.gimp.org/
tools needed for high quality image manipulation
https://squoosh.app/
Compress and compare images with different codecs, right in your browser.
https://pixlr.com/editor/
runs on flash
MAINTAINING YOUR SITE
QUESTIONS?
Jeff McNear
• https://plasterdog.com
• https://webprosmeetup.org/
• jeff@plasterdog.com
• 847/849-7060

Wordpress overview

  • 1.
    WORDPRESS SITE BUILDING BASICS JeffMcNear • https://plasterdog.com • https://webprosmeetup.org/ • jeff@plasterdog.com • 847/849-7060 • Focus on building customized WordPress installations & custom themes • Building & repairing WordPress sites since before WordPress 3.0 • Have significant exposure to Joomla, Drupal, PHP Fusion, ZenCart … and some others
  • 2.
    It’s best toknow how a thing works before you start to modify it …
  • 3.
  • 4.
  • 5.
  • 6.
    CORE CODE ISAUGMENTED VIA MODULE COMPONENTS:
  • 7.
  • 8.
    NON CORE FILESARE IN WP-CONTENT
  • 9.
  • 10.
    THE THEME DEFINESA CONSISTENT LAYOUT
  • 11.
  • 12.
    PAGES: • Stand-alone content •More likely to have alternative templates • Can have parent/child relationship • No relevant taxonomies
  • 13.
    POSTS: • Two associated taxonomies:categories & tags • May have alternative templates as well • Themes contain template configurations for taxonomy archives • Content can be shown in a dynamic way
  • 14.
    TAXONOMIES: CATEGORIES • Can behierarchical • Multiple selections allowed • Unique archive template(s) TAGS • No hierarchy • Multiple selections allowed • Unique archive template(s) • Often incorrectly used
  • 15.
    MENUS: => Appearance => Menus •Can be assigned by region or via widget • Any existing content or archive is selectable • Theme controls the behavior and styling
  • 16.
    WIDGETS: => Appearance => Widgets •Many default options • Plugins will often add their own widget • The Theme defines the widget regions
  • 17.
    MEDIA: => Media • Anyuploaded file is considered media • Images are rendered into three sizes upon upload • Default behavior is to structure files into folders defined by month • A good naming convention can be crucial
  • 18.
    SITE NAME &TAGLINE: => Settings => General • Important for SEO even if the theme doesn’t show the fields on the “front end”
  • 19.
    READING SETTINGS: => Settings =>Reading • Determines the landing page • Determines whether the site is exposed to indexing • Determines the number of posts shown in an archive
  • 20.
    PERMALINK SETTINGS: => Settings =>Permalinks • In most cases “post name” is preferred • Changing this after site launch could cause SEO issues
  • 21.
    DISCUSSION SETTINGS: => Settings =>Discussion • If you aren’t encouraging comments, shut things down • If comments are allowed moderate them • Akismet is crucial
  • 22.
    MEDIA SETTINGS: => Settings =>Media • Default sizes usually are just fine • If you change them after the site is launched you will need the “regenerate thumbnails” plugin
  • 23.
    USER PERMISSIONS: => Users •By default user permissions define editorial permissions • The “subscriber” role allows validated user to see “private” content
  • 24.
    DEFAULT USER LEVELS: •Administrator – somebody who has access to all the administration features within a single site. • Editor – somebody who can publish and manage posts including the posts of other users. • Author – somebody who can publish and manage their own posts. • Contributor – somebody who can write and manage their own posts but cannot publish them. • Subscriber – somebody who can only manage their profile.
  • 25.
  • 26.
    COMMON BLOCKS: • Paragraph •Image • Heading • Gallery • List • Quote • Audio • Cover • File • Video
  • 27.
    FORMATTING BLOCKS: • Code •Classic • Custom HTML • Preformatted • Pullquote • Table • Verse
  • 28.
    LAYOUT BLOCKS: • Button •Columns • Group • Media & Text • More • Page Break • Seperator • Spacer
  • 29.
    WIDGET BLOCKS: • Shortcode •Archives • Calendar • Categories • Latest Comments • Latest Posts • RSS • Search • Tag Cloud
  • 30.
    EMBED BLOCKS: • Embed •Twitter • YouTube • Facebook • Instagram • WordPress • SoundCloud • Spotify • Flickr • Vimeo • Animoto • Cloudup • Crowdsignal • DailyMotion • Hulu • Imgur • Issuu • Kickstarter • Meetup • Mixcloud • Reddit • and on and on…
  • 31.
    BLOCK CONTROLS: For eachblock there are controls found in the right column which allows further modification of the contents of that block. Advanced controls allow for a class to be attached to the block.
  • 32.
    MORE BLOCK CONTROLS Blockscan be re- positioned either by clicking and dragging (via 6 dot icon) or the up and down arrows. Some blocks will have controls in the block region as well as in the right column
  • 33.
  • 34.
    DEFAULT FIELDS: PRIMARY SECONDARYTERTIARY Title Content Excerpt Author Post Date Comments Publication Status Featured Image Post Type Comment Status Comment Count Ping Status Modified Date Menu Order Post Password
  • 35.
    COMMON THEME TEMPLATES: PRIMARYSECONDARY TERTIARY Index Page Post Header Footer Sidebar Archive Category Tag Archive Featured Image Alternate Page Templates Alternate Post Templates
  • 36.
    DYNAMIC CONTENT: Extracting contentvia queries: • Home/Landing pages • Archive Arrays • Search Results
  • 37.
  • 38.
    PLUGIN TYPES: As of1/14/2020 there are 55,287 plugins on wordpress.org • FORMS • CALENDARS • E-COMMERCE • SEO • BACKUPS • SECURITY • CACHING • EXTENDING FIELDS
  • 39.
    CHOOSING A PLUGIN: PAYATTENTION TO: • How current is the plugin • Is it in compliance with WordPress core • Read both the good and bad reviews • How popular is the plugin
  • 40.
  • 41.
    RECOMMENDED PLUGINS: COMMENT FILTERING Akismethttps://wordpress.org/plugins/akismet/ FORMS Contact Form 7 https://wordpress.org/plugins/contact-form-7/ Ninja Forms https://wordpress.org/plugins/ninja-forms/ EVENTS Events Calendar https://wordpress.org/plugins/the-events-calendar/ All in One Calendar https://wordpress.org/plugins/all-in-one-event-calendar/ E-COMMERCE WooCommerce https://wordpress.org/plugins/woocommerce/ EDD https://wordpress.org/plugins/easy-digital-downloads/ SEO Yoast SEO https://wordpress.org/plugins/wordpress-seo/ All in One SEO https://wordpress.org/plugins/all-in-one-seo-pack/
  • 42.
    BACKUPS Updraft https://wordpress.org/plugins/updraftplus/ Duplicator: https://wordpress.org/plugins/duplicator/ IMAGECONTROL Smush https://wordpress.org/plugins/wp-smushit/ EWWW https://wordpress.org/plugins/ewww-image-optimizer/ SECURITY Wordfence https://wordpress.org/plugins/wordfence/ All in One https://wordpress.org/plugins/all-in-one-wp-security-and-firewall/ CACHING W3 Total Cache https://wordpress.org/plugins/w3-total-cache/ Lite Speed Cache https://wordpress.org/plugins/litespeed-cache/ EXTENDING FIELDS ACF https://wordpress.org/plugins/advanced-custom-fields/ PODS https://wordpress.org/plugins/pods/
  • 43.
  • 44.
    SHOWCASE THEMES FROM WORDPRESS.ORG: Almostevery year the WordPress Project releases a new core theme which showcases the latest developments in core. These themes work well with the child-theming process
  • 45.
    ASSESS THEMES LIKEPLUGINS: PAY ATTENTION TO: • How current is the theme • Is it in compliance with WordPress core • Read both the good and bad reviews • How popular is the theme
  • 46.
    HOW IS SUPPORTHANDLED: Many of the most popular themes on the repository will be supported by the general community … not necessarily the plugin authors
  • 47.
    “PREMIUM THEMES”: To beaccepted into the Wordpress.org repository a theme needs to pass vigorous standards. Premium Theme sources Set their own standards
  • 48.
  • 49.
    CUSTOMIZER:  Appearace  Customizer Controlswill vary based on the theme. Additional CSS Panel allows for CSS overrides
  • 50.
    CHILD THEME: https://developer.wordpress.org/themes/advanced-topics/child-themes/#how-to-create-a-child-theme What isa Parent Theme? A parent theme is a complete theme which includes all of the required WordPress template files and assets for the theme to work. What is a Child Theme? A child theme inherits the look and feel of the parent theme and all of its functions, but can be used to make modifications to any part of the theme. In this way, customizations are kept separate from the parent theme’s files. Using a child theme lets you upgrade the parent theme without affecting the customizations you’ve made to your site. How to Create a Child Theme 1. Create a child theme folder 2. Create a stylesheet: style.css 3. Enqueue stylesheet
  • 51.
    BASELINE THEMES: A baselinetheme has all the elements you need, but will generally be unusable until you modify them: https://underscores.me/ “a theme meant for hacking with ultra-minimal CSS - less stuff to get in your way” https://themble.com/bones/ “built around the latest in Web Standards, Bones is a rock solid foundation to start any WordPress project” http://html5blank.com/ “an open source boilerplate theme for WordPress”
  • 52.
  • 53.
    PLUGIN BLOAT: • Onlyone plugin per function • Plugins with a finite purpose • Un-Supported Plugins • Premium Plugins with expired licenses
  • 54.
    CONTENT ORGANIZATION: • Pagesshould be used sparingly • Posts should be organized in a logical category manner • Many site authors over-use tags • Orphan drafts and abandoned content should be deleted • Media files should have a logical naming convention
  • 55.
    IMAGE FILE SIZE: WhileWordPress does resize images into four sizes (thumbnail, medium, medium large, large) upon upload, optimizing before upload is still crucial: FREE IMAGE OPTIMIZATION TOOLS: https://www.gimp.org/ tools needed for high quality image manipulation https://squoosh.app/ Compress and compare images with different codecs, right in your browser. https://pixlr.com/editor/ runs on flash
  • 56.
  • 57.
    QUESTIONS? Jeff McNear • https://plasterdog.com •https://webprosmeetup.org/ • jeff@plasterdog.com • 847/849-7060