Ex: WordPress CMS

Expectations

Learning Targets

• I can explain why I can't directly edit the HTML of my WordPress website.

• I can learn-by-doing WordPress.

Assessments

You will be evaluated using a Trello rubric as explained in the video below.

What is a Framework?

We expect a lot from websites. We should be able to login, reset passwords, easily manage colors, change themes and a lot more. Until now, we've just built a static HTML page. It's fun to build but most of our clients will need more from their company's site. So we'll turn to the most popular framework.

Rendering is how references to data like usernames and profile images get loaded in and all the code turns into something cool

WordPress is extensible. That's good. It means you can add your own upgrades to it called plugins. These expansion packs can add all sorts of features. But they can also add bugs and holes in your security. So shop wisely. Check that the plugin is upgraded often and be sure to run your website's upgrades.

WordPress has gone through many phases where new features were a strong focus. Stuff like Twitter feeds, small login windows, and other utilities are often called widgets. I remember when new plugins were blowing up because they let people add widgets easily on regular pages, not just the Sidebar where you might expect a Twitter feed to be found. Don't stress about it. Find some YouTube tutorials. Google it and read around. Ask questions. We'll figure this out.

Avoid Fighting the Framework

Students sometimes struggle making the transition from static HTML pages to WordPress. You want to just pull up the HTML code and make the changes you want to make. It's not so simple with WordPress. Give it time and study how WordPress works.

Component Vocabulary

Use Theme Assets

Every theme uses its own set of plugins and settings. They'll vary a lot. Themes also come with demo content. These example pages can be really handy. Instead of starting a page from scratch, edit and rearrange the example pages instead.

Selecting Theme

Buying a premium theme is worth it. You give your client a license for the layout being used, you get (very basic) technical support, and the plugins, options and tools that come with the theme are typically of better quality. But as we browse for themes on themeforest.net, we'll have to be looking not just for a visual elements that will be helpful for our client but also for features we'll need.

Must-Have Features

Bootstrap is optional but preferred. Visual Composer or another design framework has always been a must. By the time you're reading this, the new WordPress editors may have developed enough that there are more reusable elements to use with these editors. For now, I'd only buy a theme with Visual Composer/WPBakery (or something very similar and well-reviewed).

Make sure your theme is also receiving regular updates. The WordPress framework is growing. If your theme isn't growing with it, you'll be doing a full redesign sooner than you may like.

Installing

Install Plugins

Your theme will likely require some plugins to be installed. As soon as you activate the plugin, you'll be given instructions to follow. Before you do these steps, you should check the recommended instructions from the theme's documentation.

Install Child Theme

Theme Setup

Load Documentation

Inside the .zip file downloaded from ThemeForest.net will be an HTML file explaining how your theme works. Make sure you can access this. It'll be something you need to check back on frequently.

Install Demo Content

Every premium theme I've ever used comes with demo content, though the process to load such varies often. Your theme's documentation will explain the steps required to load your theme's example pages. It's much easier to edit existing pages than starting from scratch.

Setup Your Pages

Talk with your team. How many pages does your site need? Some sites we've seen are all on one page. Do you want to build a one-pager? If not, what pages will you have and how will they be labeled?

Look at your pages on the backend of WordPress. Your demo content should have created example pages for you to use. Duplicate some of those if you need. Rename the title and the slug to fit your purposes.

Designate Your Homepage

Organizing Media

Images

We'll use allthefreestock.com to build some initial free images. First save these to your team's Google Drive folder. Then check all the images' filesizes. You want to make sure each image is under 2 MB. Once they're resized, upload them to your WordPress's media.

Branding Page

Create a page called Branding. This is a guide for your client. It'll show your client's color palette, font selections, logos, and other design elements that you plan to reuse and would like to have easy access to. This branding page should not be linked anywhere on your site. Your client would have to enter the address in manually. You'll keep updating this page as you go.

Plugins

Danger!

Plugins can open serious gaps in your site's security. We only add highly ranked, recently updated plugins. We also make sure that the plugins are kept updated.

Stopping Spam

There's a critical plugin every WordPress should have called Akismet. You'll need to activate the plugin and configure it with a free account for your client. https://akismet.com/wordpress/

Custom CSS

eCommerce

Theme Options

Look through each and every one of the options that your theme provides. Most themes in WordPress keep their settings on a separate page. Some, however, put some or all of their option menus in the Customize view.

Changing the Nav Bar

Widgets, Footers

Here's a great guide.

Fonts

Install, activate and configure a WordPress plugin that allows you to access Google Fonts. We could manually control these options through CSS, including the connection to Google fonts. However, that's harder for our client to maintain.