Tips and Tools

Content rotators or faders are everywhere, it seems. There are several plugins for WordPress that enable this on your site. In the mix, there are some very useful & handy ones. Dynamic Content Gallery, WP-Cycle, and WP-Rotator are three excellent slideshow plugins that I have used and are in my go-to list of WordPress plugins. That said, there always seems to be something that I don’t need or that I wish I had in one of these plugins. That’s when I look to writing my own custom slideshow tool using some WordPress code, CSS, and javascript to do exactly what I want.

There are three steps in this process:

1. Write the query to grab the content. This is a custom Loop. Nothing really fancy there.
2. Write the CSS to style the content.
3. Include and write the necessary javascript to make it behave the way we want.

Writing the query

I believe it’s best to write the query in its own php template file. I created a file in my theme’s directory called slider.php. All my code for the custom Loop and the output will go here. Edit slider.php and add this code:

<div id="featured"> <!--The main container for our featured content -->
<?php
$featured_query = new WP_Query('cat=3&showposts=5'); // We create the query. Grab the 5 most recent posts in the category ID '3'
while ($featured_query->have_posts()) : $featured_query->the_post(); // Start our Custom Loop
$do_not_duplicate[] = get_the_ID(); ?>

<div class="featuredcontent">
<?php the_post_thumbnail( 'Featured_Slider' ); ?>
<div>

<h3><a href="<?php the_permalink() ?>">?php the_title(); ?></a></h3>


<p><a href="<?php the_permalink() ?>"><?php get_the_excerpt(); ?></a></p>
</div>
</div>
<?php endwhile; ?>
</div>


In the beginning of the code, we create a new query:

$featured_query = new WP_Query('cat=3&showposts=5');

You can customize this to your needs – I advise reading up on query_posts and wp_query in WordPress’s Codex.

After we create our new query, we output the results. In our case, we show the Featured Image, the title and the excerpt, both linked to the Post’s permalink. Slider.php is included in my theme using the get_template_part(); template tag in my index.php file. Place get_template_part(); where you want the slider to appear:

<?php get_template_part('slider'); ?>

The CSS

Now we need to write some CSS rules to format the content for our slider:

#featured {
position: relative;
z-index: 1;
height: 420px;
margin-bottom: 1.3em;
background-color: #000;
}

#featured .featuredContent {
overflow: hidden;
float:left;
width: 640px;
height: 420px;
}

#featured .featuredContent .featured_text {
position: absolute;
top: 310px;
width: 620px;
height: 100px;
padding: 10px 0 0 20px;
background-color: rgba(0,0,0,0.8);
z-index: 2;
}

#featured .featuredContent h3 {
color: #fff;
margin: 0 0 0 0;
}

#featured .featuredContent h3 a,
#featured .featuredContent h3 a:visited {
color: #fff;
font-weight: 800;
font-family: Helvetica,San-serif;
text-decoration: none;
}

#featured .featuredContent p {
color: #fff;
margin: 0 0 0 0;
font-family: Helvetica,San-serif;
font-size: 0.9em;
line-height: 1em;
}

#featured .featuredContent p a,
#featured .featuredContent p a:visited {
color: #fff;
text-decoration: none;
}

Make slider go fast now

We’ve created our new query, we’ve styled its content, now we add in the behavior – the sliding, fading, etc. The first example is a bit of javascript, using jQuery, that makes the divs with the class of featuredContent fade in & out. The second example uses jQuery Cycle. Both examples require you to enqueue WordPress’s included jQuery and an external javascript file you’ll create in your theme’s directory.

First, how do you properly load jQuery and your external javascript? If you add script tags in your theme’s header, you run the risk of loading javascript twice & possibly conflicting with javascript loaded by a plugin. The proper way to load javascript is to use the wp_enqueue_script function.

In your theme’s functions.php, add this code:

