Multi-User Authoring

Agenda

Week 4


We are almost half-way through the term, and I would like to see the progress that you have made. To that end, I would like to do a website pinup next week. Everyone will put their site up on the screen and we'll have a mini critique.  This week, more on plugins.


Plugins to Know and Love


Plugins are little programming packages that extend the functionality of the out-​​of-​​the-​​box WordPress installation. They are a great way to easily customize your site.

Plugins can make it easy do things such as add a contact form, create new drag-​​and-​​drop interfaces on the Dashboard, or administer search engine optimization.

Because WordPress is an open source application, there is an enormous community of developers and users of the system. If you need to customize something on your site, chances are pretty good that someone has already made a plugin that does what you need.

If you’re into PHP programming, you can create your own plugins. The WordPress Codex explains how to use the WordPress API to do this.

As of January 2012, the Official
WordPress Plugin Directory lists more than 17,560 plugins (and counting). But don’t stop there: you can search “WordPress Plugin+Your Search Terms” to find plenty more.

Mike Sinkula has a page that explains
how to install a plugin.

Recommended Plugins
I install many of these plugins on just about every site I build in WordPress. They’re that handy.

PageMash
My Link Order
wp-​​hide-​​post
wp-​​sticky
wp-​​spamfree
php-​​code-​​widget
my-​​category-​​order
calendar
phpexec.php
contact-​​form-​​7
all-​​in-​​one-​​seo-​​pack
FeedBurner_FeedSmith_Plugin.php
WP DB Backup
WP Search 2
These security plugins are well worth checking out:

Login LockDown
AskApache Password Protect
AntiVirus for WordPress
Block Bad Queries
WP Security Scan

The Loop

The loop is the key to a WordPress theme: it is a piece of code that pulls your content from the database into your site. Beck pg 192

When a user clicks a link in a dynamic site, they get a page generated to display content that meets certain conditions: a page named foo.php, all the posts tagged X, or all the posts in category Y.

The code in the loop gets each instance of database content that meets the required conditions, and displays it according to the PHP and HTML instructions given. It then loops back to find the next instance, and follows the given instructions again.

The PHP and HTML code inside the loop determines how the content and metadata of each post will be displayed on the page.

  • Code placed above the loop on the template page will be rendered once, before the first post.

  • Code inside the loop will be repeated for each post.

  • Code beneath the loop will be rendered once, after the last post.

The Basic Loop


<?php if (have_posts()) : ?>


<?php while (have_posts()) : the_post(); ?>


<?php the_content(); ?>


<?php endwhile; ?>


<?php else : ?>


<><?php _e('Sorry, no posts.'); ?>


<?php endif; ?>


A comprehensive Guide to the WordPress Loop


Jeff Starr at Perishable Press offers the best explanation of the loop I have ever seen.


10 Useful WordPress Hacks


Week 3

We will look at your site configurations, then examine Templates & Tags.

Templates and Template Tags

The Template Tag Basics:

http://​codex​.wordpress​.org/​T​e​m​p​l​a​t​e​_​T​a​g​s​/​A​n​a​t​o​m​y​_​o​f​_​a​_​T​e​m​p​l​a​t​e​_​Tag

http://​codex​.wordpress​.org/​S​t​e​p​p​i​n​g​_​I​n​t​o​_​T​e​m​p​l​a​t​e​_​T​ags

http://​codex​.wordpress​.org/​T​e​m​p​l​a​t​e​_​T​a​g​s​/​H​o​w​_​t​o​_​P​a​s​s​_​T​a​g​_​P​a​r​a​m​e​t​ers

http://​codex​.wordpress​.org/​I​n​c​l​u​d​e​_​T​ags

List of Template Tags:

http://​codex​.wordpress​.org/​T​e​m​p​l​a​t​e​_​T​ags

The Template Hierarchy:

http://​codex​.wordpress​.org/​T​e​m​p​l​a​t​e​_​H​i​e​r​a​r​chy

Super Simple Template Code

<?php get_header(); ?>

 <div id="content">

   <h2>Error 404</h2>

   <p>Sorry, the page you are looking for doesn't exist.</p>

 </div><!-- #content -->

<?php get_footer(); ?>


For next week,


