WordPress

Wordpress Logo

WordPress Review Study Guide

Click here to view and make a copy for reference.

WordPress Overview

  • CMS and WordPress
  • WordPress Dashboard Settings Menu
  • WordPress Dashboard Appearance Menu
  • WordPress Dashboard Pages
  • WordPress Dashboard Menus
  • WordPress Plugins & Shortcodes
  • WordPress Themes & X Theme
  • X Theme's Customizer Options
  • X Theme's Cornerstone Options
  • Cornerstone Content Editing
  • Responsive Design
  • More Cornerstone Editing Options

What is WordPress?

Official description from WordPress.org

WordPress is web software you can use to create a beautiful website or blog. We like to say that WordPress is both free and priceless at the same time.

Why are we learning it?

Popular gif

WordPress is a free, open-source, web-based software.

World Gif

WordPress core software is built by hundreds of community volunteers. People all around the world contribute to WordPress by either submitting bug fixes, testing, designing or writing code for the software.

WordPress is a website building framework

WordPress is a platform for building and designing a website.

Fun Gif
Willis Gif

Wordpress: The Three Components

  1. Server-side code (PHP) and Database (MySQL)
  2. Content Management System and Dashboard
  3. Access to Themes and Plugins

What is a content management system?

A CMS is a program that allows site owners to manage their site content via an easy-to-use admin or dashboard.

Wordpress Dashboard

CMS

CMS outline

CMS

CMS Breakdown

WordPress.org vs. WordPress.com

WordPress.org WordPress.com
Web software used to build a website on a hosting account with a domain name. A free blogging service that allows people to create a blog hosted on WordPress.com's servers.
Sites can be built and modified using themes, plugins or custom code. Hosting is free (although there are some for-pay add-ons), theme choices are limited, plugins can not be installed and code can not be modified.

Security

Being popular means you're a target

It is important to take security seriously when running a site that uses a CMS.

Security Gif

Security

  • Do not use "admin" as a username. "admin" used to be the default WordPress username. Use a unique username and a very strong Password.
  • Save your username and password in a safe place!

V-Pets Exercise

As we go through the slides together, we will slowly build out this sample page using WordPress!

Designs V-Pets Mobile design V-Pets Tablet design V-Pets Desktop design
Download Assets Here
Exercise Gif Trello Logo

A Tour of the Front End

Located at: yourdomain.com/

WordPress comes with starter themes entitled as
[Most Recent Year(s)]

  • A sample post on the home page.
  • A sample page
  • A sample comment
  • A sample tag line "Just another WordPress site"
  • A set of sidebar widgets

WordPress default front end
Bored Gif

A Tour of the Backend Admin

Located at: yourdomain.com/wp-admin/

The WP Admin page first displays login credentials.

Wordpress Admin Login

Once your login credentials are authenticated, you will see the administrative backend (on the next slide).

Try It!

View your WP Front End and Backend!

TLs will send login credentials via Slack or encrypted email.

    After logging in:
  1. Have one window/desktop open to your WP Front End.
  2. Have another window/desktop open to your WP Backend.

WordPress default front end Wordpress Admin Dashboard

A Tour of the Backend Admin

The admin is divided into 3 areas:

  1. The top menu bar
  2. The left-hand menu used to navigate to most admin functionality
  3. The main content window where most admin functionality is performed

A Tour of the Backend Admin

Tip: Use separate windows for the following:

  • The front end of your site
  • The back end of your site

This allows you to easily switch between the 2 as you make changes and preview your site.

Take a moment and try it now!

WordPress Overview

  • CMS and WordPress
  • WordPress Dashboard Settings Menu
  • WordPress Dashboard Appearance Menu
  • WordPress Dashboard Pages
  • WordPress Dashboard Menus
  • WordPress Plugins & Shortcodes
  • WordPress Themes & X Theme
  • X Theme's Customizer Options
  • X Theme's Cornerstone Options
  • Cornerstone Content Editing
  • Responsive Design
  • More Cornerstone Editing Options

