An LEDC Initiative:
WORDPRESS AS A CMS WEBSITE
Hosted by the Louisiana RII School District.
Provided by Bart Niedner of Resource Forge LLC
WordPress as a CMS Website
BART’S WORDPRESS DISCLAIMER!

I’M AN INTERNET DEVELOPER, NOT A WORDPRESS EXPERT!





Though WordPress is a great solution for non-programmers, most of the work I do
requires greater customization. I work at the code level.
I have a number of clients, including Security
Traders Association, which use WordPress
front-ends on more sophisticated back-ends
I build.
WordPress is quick, user friendly, and has lots
of flexibility.
So, let’s see what we can build together in
WordPress!
TWO GOALS


Gain a basic familiarity with WordPress.
Establish an online presence you can
continue to work on independently.
WordPress as a CMS Website
WEBSITE AUTHORING TOOLS

TEXT EDITOR (CODE)
HTML and JavaScript are just plain text.
Most editors have syntax highlighting.
Examples: Notepad, UltraEdit, Bluefish,
Eclipse, Dreamweaver (code view)…

ONLINE CMS (WYSIWYG)
Content Management System (CMS).
A web-based, word-processor-like interface
where you can modify, add, or delete
content including text, images, pages, and
navigation elements.
Examples: WordPress, Drupal, Joomla,
Dot Net Nuke, X-Standard…

DESKTOP CMS (WYSIWYG)
Usually more sophisticated and easier to use than an online CMS.
A word-processor-like program where you can build whole websites and control all of the
files in the framework.
Some programs not dedicated to the Web, can save HTML files. (MS Word)
Examples: Web Expressions (previously FrontPage), Dreamweaver
WordPress as a CMS Website
WHAT IS WORDPRESS?

WP IS BLOGGING SOFTWARE
The term “blog” is short for “weblog”.
Blogs are websites comprised of a collection of
articles and comments on those articles.
Blogging software allows a non-programmer to
create a blog website.
Intentionally straight forward software to publish
your content.

WP THINKS LIKE A BLOG
The trick for using WordPress as an Online CMS
Web Authoring Tool is mostly about removing
the blog-specific features from the pages you
create.
WordPress as a CMS Website
GETTING STARTED

WHAT HAS ALREADY BEEN DONE

WHAT YOU ARE GOING TO DO
Your hosting company has setup the following things:
 Your own little area of the Internet called
a subdomain.
 If you would like a domain, we can do that
for about $25.
 Copied the WordPress software to your
subdomain.
 Created a database for WordPress to use.
 Created an FTP account.







Configure the basic settings for your website.
Create each of your pages and order them in
the menu.
Setup how you want your ‘blog page’ to behave.
Edit your header image.
Play with plugins.
Play with widgets.
Change your theme.
“Hey, Bart, do you have a
caffeine pill or something?”
-Meagan 8/22/2012
WordPress as a CMS Website
BASIC SETTINGS

BROWSE TO YOUR INSTALL PAGE
Example: http://yourname.resourceforge.com/wp-admin/install.php
Fill out the form:
Name your website.
Use your username and password.
Use your email for password recovery.
click the “Install WordPress” button.

LOOKING AT YOUR WEBSITE
Just click on the title of your website in the
upper-left to toggle between the dashboard
and website.
URL: http://yourname.resourceforge.com
WordPress as a CMS Website
CREATE YOUR MAIN PAGES

CREATING PAGES





Click on “Pages” on the left menu.
Use the “Add New” button at the top to
create the following pages:
 Home
 About
 Services/Products
 News/Blog
 Contact
You can leave the pages
blank or enter some
temporary text for now.
Set the menu “Order”.
Make sure you click on
the “Publish” button
when saving the pages.
WordPress as a CMS Website
CLEAN UP YOUR NAVIGATION

CLEAN UP MENU




Trash “Sample Page” (delete).
Be sure to use “Sidebar Template”
for Home page (includes “Log in”).
Be sure to use “Sidebar Template”
for blog page (includes categories,
posts, comments, and archives).
SET YOUR HOME PAGE
AND BLOG PAGE





