WordPress Day 2

Objectives

General Objectives

  • Students will learn how to create menus
  • Students will learn additional customization skills through CSS, plugins, and widgets

Specific Learning Outcomes

  • Students will learn how to find CSS code snippets for their website
  • Students will learn how to add widgets to their website
  • Students will learn how to add plugins to their website and use a plugin with shortcode

Sample Lesson Plan

Hook

Intro

Customizing Appearance

  • WordPress themes are built around CSS
    • Customizations can be made using CSS
      • Ex. Changing a default font or color in the original theme
  • Code snippets
    • Google whatever you are looking for
      • Ex. “WordPress italicize font code snippet”
    • Add to website: Appearance > Customize > Additional CSS

Widgets

  • Appearance > Widgets
    • Click and drag available widgets to desired location

Plugins

  • Plugins > Add New
  • Add functionality to your website
    • Can track analytics, help you create a contact page, block spam from your website, and much more!

Shortcode

  • Shortcode helps integrate plugins into your website
    • After activating a plugin a new tab for it will show up in the left menu of the dashboard
    • Click on that tab and navigate to the details for that plugin
    • If shortcode is applicable to the plugin you should see text similar to the following accompanied by a code snippet:
      • “Copy this shortcode and paste it into your post, page, or text widget content”
  • In Gutenburg Block Editor on desired page
    • Add a “Shortcode” block
    • Copy and paste the shortcode into it

Installing Contact Form 7

  • Plugins > Add New
  • Search for Contact Form 7
    • Install
    • Activate on “Installed plugins” screen
  • Create a “Contact” page under Pages > Add New
    • Copy and paste shortcode from “Contact” tab into a Shortcode block on this page

Elementor

  • Plugin that allows you to edit your website from the front end (similar to Squarespace or Wix)
  • Plugins > Add New
    • Elementor
  • Pages > Add New > Edit with Elementor
    • Build pages by adding widgets

Conclusion