HTML Template


  1. Start with the HTML5 document template.

  2. <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
     <meta charset="UTF-8">
    </head>
    <body>
    <div id="wrapper">
    <header>header</header>
    <nav>
    <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contact</a></li>
    </ul>
    </nav>
    <div id="mainContent">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
       </div>
    <footer>
    &copy; 2012
    </footer></div>
    </body>
    </html>

  3. Note: you don’t have to use any of the new HTML5 tags in the body of your page if you don’t want to. Use the provided HTML5 template, and write the code using the HTML skills you’ve already got.

  4. Create a valid HTML/​CSS template of an interior/​lower-​​level page for your final project.

  5. If your site will have more than one page layout (for example, your home page will look different from your interior pages), create a template of your alternate page layout, too.

  6. If you have two pages, link them together in your main nav so I can easily navigate from one to the other, and add some very obvious text to the first paragraph of your primary content area to let me know.

  7. All layout/​positioning must be done using divs and floats. No tables.

  8. All presentation and positioning styles must use CSS.

  9. Your CSS should be in an external style sheet named style.css, linked to the head of your template document. No inline styles.

  10. Your background images, banner/​logo images, font styles, etc. should be the ones you will use on your final site. Images within the content area(s) may be placeholders.

  11. Your links should be null links (href=“javascript:;”) that show me your unvisited andhover/​focus states.

    • Include examples of inline text links in your content area and footer, not just site navigation.

    • On a WordPress site, users must be able to access posts as well as pages. Be sure your design includes a sidebar which will display your Categories widget.

    • Keep in mind that on a WordPress site, many sidebar items are links. Style them with unvisited, hover/​focus, and (optional) visited states.

  12. Enclose the logo/​header in a null link tag so we can link it back to the main page from each interior page.

  13. Include clear and consistent page identification. A good way to do this is to use a headline, for example an <h1> or <h2> that says “About Us” on your About page.

  14. Include examples of subheads in your page text. Your template should show me how h2 and h3 subheads will be styled in your main content area, and in your sidebar(s).

  15. Your template must contain enough dummy text to show how a long, scrolling, text-​​heavy page will be handled. For example, if you have a background image, will it end, repeat, or fade out when the text is longer than the image?

  1. Place a copyright and design credit at the bottom of the page. (The content might be copyrighted to your client, while the design copyright is yours.)

  2. Be sure your template meets the legibility guidelines. For example:

    • Appropriate line length (approximately 500 pixels max column width)

    • Appropriate line-​​height for your font (at least 130%)

    • White space between paragraphs (put margin-​​bottom on your paragraphs)

    • Adequate contrast between foreground and background colors, etc.

  3. Review the final project requirements to be sure your design will accommodate all the elements your final site needs.

  4. Test your template in Firefox and IE7, 8, and 9. If you don’t have access to these versions of IE, use the IE NetRenderer.

  5. Validate your HTML and your CSS. Place both validation badges on each page, andtest them. Please use the CSS3 validation link provided in the document template.

Using the Links panel in your WordPress site’s Dashboard, add a link that points to your template file. Be sure your Links widget appears in your site’s sidebar, so I can find the link.


Week 2

I think the power of WordPress comes from the ability to use the plugins. We will look at a couple of tutorials in that regard. I'd like for us to think about ways to expand the capabilities of your site. It seems to me that simply building a site and porting it to WordPress is rather elementary for students of your skill sets and talents.


Here are some ideas--


Use WordPress as your invoicing system, Turn your WordPress site into a customized job board, Use WordPress for Customer Relationship Management (CRM), Manage your email newsletter campaign in WordPress, Create a wiki engine with WordPress.   http://smartsite4u.com/blog/5-innovative-uses-of-wordpress-for-business-owners-and-entrepreneurs/


Innovative Uses of WordPress Post Types and Taxonomies http://wp.tutsplus.com/tutorials/theme-development/innovative-uses-of-wordpress-post-types-and-taxonomies/


25 Unique uses of WordPress as CMS  http://www.noupe.com/wordpress/25-unique-uses-of-wordpress-as-cms.html


10 Nonblog WordPress-Powered Sites That Spur Creativity  http://designrfix.com/inspiration/10-nonblog-wordpresspowered-sites-spur-creativity


Here are some other links that might peak your imagination--

http://thepioneerwoman.com/tasty-kitchen/

http://www.mybabyourbaby.com/

http://www.creativespaces.net.au/

http://themeforest.net/popular_item/by_category?category=wordpress

http://themeforest.net/item/wordpress-wiki-theme/29479


For next week,


Configure your site

  1. Create a new site title and tagline for your site.

  2. Modify your permalink settings (page URLs) to contain the titles of your pages and posts. Be sure to choose a custom structure that is relevant to your site content and will allow for your site to grow over time.

  3. Drag your Links widget and your Categories widget into your sidebar. pg 94-106

  4. Edit your Links, and add at least three new ones.

  5. Edit your Uncategorized category, giving it a new name. Be sure your default Hello World post is accessible so I can find it and see your re-​​named category.

  6. Add one or more new user accounts, with different levels of permission.


Week 1

Introduction (Course objectives, requirements), Contact info, check on e-book

First steps--Introduction to WordPress

Lecture: Course Overview/​What is WordPress?

Reading: Beck Introduction, pgs 1–28, & Chapter 3

Assignment: Choose Your Project and Get Web Hosting

These will be the benchmarks for your final project.

  1. At least 3 pages (built on the WP page.php template) that will appear on your site’s main menu)

  2. At least 4 posts, assigned to at least 3 different categories. On a site built for a business, your posts could be displayed on a “blog” or “news” page.

  3. At least one category that has more than one post in it.

  4. A widgetized sidebar on every page, with a Categories widget that provides access to your posts.

  5. Custom, SEO-​​friendly permalinks.

  6. At least two images uploaded into the Media Library and displayed within the content of a post or page.

  7. A custom theme, built by you for this class from the HTML template you’ll turn in for your mid-​​term assignment.

  8. Standards-​​compliant code that works in Firefox and IE.

  9. All styles and positioning must be done with CSS.

  10. You may use tables only if and when you are displaying tabular data within your content div. If you plan to put any tables into your site, please check in with me.

  11. A functioning contact form. I recommend using a plugin for this.

  12. A clickable logo image and/​or <h1> headline on every page that links back to your home page.

  13. No broken links or paths.

  14. No mail-​​to attributes. Any contact links must take the user to a web page, such as a contact form.

  15. Clear, consistent navigation on all pages.

  16. Clear, consistent page identification on every page.

  17. In other words, I should always know where I am, where else I can go, and how to get there.

  18. Continuity of design, color and style across all pages. Your design should demonstrate that you have successfully completed Web 120.

  19. Legibility: Avoid putting text over busy background images, using dark text on dark backgrounds, light text on light backgrounds, etc.

  20. A footer with copyright information that shows who did the web design (you) and who owns the site content (your client).

  21. Standard WordPress include files for commonly repeated elements such as header, sidebar, navigation, and footer.

  22. A favicon.

Comments