Setting Up Your Site

The Settings Menu

  • General: Title, tagline, site address, date format, etc.
  • Writing: Post-related settings
  • Reading: Set site home page, # of posts, rss settings and search engine visibility
  • Discussion: Manage comment settings
  • Media: Make default image sizes and other media settings
  • Permalinks: Define the structure of site URLs
  • Privacy: Creates or changes the Privacy Policy Page
  • SSL: An optional, open-source, add-on plugin that heightens site security

The Settings Menu

General

Wordpress Dashboard general settings page

The Settings Menu

Writing

Wordpress Dashboard Writing settings page

The Settings Menu

Reading

Wordpress Dashboard Reading settings page

The Settings Menu

Media

Wordpress Dashboard Media settings page

The Settings Menu

Permalinks

Wordpress Dashboard Permalinks settings page

Try It!

Some tasks to explore in the Settings menu and dashboard:

  • In General, change the name and tagline of your site.
  • In Reading, make the "Front page" of your site display the Sample Page.
  • Change the Permalinks of your pages to be set by Post name.

WordPress Overview

  • CMS and WordPress
  • WordPress Dashboard Settings Menu
  • WordPress Dashboard Appearance Menu
  • WordPress Dashboard Pages
  • WordPress Dashboard Menus
  • WordPress Plugins & Shortcodes
  • WordPress Themes & X Theme
  • X Theme's Customizer Options
  • X Theme's Cornerstone Options
  • Cornerstone Content Editing
  • Responsive Design
  • More Cornerstone Editing Options

The Appearance Menu

Themes

  • Themes provide templates and layout to build pages for our site.
  • Several starter themes are in our WordPress dashboard.
  • We have added a theme to our WordPress source code files.
  • When using added themes to build a website, always use the child theme.

Activate X - Child Theme

X Theme has already been added to the WordPress project. We want to activate the X - Child Theme.

  • Navigate to your WordPress Dashboard.
  • Click on Appearance.
  • Click on Themes.
  • Hover over X - Child Theme.
  • Click the Activate button.

WordPress Overview

  • CMS and WordPress
  • WordPress Dashboard Settings Menu
  • WordPress Dashboard Appearance Menu
  • WordPress Dashboard Pages
  • WordPress Dashboard Menus
  • WordPress Plugins & Shortcodes
  • WordPress Themes & X Theme
  • X Theme's Customizer Options
  • X Theme's Cornerstone Options
  • Cornerstone Content Editing
  • Responsive Design
  • More Cornerstone Editing Options

Adding Content

Tour of Pages

  • Publish: Change publish status and visibility settings and view revisions
  • Page Attributes: Assign a page "parent", choose template and sort order
  • Featured Image: Assign an image to page (requires theme support)

Adding Content

Add New Pages

  • In left sidebar menu, click on Pages.
  • Then click on Add New.
  • Add a Title (e.g., "Home", "About") to your page.
  • Click the Settings gear icon.
  • Click on Page tab in the right sidebar menu.
  • Change Template from Default to Blank - No Container | Header, Footer.
  • In upper right corner of screen, click Publish.
  • A published page can now be added to a Menu (e.g., Header, Footer).
  • Continue to add more pages as needed for your project.

Adding Content

Adjust Homepage Settings

Homepage Settings in X Theme
  • After creating the "Home" Page, on left sidebar menu click on Settings.
  • Then click on Reading.
  • In "Your Homepage Displays" section, select "A static page."
  • Under static page in the "Homepage" dropdown menu, select Home.
  • Scroll down to click on Save Changes.
  • Now your site will display your "Home" page as the homepage.