add_action('init','my_scripts');
function my_scripts() {
wp_enqueue_script(
'my.js',
get_bloginfo('template_directory') .'/js/my.js',
array('jquery'),
'1.1',
false
);
}

You can repeat the wp_enqueue_script function for other scripts you need to load.

For both examples, I created a file in my theme’s directory called my.js. This is where we write any custom javascript.

A simple fader using just jQuery

This example calls jQuery, then runs a script which fades the .featuredContent divs.

jQuery(document).ready(function($) {


var jS = $('div.featuredContent');
jS.hide(); // not needed if css hides elements initially
var i = 0;
function do_ticker() {
jS.eq(i).fadeIn(500, function() {
var me = $(this);
setTimeout(function() { me.fadeOut(500,
function() {
i = ++i % jS.length;
do_ticker();
});
}, 5000); // setTimeout
});
};
do_ticker();


});

The first and last lines load jQuery, in-between goes our custom javascript.

var jS = $('div.featuredContent'); //the element that's fading in & out - div class="featuredContent"


jS.eq(i).fadeIn(500, function() {
var me = $(this);
setTimeout(function() { me.fadeOut(500,


//500 is the duration of the transition in milliseconds (half a second) - how long both the fadein & fadeout take

}, 5000); // setTimeout in milliseconds (5 seconds) - how long each slide is visible

Why use the custom jQuery code instead of an effects plugin like jQuery Cycle? 1) You just want a fader, nothing more. 2) You want to minimize the amount of code you’re loading. That said, if you need some flexibility in the transitions, something like jQuery Cycle might be best.

Using jQuery Cycle.

jQuery Cycle is a slideshow plugin for jQuery that lets you use many different types of transitions – not just fading. To use it, we need to do two things differently:

1) load jQuery Cycle using wp_enqueue_script.

2) write some custom javascript.

Using our my.js file, we replace the custom javascript with this:

jQuery(document).ready(function($) {

$('#featured').cycle({
fx: 'fade', //replace fade with other transition types to use different effects
speed:500, //how fast the fade takes place
timeout:5000 //how long each slide stays on screen
});

});

You’ll want to load jQuery Cycle before you load your custom javascript.

add_action('init','my_scripts');
function my_scripts() {
wp_enqueue_script(
'cycle',
'http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js',
array('jquery'),
'1.1',
false
);
wp_enqueue_script(
'my.js',
get_bloginfo('template_directory') .'/js/my.js',
array('jquery'),
'1.1',
false
);
}

You’ll notice we’re loading jQuery Cycle from Github. If you want, you can place a copy in your theme’s directory and include it from there, as we do with my.js.

There we have it. A custom query, some CSS, and some javascript and you have a customized content slideshow in your WordPress theme. At the May Austin WordPress Meetup, I presented this using TwentyTen as the base theme. I’ve zipped that copy of TwentyTen with the custom code included. Enjoy!

Hands-On WordPress meetup
11 April 2011

Announcements

• Tuesday April 12th, 5:30-8:30pm: Refurbished MacBooks for auction at Sherlocks (Burnet & Anderson)
• Karen Kreps also has a Macbook for sale.
• Saturday, April 16th, 11am-5pm: Hands-On WordPress class
• Join the community: Austin WordPress Google Group

Best Practices for Websites

Presented by Sandi Chevalier-Batik,Pleiades Publishing Services

[See Presentation Slides at the End of Class Summary]

Visitors and Google/search engines like logically organized websites. To do this, you need to have goals for your website, and you need to figure out how navigate your site.

• Define the purpose for your site

Sell product? Inform public?

• Identify goals

Make a list of things you want to accomplish with your website.

• Identify your target audience

Who are you trying to reach? What does your audience want to do when they reach your site? What do you want them to do?

• Create list of content topics and keywords

Who are your competitors? What words or keywords would you enter to find the products or services that you offer? What do your competitors offer? What can you do better than your competition?

Brainstorm all the words you can think of that relate to your site and then try to whittle them down to the most relevant and significant.

