WordPress as a CMS Website

1. An LEDC Initiative: WordPress as a CMS Website Hosted by the Louisiana RII School District.Provided by Bart Niednerof Resource Forge LLC

2. 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 WordPressfront-ends on more sophisticated back-endsI build. • WordPress is quick, user friendly, and has lotsof flexibility. • So, let’s see what we can build together inWordPress! • TWO GOALS • Gain a basic familiarity with WordPress. • Establish an online presence you cancontinue to work on independently.

3. 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 interfacewhere you can modify, add, or deletecontent including text, images, pages, andnavigation 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

4. WordPress as a CMS Website What is WordPress? • WP is Blogging SoftwareThe 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 BlogThe trick for using WordPress as an Online CMS Web Authoring Tool is mostly about removing the blog-specific features from the pages you create.

5. WordPress as a CMS Website Getting Started • What has already been doneYour 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 databasefor WordPress to use. • Created an FTP account. • What You Are Going To Do • Configure the basic settings for your website. • Create each of your pages and order them inthe 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

6. WordPress as a CMS Website basic settings • Browse to your Install PageExample: http://yourname.resourceforge.com/wp-admin/install.phpFill 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 WebsiteJust click on the title of your website in theupper-left to toggle between the dashboardand website.URL: http://yourname.resourceforge.com

7. 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 tocreate the following pages: • Home • About • Services/Products • News/Blog • Contact • You can leave the pages blank or enter sometemporary text for now. • Set the menu “Order”. • Make sure you click on the “Publish” buttonwhen saving the pages.

8. 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 pageand 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.

9. 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 changedto display the new child pages.

10. 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 PostClick “Posts” > “Add New”.Make at least one post foreach category. • Comment on a PostLogout or visit someoneelse’s site. • Moderate CommentApprove, reply, spam, ortrash it!(This also went to your email!)

11. WordPress as a CMS Website Header image • You do Judge a Book by Its Cover…Let’s change the header image. Every themeis different so we will do this together, before playing with different themes. • Image EditorI 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… • download an ImageDo a search for “WordPress Header Images” or just visit www.freewordpressheaders.comDownload an image you like to your desktop (right-click and use “save as”). • Change your header imageYour new image needs to be in JPG, GIF, or PNGformat.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.”

12. 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 whichimages you want to upload. • After your image uploads: set the “alt” tag, and select “Insert into Post.” • Use the edit image button totweak your image once it is inyour content area. • Use Web ImageYou may also use “Upload/Insert”to select an image on the web,such as one you have alreadyuploaded to your “Media Library.”

13. 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!

14. 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 PluginDirectory for more Widgets andPlugins.(www.WordPress.org “Plugins” tab)

15. 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 additionalinformation. Go ahead and fill it out ifrequested. • Play with a few themes and their settings.You can always go back to the original theme.

16. THANK YOU An LEDC Initiative: WordPress as a CMS Website Hosted by the Louisiana RII School District.Provided by Bart Niednerof Resource Forge LLC