WordPress Overview

  • CMS and WordPress
  • WordPress Dashboard Settings Menu
  • WordPress Dashboard Appearance Menu
  • WordPress Dashboard Pages
  • WordPress Dashboard Menus
  • WordPress Plugins & Shortcodes
  • WordPress Themes & X Theme
  • X Theme's Customizer Options
  • X Theme's Cornerstone Options
  • Cornerstone Content Editing
  • Responsive Design
  • More Cornerstone Editing Options

The Appearance Menu

Menus

Menus settings page

(There is a video on the next slide.)

Managing Menus

Appearance > Menus

Easily create and manage navigation menus

  • Create menus: Enter a menu name and click "Create Menu."
  • Order Pages: Drag and drop your pages menu items in the desired order. Indent pages to make them children of other pages.
Watch here!

Moving right along...

Hair Flip

WordPress Overview

  • CMS and WordPress
  • WordPress Dashboard Settings Menu
  • WordPress Dashboard Appearance Menu
  • WordPress Dashboard Pages
  • WordPress Dashboard Menus
  • WordPress Plugins & Shortcodes
  • WordPress Themes & X Theme
  • X Theme's Customizer Options
  • X Theme's Cornerstone Options
  • Cornerstone Content Editing
  • Responsive Design
  • More Cornerstone Editing Options

What are Plugins?

Official description from WordPress.org

Plugins can extend WordPress to do almost anything you can imagine.
Multitasking

Plugins are Powerful

Plugins add functionality to WordPress. Examples include:

  • ecommerce
  • SEO
  • forms
  • photo galleries
  • social media sharing
  • forums
  • and much more!

Plugins are often free

Right now there are over 58,661 free plugins in the official WordPress Plugin Directory.

Plugins

Plugins menu

WordPress comes with 2 plugins:

  • Akismet: Protects your blog from comment and trackback spam. This plugin requires an Akismet key
  • Hello Dolly: Adds a random lyric from "Hello Dolly" to the upper right-hand corner of admin screen.

Plugins

Managing Plugins

  • Activate/Deactivate: Turns plugins "on" and "off"
  • Edit: Ability to edit plugin files NOT RECOMMENDED
  • Delete: Delete deactivated plugins

Add the Cornerstone Plugin!

When first activating the X - Child Theme, the WordPress dashboard often displays a message that the Cornerstone plugin is required.

  • In the WordPress dashboard, click on Plugins.
  • The Cornerstone plugin has already been added, because it comes with X Theme.
  • Click Activate.
  • The WordPress dashboard will display a confirmation message.
  • Congrats! With Cornerstone activated, you can add page content! More on that later...

Plugins

Finding plugins

Plugins

shortcodes

Plugins often use shortcodes to add content to a page or post.

Watch here!

Plugins

Security tip - Vet plugins first

  • Ratings: Read the plugin reviews
  • Maintenance: Check to see it the plugin has regular updates
  • Support: See if the plugin developers regularly answer support questions

AnnieCannons Plugins List

This list is always changing - Feel free to let staff know if you find another great one!

Google Doc Here

Exercise Time!

  • Choose a plugin from the list on the Google Doc
  • Install & activate
  • Create a new element, depending on which plugin you choose
  • Spend no more than 10 minutes playing with your creation
  • Add it to your project using a shortcode

Top Premium Plugins

Favorite For-pay plugins

WordPress Overview

  • CMS and WordPress
  • WordPress Dashboard Settings Menu
  • WordPress Dashboard Appearance Menu
  • WordPress Dashboard Pages
  • WordPress Dashboard Menus
  • WordPress Plugins & Shortcodes
  • WordPress Themes & X Theme
  • X Theme's Customizer Options
  • X Theme's Cornerstone Options
  • Cornerstone Content Editing
  • Responsive Design
  • More Cornerstone Editing Options

What are Themes?

Official description from WordPress.org

Fundamentally, the WordPress Theme system is a way to manage the look of your website. WordPress Themes can provide much more control over the look and presentation of the material on your website.

Themes are Powerful