Divide the keywords into content categories.

• Draw a flow chart of pages

Scribble out your site; put pages in boxes and draw lines between them. Create wireframes to figure out how pages relate to one another. How do you expect people to navigate from page to page and find the information they need? Look at competitors’ sites and see what they do right… and what they do wrong (and then do it better!). Make it easy for people to navigate the site.

Once your site is live, find out how visitors actually use your site, and be prepared to tweak things to improve their experience.

• Create navigation menu

Write out your sitemap and plan where the pages of your website will go and where each will link. Don’t let users get confused!

Navigation menus should be consistent throughout the website.

Top navigation bar should be limited to about eight links (or less!). More than that becomes cluttered or confusing. Housekeeping links (like your privacy policy, copyright notices, etc.) can be in the footer.

Every page should have a link back to the home page.

Each page should be summed up with one or two keywords that then become your navigation labels.

Be sure you can answer these questions for every page:
Where am I? Where have I been? Where can I go? How can I get back to home page?

If ecommerce: make it easy for your customers to give you money.

Don’t make visitors register just to browse your site or see your services.

Make sure your logo is in the same place on every page.

Don’t link to under construction or unfinished pages.

• Develop a unified site design

Produce a plan: what am I going to do with this site? What kind of info will I be posting? Who is going to read this? Why am I doing this? How often am I going to be posting new information? (Google spiders get bored… there needs to be new content regularly).

Create a visual theme that is consistent with your site’s mission and goals.

• Design action steps for visitors

You need a big green button. Or something that is very clear for visitors to find and do.

• Commit to treating your website as a business unity and follow schedule for updating content

Tools

Google Wonder Wheel
This option in google search results (scroll down and look for wonder wheel option in left-hand column; you may have to turn off instant search options off) can be a useful tool for search engine optimization and site organization. It generates top-level keywords based on search phrase; this can be helpful for organizing your site, keywords to add to your SEO metatags, and the major categories on your site. It can even help you come up with a URL for a new site.

Google Ad Words
Looking at a rundown of keywords gives you a sense for what your competitors are using. Look for keywords with relatively low competition and high number of searches. The goal is to figure out how to narrow it down to get to the specifics of what your clients are searching for. Once you have figured that out, use those terms in your site, giving useful information. Don’t just put it in your keywords… give people information, even if it’s in a FAQ.

KeywordSpy
Shows how many searches for specific keywords and cost per click. Common misspellings, pay per click competitors. Organic competitors did not buy ads but shows how often the keyword shows up in their site.

Google Alerts
Will alert you when your designated keywords are mentioned in a blog. This might give you ideas for sites with which you can network an create reciprocal website links, which helps with SEO.

Plugins

• Google XML sitemap plugin
• Sidebar plugin to create vertical accordion menus
• Privacy policy plugin
• Yoast’s breadcrumb plugin
• E-Commerce plugin

Note: the document viewer below has had difficulties with the latest release of FireFox. If you do not see the PowerPoint presentation, try viewing in a different browser (Google Chrome does really well).

Stephanie linked to a post today where Guillermo wrote a rough importer for WordPress back in 2009 that imports a Delicious XML export into your WordPress install as Posts. It needed some reformatting of the functions to register properly with WordPress & not cause errors.

Download the Delicious Importer here.

How do you get your Delicious bookmarks as an XML file?

Use this URL: https://api.del.icio.us/v1/posts/all but place your username / password inbetween the :// and the rest of the URL with an @ before the URL. Example:

https://my_username:my_password@api.del.icio.us/v1/posts/all

Once you have the exported XML file, install and activate the Delicious Importer plugin and import the XML file as you would a WordPress XML file.

Important – all your bookmarks will be imported, private ones, too. If you don’t want it imported, you will need to edit the XML file beforehand.

Update: Stephanie’s got a version on her site & hers handles private tags as private posts or invisible links. Grab a copy of it here.