WordPress & the Firmidable Plugin

Firmidable Website Training

Flat HTML & CSS Are OK

But there are some drawbacks.

Solution: Use a CMS

A CMS is a Content Management System.

CMSes let you manage a website from top-to-bottom with a friendly interface.

By far, the most common CMS is WordPress.

Setting Up Your WordPress

Go to

http://users.themarketingcenter.com/[USERNAME]/wordpress

It should redirect to

http://users.themarketingcenter.com/[USERNAME]/wp-admin/setup-config.php

Select English and click Continue. Click Let's Go!.

Setting Up the Config File

Your next screen asks for a lot of information – save this somewhere!

Database Name – themarke_u_[USERNAME]
Username – [FROM SLACK]
Password – [FROM SLACK]
Database Host – localhost
Database Prefix – Whatever you want, but the default wp_ is fine.

Click Continue, then click Run the install

Setting Up Your Site

This sets up your actual site and your WordPress login. Please write this down as well!

Site Title – [YOUR NAME]
Username – [YOUR USERNAME]
Password – [YOUR PASSWORD]
Your Email – [YOUR FIRMIDABLE EMAIL]
Search Engine Visibility – Leave Unchecked

Click Install WordPress.
Click Log In.

Log in using your username and password.

The WordPress Dashboard

WordPress Dashboard, Clockwise from top: Admin Bar, Work Area, Navigation Menu
Clockwise from top: Admin Bar, Work Area, Navigation Menu

Posts

Posts are single articles on a site. They’re basically blog entries.

Technically all content in WordPress is a “post,” and you can do a lot of cool things with posts.

Posts can be organized into Categories and Tags.

Media Library

Your Media Library should be empty. Let’s fix that.

Go to your user page. Right-Click on your image > Save image as… and save it to your desktop.

Click Add New, then Select Files then select your image file.

It’ll then show in the library!

Pages

Pages are a type of post, but they’re not meant to change, and they’re meant to persist.

Most of our sites are built using pages.

Under “Sample Page” click Trash.
Then, Click Add New.

Your First Page

Under “Enter title here,” type Home

Visit your HTML page and View Source.

Then, copy everything in <div id="main">

Click the Text editor in WordPress.

Paste the code into the content box. You might want to clean up the indentation.

Click Publish.

Add Media

You’ll see your image might not work.

Delete the img tag.

Click Add Media and select your image.

Click Insert into page.

Remove the width, height and class attributes. Remove the self-closing slash in the tag.

Remove the pixel size in the filename to use the right image. Replace the alt attribute with your name.

Making Your Home Page

Navigate to Settings > Reading

Under “Front page displays” select A static page.

Under “Front page” select Home.

Click Save changes.

Making Your Theme Directory

That’s OK, but it’s not what you designed!

In your FTP, go to wp-content/themes

Right-Click on the Remote Site Current Directory pane > Create New Directory and Enter It

Name your directory your username.

Creating Your Theme File

Right-Click on the Remote Site Current Directory pane > Create New File

Name it index.php

Right-Click on the Remote Site Current Directory pane > Create New File

Name it style.css

Creating Your Style.CSS


/*
Theme Name: [YOUR THEME NAME]
Theme URI: http://firmidable.com
Author: [YOUR NAME]
Author URI: https://users.themarketingcenter.com/[USERNAME]
Description: This is my theme!
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: responsive
Text Domain:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Styling Your Theme

This is the easy part!

You can copy and paste your styles from your old site, and they’ll work perfectly!

You can get your stylesheet quickly by viewing source.

Don’t forget to save!

Activating Your Theme

Navigate to Appearance > Themes.

Click Activate under your theme.

But look at your site! It’s blank!

Creating Your Index.PHP

There are three parts to a fully-working index.php:

Creating Your Index.PHP: Adding the wp_head()

	<head>
		<title>About Me</title>
		<link rel="stylesheet" href="css.css">
		<?php wp_head(); ?>
	</head>

The wp_head() function ties a lot of WordPress magic to the <head> section of the site.

Creating Your Index.PHP: Copying the Page Structure

To start, the easiest way to transfer from an static HTML page to a WordPress theme is to copy and paste the HTML into your index.php

When starting from an existing HTML page, this makes sure you have the right skeleton.

As always — don’t forget to save!