Click on “Settings” > “Reading.”
Select the “static page” radio button.
Select your Front Page (home/default).
Select your Posts Page (blog).
Make sure you click on the
“Save Changes” button when done.
WordPress as a CMS Website
CREATE YOUR CHILD-PAGES

CREATE CHILD-PAGES


Add a couple of new pages.
Set them to the same “Parent” page.
Look at how your menu has changed
to display the new child pages.
WordPress as a CMS Website
YOUR “BLOG PAGE”

CREATE CATEGORIES



Click “Posts” > “Categories”
and add a couple of new categories.
A Slug is a friendly URL.
ADD A NEW POST
Click “Posts” > “Add New”.
Make at least one post for
each category.

COMMENT ON A POST
Logout or visit someone
else’s site.

MODERATE COMMENT
Approve, reply, spam, or
trash it!
(This also went to your email!)
WordPress as a CMS Website
HEADER IMAGE

YOU DO JUDGE A BOOK BY ITS COVER…

IMAGE EDITOR

DOWNLOAD AN IMAGE

CHANGE YOUR HEADER IMAGE
Let’s change the header image. Every theme is different so we will do this together, before
playing with different themes.
I usually use Photoshop.
PIXLR (www.pixlr.com) is online and free.
Gimp (www.gimp.org) is free to download.
This isn’t a workshop on images so we’ll move on…
Do a search for “WordPress Header Images” or just visit www.freewordpressheaders.com
Download an image you like to your desktop (right-click and use “save as”).
Your new image needs to be in JPG, GIF, or PNG format.
Match your original pixel dimensions.
 Click “Appearance” > “Header” and “Upload” your image.
You can set server permissions through FTP or have your hosting company do it for you.
 Crop and Publish your new header image.
 You can also toggle the “header text” from the “Custom Header” interface.
 Remember to “Save Changes.”
WordPress as a CMS Website
PAGE IMAGES

UPLOAD AN IMAGE





From an “Edit Page” view, click “Upload/Insert.”
Drag/drop or use “Select Files” to choose which
images you want to upload.
After your image uploads:
set the “alt” tag, and
select “Insert into Post.”
Use the edit image button to
tweak your image once it is in
your content area.
USE WEB IMAGE
You may also use “Upload/Insert”
to select an image on the web,
such as one you have already
uploaded to your “Media Library.”
WordPress as a CMS Website
PLUGINS

WHAT IS A PLUGIN?
A WordPress Plugin is a program, or a set of one or more programming functions that adds
a specific set of features or services to the WordPress system. These new features are
seamlessly integrated within WordPress.
 You can use “Add New” to browse and search for Plugins. Many will require a fee or a
signup.
 Lets click on “Plugins” and then activate “Hello Dolly” to be uber-cool!
WordPress as a CMS Website
WIDGETS

WHAT IS A WIDGET?
WordPress Widgets are WordPress Plugins that add visitor visual and interactivity options
and features, such as sidebar widgets for post categories, tag clouds, navigation, search,
etc.. Widgets are plugins that create an object you place in your website.
 Use “Appearance” > “Widgets” to drag available Widgets into or out of your theme’s
available areas of the layout.
 Many Widgets can be customized.
 Check out the WordPress Plugin
Directory for more Widgets and
Plugins.
(www.WordPress.org “Plugins” tab)
WordPress as a CMS Website
CHANGING THEMES

What is a Theme?
A WordPress Theme is a collection of files that work together to produce a graphical
interface with an underlying unifying design. It is a way to “skin” your website.

Get a New Theme






Click “Appearance” > “Themes”.
On the “Install Themes” tab, do a search
for available themes and “Install Now.”
Setup your FTP Connection Information.
Click “Proceed.”
After your theme downloads,
click “Activate.”
Many Themes require additional
information. Go ahead and fill it out if
requested.
Play with a few themes and their settings.
You can always go back to the original theme.
An LEDC Initiative:
WORDPRESS AS A CMS WEBSITE
Hosted by the Louisiana RII School District.
Provided by Bart Niedner of Resource Forge LLC