A theme not only determines how a site looks, it can also add functionality. There are themes that can turn a WordPress site into an online store, an art portfolio and more.

Powerful gif

Themes are often free

Right now there are over 8,622 free themes in the official WordPress Themes Directory.

Managing Themes

Appearance > Themes

WordPress comes with 3 starter themes, titled by most recent years:

  • Twenty Twenty-One
  • Twenty Twenty
  • Twenty Nineteen

Under Appearance > Themes is a list of all installed themes. The theme in use is labeled "Active."

Themes

Finding new themes

Our Theme

X Theme

A look at the:

  • Stacks
  • Extensions (like Custom Plugins)
  • Cornerstone
  • Demos

X Theme Launcher

The X theme launcher allows you to create and edit content, templates, global styles and scripts, and customize options.

Located at: yourdomain.com/x

X Theme Launcher

Changing Site Appearance

The Customizer

Make customizations to your site's appearance and preview them in real time before making them live.

Customizer in X Theme

Cornerstone!

Where you will spend most of your time

Cornerstone Startup Menu for Content Creation and Editing in X Theme

See the Cornerstone Startup Menu above

Let's make a website.

Website Development with WordPress

Website Development with WordPress still involves pre-development, where we inspect designs and confirm assets.

Pre-development includes setting up the development environment (more on that later).

After inspecting designs and assets, website development is best advanced in this order:

  1. WordPress Dashboard for site settings, media, plugins
  2. Customizer for global styling
  3. Cornerstone for content editing

Reference this WordPress Setup Guide

Our Development Environment

Designs Dashboard Customizer Cornerstone DevTools
Froyo Mobile design Froyo Desktop Design tab or window or desktop WordPress dashboard tab or window or desktop X Theme Options or Customizer tab or window or desktop Cornerstone content editor tab or window or desktop Site preview tab or window or desktop for access via Dev Tools

Navigate between different tabs, windows, or desktops. These 5 desktops are helpful:

  • Designs for mobile, tablet, desktop.
  • Dashboard for WordPress
  • Customizer for Theme Options
  • Cornerstone for Content Editing
  • Dev Tools for Site Preview and Selector Style Testing

WordPress Overview

  • CMS and WordPress
  • WordPress Dashboard Settings Menu
  • WordPress Dashboard Appearance Menu
  • WordPress Dashboard Pages
  • WordPress Dashboard Menus
  • WordPress Plugins & Shortcodes
  • WordPress Themes & X Theme
  • X Theme's Customizer Options
  • X Theme's Cornerstone Options
  • Cornerstone Content Editing
  • Responsive Design
  • More Cornerstone Editing Options

Global CSS in Customizer

Sidebar Panel Expanded Example
Global CSS and JS Buttons in Left Sidebar of Customizer Global CSS Sidebar in Customizer Global CSS Expanded Sidebar in Customizer Global CSS Expanded Sidebar in Customizer
  • Sets styling for entire site
  • Can be ridden over by content CSS
  • Only place to use pure element selectors
  • Great for setting typography and colors for the entire site
  • Your CSS may need !important to override default styling built into Cornerstone. More on this later.

Customizer Settings: Advanced Mode

Advanced features enable background images, videos, parallax effects and more. These features can be switched on via the settings menu in Customizer.

Settings icon to click on to activate Advanced Features Click the settings icon in the sidebar.
Modal will appear.
In Preferences tab, switch on Advanced Features In Preferences tab, switch on Advanced Mode.

Customizer Settings: Colors, Fonts

Color Manager in Customizer Settings Font Manager in Customizer Settings

The Color Manager allows us to add brand colors globally.

The Font Manager allows us to set brand fonts for global use.

When settings are set in Customizer, these options are global and will appear for use in Cornerstone Settings.

