WordPress
A CMS for Beginners, Geeks and Those In-Between



                                              Heidi A. Cool
                                              August 30, 2012
A brief and incomplete tour.




With just a week to tour Europe we’ll just focus on a few highlights.
Why WordPress?

WordPress.org is a robust self-hosted content management
system (CMS) originally developed for blogging, but now
capable of running many types of Web sites. Using WordPress
in place of a regular (X)HTML site makes it easier to maintain
design consistency, include recurring elements in pages,
produce RSS feeds, organize and archive, support search
engine optimization, and much more.

    •   Self-hosted & hosted options
    •   Open Source
    •   Supports W3C Web Standards
    •   Relatively simple learning curve for
        developers & clients
    • WordPress sites don't need to look
        like blogs




             If you can make it in HTML you can make it WordPress.
Which WordPress?

        WordPress.com                           WordPress.org
 WordPress Lite                         WordPress on Steroids
 Hosted on WordPress.com                Self-Hosted on your Web Hosting Account
 Free w/Fees for Extra Features         Free - (Paid Themes and Plug-ins available)
 Easy to Set-Up                         Easy to Set-Up Basic Site
 Limited Customization                  Virtually Unlimited Customization
 Good for beginning bloggers and very   Good for blogging and developing sites of
 small/simple business sites.           varying sizes and complexities.




Either will get you from A to B, but WordPress.org offers more raw power.
Installation

        WordPress.com                 WordPress.org




• Sign-up                  • Purchase Web Hosting from a provider
• Choose a theme.              that supports WordPress.org.
• Start typing.            •   Install WordPress in a subdirectory
                               using “easy install” options.
                           •   Choose a theme, or develop one
                               yourself.
                           •   Add Plug-Ins
                           •   Start Typing.
WordPress Dashboard (.org)

WordPress.com                  WordPress.org




 Upgrading to a self-hosted site? No worries,
       you’ll recognize the interface.
Dashboard Options

• Edit Blog Posts
• Upload Images &
   media
• Edit static pages
• Monitor
   comments
• Add functionality
• Add users
• Control Settings
Choosing Themes
Choosing Themes
Free, Commercial & Specialty, Frameworks
Choosing Themes
                              Free




Twenty-Eleven Default Theme          Twenty-Eleven with Minor Modifications to
                                        Theme Options and Template Files
Choosing Themes
Commercial & Specialty
Choosing Themes
   Frameworks
Choosing Themes
    Custom Themes
Site Home vs. Blog Home
Static Pages
Pages are hierarchical.
               Parent Page




                Child Page
Blog Posts
Posts are arranged by date and topic.
Browse chronologically or alphabetically.
Use Categories, Tags and Custom Taxonomies

                                            Categories
Broad topics, akin to sections of a grocery store such as
                        meat, produce and baked goods.
                                                   Tags
               Narrow topics, akin to items in the store.
                               Custom Taxonomies
                    You decide how they should be used.
Custom Post Types
Custom Post Type: Portfolio
Taxonomies: Portfolio Type, Location, Architects & Developers




                                                             Custom Post Type: Food
                                                        Taxonomies: Menus, Food Groups,
                                                            Course, Meal Type, Special Diets
Custom Post Types
Post Type: Foods




                                Taxonomies
Media
Images can be inserted or attached.



               Inserted images appear on posts and pages.

               Images that are only attached won’t always appear
               on the page, but may be used elsewhere.