WordPress Overview

  • CMS and WordPress
  • WordPress Dashboard Settings Menu
  • WordPress Dashboard Appearance Menu
  • WordPress Dashboard Pages
  • WordPress Dashboard Menus
  • WordPress Plugins & Shortcodes
  • WordPress Themes & X Theme
  • X Theme's Customizer Options
  • X Theme's Cornerstone Options
  • Cornerstone Content Editing
  • Responsive Design
  • More Cornerstone Editing Options

Cornerstone Settings: Page Settings

Cornerstone settings are page-specific. So it can access Customizer's global settings as well as its own Page Settings.

Preferences Colors Fonts Page
Preferences in Cornerstone Settings Color Manager in Cornerstone Settings Font Manager in Cornerstone Settings Page Settings in Cornerstone Settings

Content CSS in Cornerstone

Sidebar Panel Expanded
Content CSS and JS Buttons in Left Sidebar of Cornerstone Content CSS and JS Buttons in Left Sidebar of Cornerstone Content CSS and JS Buttons in Left Sidebar of Cornerstone
  • Sets styling for a specific element or part of a page
  • Be sure to add classes to sections & elements.
  • Thus, use custom CSS classes as your selectors.
  • Style rules will only apply to selected content, not to the entire site.
  • Your CSS may need !important to override default styling built into Cornerstone. More on this later.

Cornerstone Sidebar: Part 1

History Dock Bottom Dock Popout Dock Hidden
History in Cornerstone Dock on Bottom in Cornerstone Dock Popout in Cornerstone Dock Hidden or Contracted in Cornerstone

Cornerstone Sidebar: Part 2

Breakpoint Previews

Preview how your site looks for different breakpoints by clicking on the mobile button in the sidebar.

≥1200px 980px-1199px 768px-979px 481px-767px ≤480px
Breakpoint Preview for 1200px and up in Cornerstone Breakpoint Preview for 980px to 1199px in Cornerstone Breakpoint Preview for 768px to 979px in Cornerstone Breakpoint Preview for 481px to 767px in Cornerstone Breakpoint Preview for upto 480px in Cornerstone

WordPress Overview

  • CMS and WordPress
  • WordPress Dashboard Settings Menu
  • WordPress Dashboard Appearance Menu
  • WordPress Dashboard Pages
  • WordPress Dashboard Menus
  • WordPress Plugins & Shortcodes
  • WordPress Themes & X Theme
  • X Theme's Customizer Options
  • X Theme's Cornerstone Options
  • Cornerstone Content Editing
  • Responsive Design
  • More Cornerstone Editing Options

Cornerstone Panel

Building a Page

The left panel in Cornerstone helps us build our pages and has 3 helpful tabs:

Layout Elements Inspector
Layout tab in Cornerstone Element tab in Cornerstone Inspector tab in Cornerstone
  • Layout - to add sections, rows, columns
  • Elements - to add HTML elements
  • Inspector - to customize with classes, hide breakpoints

Cornerstone Panel: Layout

To build a page, we must start with the Layout tab.

    The Layout tab enables us to:
  • add sections
  • save or upload templates
  • view the "skeleton" mode

Layout is the default tab when we first open Cornerstone.

Layout: Sections

All content must be contained in sections.

  • Sections are containers for rows.
  • Rows are containers for columns.
  • Columns are containers for Elements.

Does "container", "row" and "column" ring a bell?
Yes, Cornerstone has a built-in grid system!

Thus, in order to add HTML elements to our page, we must have at least a section, row, and column.

Layout: Add a Section

Add a Section in the Layout tab in Cornerstone Give a name to your section Section inspection panel appears when you click on the inspect icon
  1. Add sections from scratch or from saved templates.
  2. Give your section an appropriate name: "Home Section"
  3. Click the inspect icon to format the section.
  4. You can now add additional rows.
  5. Inspect a row to format its child column(s).
  6. With columns set, Elements can be dragged and dropped into them.
  7. The section's dropdown arrow can now display all its nested children, aka skeleton mode.

Layout: Row, Columns, Breakpoints

Once a row is added, you can designate how skinny or wide its child columns are. You can even give custom widths to the columns.

Rows have built-in breakpoints. Use this feature first!

Only when the built-in styling fails should you next Inspect the item to Customize; if that fails, then add Media Queries. More on this later.

Layout: Skeleton Mode

Skeleton mode is helpful for easily naming/renaming, duplicating, moving and removing sections and any child(ren).

Skeleton mode also allows us to quickly jump to different content on the page.

Skeleton Mode in Cornerstone

Layout: Templates

Cloning Pages

While Skeleton Mode is helpful for duplicating things within a page, if we want to apply the same content and its presentation to other pages we will utilize Templates.

  1. In Layout tab, click Save Template button.
  2. Name the Template to Save.
  3. In Layout in new page, click Load Template.
  4. Select the named template, then click Insert.

Step 1 Step 2 Step 3 Step 4
Save Template button Name the Template to Save the Template Load Template button Insert the Template

Elements

Elements in Cornerstone
  • Super easy way to add sliders, images, text, accordions, and so much more!
  • Simply drag and drop the element you would like to use to the section on your page.
  • You can always add classes and styling with CSS.
  • Rule of thumb: try to find an element that will work for your project, before you resort to building a content area.
Watch here!

Elements: Content Area