Featured Images
Featured images may be used elsewhere.
Custom Fields
       <div class="foodinfo">
       !    !     <?php the_content(); ?>
       <h6><?php the_field('price'); ?> -
       <?php the_field('price_type'); ?> </h6>

       <div class="mealtype"><?php echo
       get_the_term_list($post->ID, 'mealtype',
       '<span>Meal Type:</span><em> ',', ','</em>'); ?>
       </div>
       <div class="course"><?php echo
       get_the_term_list($post->ID, 'course',
       '<span>Course:</span><em> ',', ','</em>'); ?>
       </div>
       <div class="specialdiet"><?php echo
       get_the_term_list($post->ID, 'specialdiets',
       '<span>Special Diets:</span><em> ',', ','</
       em>'); ?></div>
       <div class="food"><?php echo
       get_the_term_list($post->ID, 'foodgroups',
       '<span>Food Group:</span><em> ',', ','</em>'); ?
       ></div>
       <div class="menus"><?php echo
       get_the_term_list($post->ID, 'menus',
       '<span>Featured on these menus:</span><em> ',',
       ','</em>'); ?></div>
Useful Plug-ins
                                 Plug-ins add features and functionality




•   Calenders
•   Search Engine Optimization
•   Widgets
•   Mobile Layouts
•   Calculators
•   Database Back-Up
•   Podcasting
•   Social Media
•   Testimonials
•   Quotes
•   Audio
•   Video
•   Puzzles & Games...
Useful Plug-ins
TinyMCE Advanced let’s you control what users can
format.                                                EEK! Non-semantic code, too many
                                                             spans, and ugly orange type!!!

                                                    <p><span style="text-decoration:
                                                    underline;"><span style="color:
                                                    #f35f0b;"><strong><span style="font-size:
                                                    xx-large;">Giant Orange Underlined
                                                    Headlines are Bad!</span></strong></
                                                    span></span></p>

              Remove Font Size and Text Color
                                           Text
               Buttons to prevent design abuse.
Custom Themes
     Template Hierarchy




http://codex.wordpress.org/Template_Hierarchy
Custom Themes
Custom Page Template
Custom Themes
                            WordPress Loop
<div class="blogpostwrapper">
<?php if (have_posts()) : ?>
<?php while (have_posts()) :
the_post(); ?>
<div class="blogpost">
<h3 class="entrytitle" id="post-<?
php the_ID(); ?>"> <a href="<?php
the_permalink() ?>"
rel="bookmark"><?php the_title(); ?>
</a> </h3>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php else : ?>
<h6 class="center">Not Found</h6>
<p class="center">Sorry, but you are
looking for something that isn't
here.</p>
<?php include (TEMPLATEPATH . "/
searchform.php"); ?>
<?php endif; ?>
</div>
           http://www.coolwebdev.com/samplewordpress/the-wordpress-loop/
Custom Themes
    Queries
Custom Themes
Wonderful little bits of PHP
We’ve just barely scratched the surface.




       http://codex.wordpress.org/
    The WordPress Codex is your friend.
Don’t Forget Security
                                 Any of us can be hacked.

• Choose a reliable hosting provider.
• Use something other than "Admin" as your username.
• Upgrade WordPress when upgrades are made available. These
    sometimes include security updates.
• Back-up your database regularly. This way if your site is
    compromised you can get it back up and running more quickly.
• Choose carefully when giving others Admin level access to the
    site.
• Check your file permissions to make sure others don't have
    write access.
• Store wp-config.php one level above your WordPress
    directory (when possible) and make sure it can only be read
    by you and your Web server.
• Check .htaccess to make sure your directory listings aren't
    browsable.
• Read up on security tips.
Resources
http://www.coolwebdev.com/samplewordpress/
       about/wordpress-links-resources/




                               Heidi A. Cool
                                       @hacool

WordPress A CMS for Beginners, Geeks and Those In-Between

  • 1.
    WordPress A CMS forBeginners, Geeks and Those In-Between Heidi A. Cool August 30, 2012
  • 2.
    A brief andincomplete tour. With just a week to tour Europe we’ll just focus on a few highlights.
  • 3.
    Why WordPress? WordPress.org isa robust self-hosted content management system (CMS) originally developed for blogging, but now capable of running many types of Web sites. Using WordPress in place of a regular (X)HTML site makes it easier to maintain design consistency, include recurring elements in pages, produce RSS feeds, organize and archive, support search engine optimization, and much more. • Self-hosted & hosted options • Open Source • Supports W3C Web Standards • Relatively simple learning curve for developers & clients • WordPress sites don't need to look like blogs If you can make it in HTML you can make it WordPress.
  • 4.
    Which WordPress? WordPress.com WordPress.org WordPress Lite WordPress on Steroids Hosted on WordPress.com Self-Hosted on your Web Hosting Account Free w/Fees for Extra Features Free - (Paid Themes and Plug-ins available) Easy to Set-Up Easy to Set-Up Basic Site Limited Customization Virtually Unlimited Customization Good for beginning bloggers and very Good for blogging and developing sites of small/simple business sites. varying sizes and complexities. Either will get you from A to B, but WordPress.org offers more raw power.
  • 5.
    Installation WordPress.com WordPress.org • Sign-up • Purchase Web Hosting from a provider • Choose a theme. that supports WordPress.org. • Start typing. • Install WordPress in a subdirectory using “easy install” options. • Choose a theme, or develop one yourself. • Add Plug-Ins • Start Typing.
  • 6.
    WordPress Dashboard (.org) WordPress.com WordPress.org Upgrading to a self-hosted site? No worries, you’ll recognize the interface.
  • 7.
    Dashboard Options • EditBlog Posts • Upload Images & media • Edit static pages • Monitor comments • Add functionality • Add users • Control Settings
  • 8.
  • 9.
    Choosing Themes Free, Commercial& Specialty, Frameworks
  • 10.
    Choosing Themes Free Twenty-Eleven Default Theme Twenty-Eleven with Minor Modifications to Theme Options and Template Files
  • 11.
  • 12.
    Choosing Themes Frameworks
  • 13.
    Choosing Themes Custom Themes
  • 14.
    Site Home vs.Blog Home
  • 15.
  • 16.
    Pages are hierarchical. Parent Page Child Page
  • 17.
  • 18.
    Posts are arrangedby date and topic.
  • 19.
  • 20.
    Use Categories, Tagsand Custom Taxonomies Categories Broad topics, akin to sections of a grocery store such as meat, produce and baked goods. Tags Narrow topics, akin to items in the store. Custom Taxonomies You decide how they should be used.
  • 21.
    Custom Post Types CustomPost Type: Portfolio Taxonomies: Portfolio Type, Location, Architects & Developers Custom Post Type: Food Taxonomies: Menus, Food Groups, Course, Meal Type, Special Diets
  • 22.
    Custom Post Types PostType: Foods Taxonomies
  • 23.
    Media Images can beinserted or attached. Inserted images appear on posts and pages. Images that are only attached won’t always appear on the page, but may be used elsewhere.
  • 24.
    Featured Images Featured imagesmay be used elsewhere.
  • 25.
    Custom Fields <div class="foodinfo"> ! ! <?php the_content(); ?> <h6><?php the_field('price'); ?> - <?php the_field('price_type'); ?> </h6> <div class="mealtype"><?php echo get_the_term_list($post->ID, 'mealtype', '<span>Meal Type:</span><em> ',', ','</em>'); ?> </div> <div class="course"><?php echo get_the_term_list($post->ID, 'course', '<span>Course:</span><em> ',', ','</em>'); ?> </div> <div class="specialdiet"><?php echo get_the_term_list($post->ID, 'specialdiets', '<span>Special Diets:</span><em> ',', ','</ em>'); ?></div> <div class="food"><?php echo get_the_term_list($post->ID, 'foodgroups', '<span>Food Group:</span><em> ',', ','</em>'); ? ></div> <div class="menus"><?php echo get_the_term_list($post->ID, 'menus', '<span>Featured on these menus:</span><em> ',', ','</em>'); ?></div>
  • 26.
    Useful Plug-ins Plug-ins add features and functionality • Calenders • Search Engine Optimization • Widgets • Mobile Layouts • Calculators • Database Back-Up • Podcasting • Social Media • Testimonials • Quotes • Audio • Video • Puzzles & Games...
  • 27.
    Useful Plug-ins TinyMCE Advancedlet’s you control what users can format. EEK! Non-semantic code, too many spans, and ugly orange type!!! <p><span style="text-decoration: underline;"><span style="color: #f35f0b;"><strong><span style="font-size: xx-large;">Giant Orange Underlined Headlines are Bad!</span></strong></ span></span></p> Remove Font Size and Text Color Text Buttons to prevent design abuse.
  • 28.
    Custom Themes Template Hierarchy http://codex.wordpress.org/Template_Hierarchy
  • 29.
  • 30.
    Custom Themes WordPress Loop <div class="blogpostwrapper"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div class="blogpost"> <h3 class="entrytitle" id="post-<? php the_ID(); ?>"> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?> </a> </h3> <?php the_content(); ?> </div> <?php endwhile; ?> <?php else : ?> <h6 class="center">Not Found</h6> <p class="center">Sorry, but you are looking for something that isn't here.</p> <?php include (TEMPLATEPATH . "/ searchform.php"); ?> <?php endif; ?> </div> http://www.coolwebdev.com/samplewordpress/the-wordpress-loop/
  • 31.
  • 32.
  • 33.
    We’ve just barelyscratched the surface. http://codex.wordpress.org/ The WordPress Codex is your friend.
  • 34.
    Don’t Forget Security Any of us can be hacked. • Choose a reliable hosting provider. • Use something other than "Admin" as your username. • Upgrade WordPress when upgrades are made available. These sometimes include security updates. • Back-up your database regularly. This way if your site is compromised you can get it back up and running more quickly. • Choose carefully when giving others Admin level access to the site. • Check your file permissions to make sure others don't have write access. • Store wp-config.php one level above your WordPress directory (when possible) and make sure it can only be read by you and your Web server. • Check .htaccess to make sure your directory listings aren't browsable. • Read up on security tips.
  • 35.
    Resources http://www.coolwebdev.com/samplewordpress/ about/wordpress-links-resources/ Heidi A. Cool @hacool