The "Content Area" or "Raw Content" element (depends on the version of Cornerstone allows us to:

  • add custom HTML
  • add plugin shortcodes
  • create elements where Cornerstone elements fall short or do not work
  • add great lists and tables

Inspector: Naming Conventions

How to Add a Class in Customizer
  • Always give sections a class, and use the name of the page + the section, e.g. class="about-hero-section"
  • Choose a name that lets developers know what the content is, not the styling.
  • Use classes, not ID's
  • Inspector is incredibly helpful for naming content area elements!

WordPress Overview

  • CMS and WordPress
  • WordPress Dashboard Settings Menu
  • WordPress Dashboard Appearance Menu
  • WordPress Dashboard Pages
  • WordPress Dashboard Menus
  • WordPress Plugins & Shortcodes
  • WordPress Themes & X Theme
  • X Theme's Customizer Options
  • X Theme's Cornerstone Options
  • Cornerstone Content Editing
  • Responsive Design
  • More Cornerstone Editing Options

Responsive Design

  • Figuring out the size of the design is important!
  • Build scaffolding first
  • How many columns will each device use?

Watch here!

Figuring Out the Size of the Design

  • Always check to see what size your designs are!
  • From there, you can use proportions to figure out what size everything should be.

Click here to see a sample design!

Build Mobile First

    Design assets often include a mobile design.
  1. Have the designs open for comparison and contrast.
  2. Build one section at a time.
  3. See how the section changes across screen sizes.
  4. Use the Layout tab to designate breakpoints for the row.
  5. Only when the row's built-in breakpoints fail should you next Inspect the item to Customize; if that fails, then add Media Queries.

Media Queries

Breakpoints are built into Cornerstone's sections, rows, columns, elements.

  1. Use the built-in defaults in Layout first.
  2. If Layout fails, then Inspect to Customize the breakpoint visibility.
  3. If that fails, give the item a class.
  4. If the item is global, enter its Media Queries in Global CSS.
  5. If the item is specific to a page, enter its Media Queries in Content CSS.

Using your dev tools to find selectors

  • Adding your own class names to Cornerstone won't always allow you to select the elements you need to style.
  • WordPress adds classes to divs and other elements automatically.
  • Luckily, you can use your dev tools to figure out the class names that are added by Cornerstone!

Watch here!

Dev Tools vs. Cornerstone Styling

Sometimes no matter how you test the styling of a selector in Dev Tools and apply it in the Global CSS or Content CSS for that selector, NOTHING changes!

If you have the correct selector and its style DOES change in the Dev Tools site preview and DOES NOT change in Cornerstone, then it is time to use !important to override default styling built into Cornerstone.


selector {
  property: value !important;
}

Where to go from here?

Web programmers

Folks with PHP/MySQL/JavaScript skill set can build WordPress plugins.

Let's Build V-Pets!

You've gained some foundational knowledge of WordPress, X Theme and Cornerstone.

Let's pause on the lectures for now, and take time to build out our Sample Page!

Exercise Gif Trello Logo

WordPress Overview

  • CMS and WordPress
  • WordPress Dashboard Settings Menu
  • WordPress Dashboard Appearance Menu
  • WordPress Dashboard Pages
  • WordPress Dashboard Menus
  • WordPress Plugins & Shortcodes
  • WordPress Themes & X Theme
  • X Theme's Customizer Options
  • X Theme's Cornerstone Options
  • Cornerstone Content Editing
  • Responsive Design
  • More Cornerstone Editing Options

Parallax Effects

  • What is a parallax effect? Check this out!
  • Cornerstone has a way to add the parallax effect to your background images already built in!
  • Your challenge is to read through the theme's documentation, and teach yourself how add it to your project!
  • Here you will find the docs. Hint: use the search bar.

Tags & Categories

Check out this video

Then, check out this video

Widgets Review

  • Why widgets? Read through this
  • Review this slide

Widgets Practice

Create a footer widget area with 4 social icons and a navigation menu.

Grab any icons you wish to use here.

More Plugins!

  • Plugins are a powerful way to add functionality to our WordPress project.
  • It is extremely important to know how to independently learn about plugins. They are always changing, as are client needs!
  • It is invaluable that you teach yourself how to use a new plugin; then can even teach your colleagues!

Plugins Review

Let's first review these slides

Plugins - Learning how to learn

  • Being a solid WordPress developer means knowing how to learn new plugins - often and always.
  • A few plugins often show up in client projects. However, there are always new ones, and the trends are always changing.

Plugins

Knowing how to teach yourself is important

  • Take some time in the beginning to better understand your plugin.
  • Notice the different things your plugin can do.
  • Look through the screenshots & descriptions.
  • Watch any videos.
  • Let's read through this together.

Plugins - Documentation

  • Documentation is your new best friend.
  • Good documentation offers a step-by-step guide for anything you are trying to build using the given software.
  • Familiarize yourself with the documentation before you begin your project!
  • Read through this documentation together.

Plugins - Resources

  • Videos - how to search a proper tutorial
  • Documentation
  • Phone a friend
  • AnnieCannons internal video doc

Plugins Exercise

  • Now it's your turn to learn, and teach!
  • Each of you will learn a new plugin.
  • Add it to your project.
  • Teach your colleagues!
  • See the instructions here.
Exercise Gif Trello Logo

WordPress Overview

  • CMS and WordPress
  • WordPress Dashboard Settings Menu
  • WordPress Dashboard Appearance Menu
  • WordPress Dashboard Pages
  • WordPress Dashboard Menus
  • WordPress Plugins & Shortcodes
  • WordPress Themes & X Theme
  • X Theme's Customizer Options
  • X Theme's Cornerstone Options
  • Cornerstone Content Editing
  • Responsive Design
  • More Cornerstone Editing Options

WordPress Roundup

Click here to review.

Practicum Orientation

Congratulations, Developer!

Your journey as a WordPress website developer has begun!

    In Practicum, you will:
  • complete 2 templates
  • deliver daily standups
  • turn in the completed project
  • receive feedback in a code review

More information on the next slide.

Time for Template 1!

You will build a WordPress site from scratch in Practicum!

Check your inbox for a Kickoff Email from your TLs.

  • Review the kickoff email.
  • If you have questions, ASK!
  • Reply to your TL, confirming your acceptance of the terms.
  • Congrats! Your Practicum has begun!
Exercise Gif Trello Logo

THE END

Thank you for your attention!