• Contact

Connect With Us

  • rss
  • http://www.twitter.com/jtpratt
  • http://www.facebook.com/jtprattmedia/
  • http://www.flickr.com/photos/jtprattmedia/
  • http://www.linkedin.com/profile/view?id=7571520&trk=tab_pro
JTPratt:  WordPress Developer Blog
  • BlogWordpress Help, Tips, and Tricks
  • ArticlesWordPress and web development

Blog

Latest News

Home » Blog

WordPress Custom Post Types on Steroids Tutorial

Posted in: General
  |  by: jtpratt

wordpress-custom-post-types-steroids

WordPress began primarily as a blogging tool because of the “post” paradigm. You could easily create an online journal of running posts for your website. Over time the system matured with the addition of (static) Pages, and tags and categories for posts (for sorting).

With the ability to create custom fields for posts and pages (later), developers began to bastardize the system to create business websites. This was times both hard to deal with (if you creted websites) and frustrating at best. It was also the reason that non-WordPress devs would cry out “WordPress is NOT a CMS, use Drupal or Joomla…” At that time, they actually had a valid point.

Several years ago WordPress added “custom post types“, and taxonomies to the system. This was the point at which WordPress coders could finally tell the Drupalers and Joomla dev’s to shut up – this are the magic pieces that turned WordPress from a “blogging system” to a fully fledged content management system (CMS) for websites.

“Today we’re going to show you how to create and use a custom post type in WordPress with a taxonomy – both code (for intermediate and advanced WP users), and with plugins (for beginners or those that want to save time). Our example will be how to create a portfolio page with a custom post type in WordPress.”

What is a Custom Post Type?

Within WordPress, generally speaking most people know that posts are used for blog posts, and pages are used for pages (like about, contact, services, products, etc.). You can choose to have your posts displayed on the homepage, or a subpage (or not use them at all).

What you can’t easily do is group content together, other than creating pages, and then child pages. To make matters worse, you can’t assign tags and categories to pages (you can only use them on posts).

This led to one of two scenarios for most WP site builders. The first is to put items needing categorization all in posts (including blog posts), but separate them by category.

Such as making all blog posts in the “blog” category, and then services in the “services” category, with sub-categories (when needed) – this scenario is just a very messy affair.

The second way would be to create tons of WordPress pages and sub-pages (with no way to categorize or sort them other than the parent->child relationship of the pages themselves). Some devs used ingenious ways to use custom fields to fit their needs, both in this scenario, and in the first example with posts.

Custom posts types were created to solve this issue.

Everyone is familiar with this image:

WordPress dashboard

The first thing you learn about WordPress is where to go to create, manage, and edit posts, pages, media, links, and comments. By default every WordPress website looks like this on the wp-admin dashboard.

But, once you create a custom post type you’ll see additional selections available in the left sidebar of wp-admin.

In the image below we see the normal WP options for posts, media, links, pages, and comments, but we also see 3 new ones (featured, Market, and Products). These are 3 new “custom post types” that were created within this website.

wordpress-custom-post-types

Now that they have been created, it’s much easier for the client and developer to find and edit content within the website. For this website, everyone knows that posts are only blog posts, pages are static pages (about, contact), featured is for (home page) featured content, Market are the services pages, and products are the products pages.

In this image you see the edit screen for a custom post type “Featured Home”. Looks just like a post or page edit screen – doesn’t it?

add-new-custom-post-type

How Do I Create a New Custom Post Type?

You can easily create a new custom post type via number of methods. We’re going to show you how to do it both with and without code (for both beginners and advanced users).

Using PHP Code for Custom Post types and Taxonomies

It’s easy to create a new custom post type with some code like this:


add_action('init', 'featured_register');

function featured_register() {

$labels = array(
'name' => _x('Featured Home', 'post type general name'),
'singular_name' => _x('Featured Home', 'post type singular name'),
'add_new' => _x('Add New', 'featured item'),
'add_new_item' => __('Add New Featured Item'),
'edit_item' => __('Edit Featured Item'),
'new_item' => __('New Featured Item'),
'view_item' => __('View Featured Item'),
'search_items' => __('Search Featured'),
'not_found' => __('Nothing found'),
'not_found_in_trash' => __('Nothing found in Trash'),
'parent_item_colon' => ''
);

$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'menu_icon' => get_stylesheet_directory_uri() . '/article16.png',
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title','editor','thumbnail')
);

register_post_type( 'featured' , $args );
}

That code would be something that you would add the the functions.php file of your WordPress theme. If you’re a coder, and you want more information on how this works, then check out the register_post_type page in the WP Codex here.

The next thing you would need to do would be to register a taxonomy. A taxonomy is an ordered list of things. Within normal (blog) posts tags and categories are ways to sort posts via taxonomy. By default a custom post type won’t have any taxonomy attributes (unless you define them). So if you’re a coder, you need to use the function register_taxonomy.

Here’s a code example of registering a taxonomy for the custom post type we just created:


register_taxonomy("Type", array("featured"), array("hierarchical" => true, "label" => "Type", "singular_label" => "Type", "rewrite" => true));

That example code creates a taxonomies for “Type”, that could be used to create types of featured content (like tags). In this example for the “Featured” custom post type, maybe Type is a taxonomy item where you add things like “food”, “drink”, “movies” for a website listing featured deals around town.

Taxonomies are helpful for categorizing content, and many times websites have content that would never fit in traditional post or pages. If you have a movie website, you might have a custom post type taxonomy with attributes like “studio”, “actor”, “director”, “rating”, etc. A recipe website might have “ingredients”, “prep time”, “difficulty”, “nationality”, etc.

The last thing you might want to do are add any custom fields you might need for your custom post type edit screen. Examples would be a meta box for clickable URL, an address, phone number, icon URL, expiration date, etc.

We’re not going to delve into the code for that here, but you might want to check out the add meta box function in the WP Codex, or this tutorial on manually creating custom post types.

Using a WordPress Plugin to Create Custom Post Types

The great thing about WordPress is that once somebody figures out how to do something cool with code, somebody else creates a plugin that allows people that don’t know code to do it.

One of the first plugins that came out for creating and managing custom post types was Custom Post Type UI. It’s simple, basic, and it works. I’ve used it a lot over time, but (as usual) I recently found something that works even better.

I’d like to introduce you to the Types plugin, which is brought to you by the same people that create and manage the near famous WPML plugin.

wordpress-types-plugin

Custom post types could be used to build a site with recipes, reviews, classified ads – just about anything. But you could also use it to build a featured content area, a portfolio page, or even a slider area for your homepage. For our purposes today we’re going to build a portfolio page.

In the image below we’re starting on the main settings page of the Types plugin, and we’re going to create a new custom post type and taxonomy.

creating-custom-post-types

To add a new custom post type with Types the first thing we need to do is add in our plural and singular name, and then the slug (that will become the URL), and a brief description.

custom-post-type-setup-1

Next you choose the visibility. If the custom post type is visible, users will be able to add and edit items for it in the WordPress admin dashboard. If it’s hidden, you can add data with code, but users will not be able to add or edit content for that custom post type from the dashboard later.

The meta box after that allows you to select existing taxonomies to use with this custom post type. In this example categories and tags exists because their associated with posts. The Map categorys taxonomy is for a maps plugin we have installed in this test site. Most times you won’t want to use an already registered taxonomy for a custom post type – because they will share search results, and identifiers. If you have 100 tags for your posts, then those 100 tags will be available to your custom post types (and vice versa).

custom-post-type-setup-2

Next you can choose the labels for your custom post type. You can accept the defaults, or edit them to your liking.

custom-post-type-setup-3

Then choose display sections. This is where you choose the default meta boxes that will be available on the edit screens when you add a custom post. By default title and editor are checked (because you need them to properly add content). Beyond that you can choose to have commenting and trackbacks on or off, whether to be able to change the author, whether or not to have an excerpt box, whether or not to have a featured image, custom fields, page attributes, or post formats.

custom-post-type-setup-4

In the advanced section you can choose multiple options – keep in mind that generally speaking, these are for advanced users. You can choose whether or not to use permalinks with your new post type (highly recommended that you do). The option after that is cool because you can choose a custom URL format (if you need to). You can choose whether feeds are on or off for this post type, you can choose whether or not it has an archive (whether it has an index page or not), and whether or not (and where) to show in the admin dashboard menus.

custom-post-type-setup-5

In the last section of advanced settings you can choose whether or not to show a UI to manage this post type, whether or not it’s publicly queryable using post_type queries in code, whether to include in search or not, whether or not it’s hierarchical, whether or not you can export the posts, to show it in nav menus or not, whether or not it can be used in query_var, and the default permalink epmask.

custom-post-type-setup-6

After advanced options you have one more meta box – you can choose a post relationship (if you need to). Generally this is something you won’t need to do, but you could define a parent or child for your custom posts. We’ve expanded the Children option to show that you can only choose from current existing post types. The Types plugin has some great documentation, you can learn about post type relationships here.

custom-post-type-setup-7

When you’ve selected the options you need, click the “save custom post type” button and you’ve created your first custom post type.

In the sidebar, you should now see an entry for your new post type name, along with an “add new” option like this:

Now for our example site, we can add portfolio entries under that new post type sections.

This image is an example of the “add new portfolio” screen. You’ll see (click for full image) that we can add a title, content, an excerpt, a featured image, and we can change the order (if we need to).

add-new-portfolio-item

Although we have 90% of what we need to add portfolio items and create a great portfolio page – what we’re missing is a taxonomy (a way to sort them). We chose not to use tags or categories, because we didn’t want them to be mixed with blog posts.

When you to the “Types -> Custom Types and Taxonomies” sub-menu you’ll see this page. You can see in the image below that we’ve created a post type “Portfolio”, the description, that it’s active, but that it has no taxonomy. So we’re going to create one by clicking the “Add Custom Taxonomy” button.

custom-post-types-and-taxonomies

This is the “add new taxonomy” screen. You’ll notice that much of the choices are the same as adding a new custom post type itself. The first thing we have to do is givee our taxonomy a name and description.

add-new-taxonomy-item

Then we choose whether or not the taxonomy will be visible from the wp-admin dashboard (and it probably should be if you’re going to use it).

taxonomy-visibility

Next choose what post type to use the taxonomy for. We are creating this taxonomy “Type” to use for that Porfolio post type – so that’s what we’ll choose. Note here, although you wouldn’t do it very often, you can use the same taxonomy for different post types.

select-post-types

You can also edit the labels for the taxonomy, although much of the time you’ll probably just use the defaults.

taxonomy-labels

Last you have some advanced taxonomy options, some of which are similar to custom post type advanced options, some are new. The first option is important, whether or not to make the taxonomy hierarchical, in the same way you would have say categories, and sub-categories (or keep them flat like tags). You can choose to rewrite them (for SEO value), whether or not to have hierarchical URL’s, to use show_ui, show in nav menus, or use query_var. You can also choose to use show_tagcloud (or not).

advanced-taxonomy-options-wordpress

When you’re done just click the “save taxonomy” button and you’re done. Now we have one new custom post type, and one new Taxonomy (that we’ve tied to it):

custom-post-type-taxonomy

When you go to the custom post section for “Portfolio” in the WP dashboard now, you’ll see a new sub-menu for “Type” there like this:

new-custom-post-type-taxonomy-item

Visiting the manage “Type” screen, you’ll see that it’s just like adding and removing categories for posts. Since we made this taxonomy item hierarchal, we can now make both types, and sub-types.

add-new-taxonomy-types

How Do I Display Custom Post Types on the Website?

Alright, so we created a custom post type on the backend WP dashboard (Portfolio), and we gave it a Taxonomy to sort by (Type), and we can add new Portfolio items until the cows come home. We can even give them an excerpt, featured image, and description. What you don’t know is how the heck to get them to display within your WordPress theme.

By default WordPress can show (normal blog) posts on your homepage, or you can assign that to an inner page. It can show static “pages”, and you can create some type of menu using a combination of either. However, WordPress by default doesn’t know about any custom post types you’ve created – and there is no theme template out of the box for that type of thing (maybe there should be!).

We’re going to once again show you two options to make your new custom post types display on the front end of your WordPress website. The first with code (for intermediate and advanced), and the second with a plugin (for all levels, but especially beginner).

We’ll start with the coding way…

You Need a Custom Post Type homepage

In WordPress by default under “Settings -> Reading” on the dashboard, you can set where the default (blog) posts are shown. In the image below you see you can choose to show on the homepage your latest posts in normal fashion, or a static page.

If you choose static page, then you must choose which page to show for your homepage, and then which page the default (blog) posts are to be shown upon.

wordpress-settings-reading

We showed that so you would be aware that WordPress offers options for where normal posts are shown, but no options for where to show custom posts that you’ve created.

In order to make that happen, we need to create a custom type “homepage” to show the Portfolio posts.

To do that we need a Custom theme page template that we can use.

We’re using the 2011 theme in our example site, we go to /wp-content/themes/twentyeleven and find “page.php” and download a copy and open it in a text editor, and we add this to the top:


<?php
/*
Template Name: Portfolio
*/
?>

Then we save that file as “page-portfolio.php” and upload that saved file to the theme directory of our webserver.

Now we create a new “Page” in WordPress called “Portfolio”, and on the edit scree, as in the image below in the right under “Page Attributes” we assign the “Portfolio” template to be used for this page and “Publish”.

create-portfolio-homepage

Now we have a published page called “Portfolio” that uses the “Portfolio” page template. At this point all it’s going to do is show whatever text or content we add from the edit screen of this page. It won’t show any actual portfolio items (because we haven’t added the code to do that yet).

Before we get started here’s the code we have to start with for page-portfolio.php:


<?php
/*
Template Name: Portfolio
*/

/*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/

get_header(); ?>

<div id="primary">
<div id="content" role="main">

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

<?php get_template_part( 'content', 'page' ); ?>

<?php comments_template( '', false ); ?>

<?php endwhile; // end of the loop. ?>

</div>
</div>

<?php get_footer(); ?>

It’s pretty basic so far, all it does is get any content we added to the Portfolio page itself like this:

portfolio-page1

We’re going to add some PHP code to page-portfolio.php to make our portfolio posts show on that page. You might want to review the official WordPress page on Post Types, and the Codex Example Using Custom Post Types. Another good reference is the official Codex page for WP_Query.

So, we’re going to add this code to our page-portfolio.php file just before the beginning of the loop (that’s the if have posts, while have posts line):


<?php query_posts(array('post_type'=>'portfolio')); ?>

Now save and upload to your server and you’ll see the portfolio entries appear on your portfolio homepage like this:

portfolio-page2

We don’t show the whole page here, but we have 3 portfolio items, and the title and content for each is displayed in full on this page (the default layout). If this is all you want to do in your layout, your homefree with adding that one line of code to your page template (like we did).

However, for us – we’d like to show only excerpts, we need to add a thumbnail for each item, and we want to show the content of the portfolio page itself, and then the individual portfolio items.

We we’re going to remove that line of code from page-portfolio.php, and then after the first loop (to get portfolio page content), we’re going to add a second wp_query loop to get the list of portfolio posts themselves and display them like this:


<?php
$query_default = new WP_Query( array(
'orderby' => 'menu_order'
,'order' => 'ASC'
,'post_type' => 'portfolio' // custom post type name
,'post_status' => 'publish'
) );
if ( $query_default->have_posts() ) :

while ( $query_default->have_posts() ) : $query_default->the_post();

get_template_part( 'content', 'single' );

endwhile;

else : // else; no posts
_e( 'Nothing published so far.', TEXTDOMAIN_CONSTANT );
endif; // endif; have_posts();

wp_reset_query();
?>

This will get us the Page title and page content for portfolio, AND the titles and contents of all the portfolio items we’ve published so far (which is 3). So – we’re closer to where we want to be, but we’re still showing the full posts.

You see in the code above a convention of the 2011 theme (that your theme might and should follow), the use of template parts. It says for get_template_part to use content, single. If you look in the twentyeleven theme directory you’ll find a file actualy called content-single.php that controls this part of the page.

We’re going to save it as “content-portfolio.php” and save it, and re-upload back to the server in the theme directory.

In that file around line 22 we see this code:


<div class="entry-content">
<?php the_content(); ?>

and all we have to do is change content to excerpt like this:


<div class="entry-content">
<?php the_excerpt(); ?>

In page-portfolio.php we also have to edit the line for get_template_part telling it to get our new content-portfolio.php file instead:


get_template_part( 'content', 'portfolio' );

Now we have our portfolio page title and content, followed by our portfolio items (title and excerpt for each). It’s not pretty, but we can add some CSS layout and code later on.

The next thing is to edit our content-portfolio.php file to show the image for each portfolio item. We uploaded and assigned one for each using the “featured image” box when adding the items.

It’s really simple to do this, all we have to do is add this line of code where we want the image to appear in content-portfolio.php:


<?php the_post_thumbnail('thumbnail'); ?>

As you’ll see on the get_post_thumbnail Codex page, you can specify what size of thumbnail to show (we chose the smallest).

In the end we stripped out the 2011 formatting for the portfolio page (so it would be easier to independently style later) and the code for content-portfolio.php ended up being this (for now):


<?php
/**
* The template for displaying content in the single.php template
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
?>

<div class="portitem">

<?php the_post_thumbnail('thumbnail'); ?>

<h1><?php the_title(); ?></h1>

<?php if ( 'post' == get_post_type() ) : ?>
<?php endif; ?>

<?php the_excerpt(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyeleven' ) . '', 'after' => '</div>' ) ); ?>

</div>
<div style="clear:both;"></div>

Now our “Portfolio homepage” is looking a bit more like we want it too:

portfolio-page4

You can see in the image above, we now have a title, and content from portfolio, as well as some basically styled portfolio items, with individual title, excerpt, and featured image for each portfolio post. The Each has a “continue reading” link leading the the individual portfolio single post page – which leads us to the next section…

You Need a Custom Type Single Post Page

By now you should have a much better understanding of all of the theme templates and files involved to add a custom post section to your website. We now know how to create a custom post page template, and then turn that into a custom post type homepage with an archive of the custom posts in it’s own “loop”.

The only thing you haven’t learned yet is how to edit the display of a custom post type single post page. This is the page you see when you click “continue reading” from an excerpt to visit the full post page.

Again – our example uses the 2011 theme, and your theme may be similar in construction (or not). Either way, every theme should have a file called “single.php” in the theme folder.

Download this file in php and “save as” single-customposttype.php, replacing customposttype with your new post type name. We’ll call ours single-portfolio.php as an example. After WordPress 3.0+, WordPress will look for a single post page for your custom post type under single-customposttypename.php, and if it doesn’t find one it will just use single.php. So, once we upload our new single-portfolio.php file to the theme folder on the server, it will now be used for our single portfolio pages.

This is the last missing link to creating an entire custom post type section for your website.

There’s a MUCH Easier Way…

Now that we’ve dragged you all the way through the code, you should understand what it takes to manually setup and display a custom post type in a WordPress theme, on both the back and front end. We have customized countless number of themes in exactly this way over the last few years.

Now, we’d like to introduce you to a new premium plugin called “Views”. The Views plugin is created by the same company that makes the free “Types” plugin. Views makes it possible to create custom post type pages inside a plugin (without knowing any code at all). After seeing all the effort it takes to show custom post types on the front end of a website let me say that again – Views allows you to do this “without knowing any code at all”.

I’m going to walk you through exactly how that works.

Once you’ve installed the Views plugin go to “Views -> New View” in your dashboard sidebar. Rather than learn PHP code, you’re going to point and click your way through creating a “View” that will display your new custom post type the way that you want.

The image below shows the top of the “New View” page, where you have the choice to create either a normal view, or archive view. A normal view is creating a new view to display something, like the view we need to display out Portfolio items. An archive view would be displaying results for an existing WordPress query (which we’ll explain in a minute).

creating-a-view1

When you choose a normal veiw, then click on “edit” to edit the filter and you see this screen. We’re going to choose Posts, and then “Portfolio”, because that’s what we want to display. We’re also going to uncheck the box that says “don’t include current page in query result”, because we want to display the current page content before the taxonomy items (like we did in code before).

We can also chose how to order the posts, we can limit the number of items returned, or choose items to skip. You’ll see at the bottom another button “add another filter term”, which gives more options once you finish this screen for posts or taxonomy.

creating-a-view2

The difference between creating a filter for posts and taxonomy is, the posts filter shows the posts for a post type, the taxonomy shows the taxonomy items. If you want to show both on the same page, you need to create two views, one for each.

creating-a-view3

The “add another filter term” button behaves differently depending on whether you choose posts or taxonomy (different options for each). Basically, you can refine your query even further.

Next you choose your pagination. We want to show all of our portfolio items on a single page, so we’ll choose no pagination.

creating-a-view4

Next you can choose the view layout. We chose grid for our page, but you can also choose unformatted, table, or ordered list / unordered list. You can also choose the number of columns, we chose 4.

creating-a-view5

Then by clicking the “add field” button, you can add any basic or custom fields you’d like to be displayed.

creating-a-view6

We chose the fields we thought we’d be using on our Portfolio page, a featured image, title with a link, excerpt, URL, and the type taxonomy.

creating-a-view7

When you’re all done you just click “save” in the top right to save your new view.

Now that we have a new view created, let’s see how easy it is to insert the custom post type content into our Portfolio page.

We go to the edit screen for “Portfolio” and click the “V” button above the content area toolbar to insert a view, and then click on “Portfolio” under the View section.

The view shortcode is now inserted in our content, and we update and save the page. Before doing this we switched the template back to “default” as we don’t need the special Portfolio template we created earlier when using PHP code by hand.

custom-post-type-shortcode

We view our page for the first time and this is what we have now. The featured image shows, with a clickable linked title, asn excerpt, but then the image URL and type taxonomy just print out below the excerpt. Also we setup the grid for 4 items, and 3 barely fit in the width of the 2011 theme.

custom-post-type-portfolio-page

This is no problem, we just edit our view to remove the things we don’t want, and switch to 2 column display and save to update. No coding at all, the front end page is updated.

insert-shortcode-custom-post-type

About 60 seconds later we were pretty close to what we wanted (in the imge below). We have column style layout, we’re showing a clickable title, featured image, and excerpt.

completed-portfolio-page

In about 10 minutes, we were able to display a custom post type on a WordPress page without using any code, without creating a theme template page, without having to know about “the_loop” or how to display a featured image – we didn’t even need to know any CSS code to switch from default to column based grid view. To do all this earlier in PHP code took about 90 minutes, so using the views plugin was about 90% faster.

The only thing we didn’t do was modify the individual single post pages for the portfolio items, which we can also do with the Views plugin. In future posts we’ll show you how to do that as well. In future posts, we’ll show how to build different kinds of pages and custom websites using Views.

Get more information on the Views plugin here

4SEP
1
Tweet

Where can I get WordPress help?

Posted in: Uncategorized
  |  by: jtpratt

Now that WordPress runs nearly 1/5 of the Internet, there are millions of website owners who need help on a regular basis. It doesn’t matter if you’re a rank amateur that knows nothing about posts, tags, and categories, or a dangerous coder trying to figure out how to widgitize a sidebar – at one time or another everybody needs some type of WP help. We’re going to walk through some of the most used WordPress resources and help communities online (get your bookmarks ready!).

Codex.WordPress.org

WordPress codex

No WordPress resource list would be complete without mentioning the WordPress Codex itself. At one time, this was a scarier type of resource that only geeky coders dared venture into. Now that WordPress usage is so mainstream, you’ll find some great quick links right on the main page like Getting Started with WordPress, and WordPress Lessons. There are more individual pages than ever before, on topics such as creating and using posts, pages, upgrading, troubleshooting, installing, and more.

The traditional parts of the WP Codex are still there in full force, with detailed sectgions on theme development, writing a plugin, and more.

Visit the Codex.WordPress.org

WordPress Official Support Forums

WordPress support

Sometimes the people confuse the Codex with the official WordPress.org support forums. Think of the Codex as more of an “owners manual” for WordPress, and the official suppport forums are more the community. This is where you can ask nearly anything about WordPress, from installation problems, to advanced things like plugins and hacks. You might even be able to find local WordPress meetups in your area. Then again, the Meetup.com WordPress page is great for that too.

Visit the WordPress Official Support Forums

WPBeginner.com

WP Beginner

WPBeginner is a great place to start your WordPress journey. There are hundreds of tutorials, and (as the title says) many of them are for “beginners” and newbies. But don’t let the title fool you, there are code snippets and guides for answers to intermediate and advanced questions as well.

If you’re new, I recommend you check out the beginners guide to lear about categories, tags, gravatars, comments, trackbacks – there’s even a post for the 15 Most Frequently asked Questions by WordPress Beginners.

Visit WPBeginner.com

Stack Exchange

Stack exchange

Stack exchange has only been around a couple years, but has quickly become a popular place to ask quick one off questions that often involve code and code snippets. StackExchange is a website with more than 80 Q&A sub-sections (mostly involving geeky coding things), but the WordPress section is definitely thriving. It’s popularity is probably due to the fact that it’s dead simple easy to use, and questions (usually) actually get answers.

Visit Stack Exchange

Stack Overflow

Stack overflow

Stack overflow looks quite a bit like Stack Exchange, but the difference is rather than having dozens of targeted subsites, all the questions are posted to the main page (and sorted by tag). Most questions get decent answers – and there’s a lot of code snippets.

Visit Stack Overflow

WP snippets

WP Snippets

If you’re a little dangerous with code (or even a hardcore coder), little code snippets can be just the solution or timesaver you need. Last year by accident I found his great little website called “wp-snippets” that does just that. It only does one thing, and it does it well. You go to the homepage and search for or click on a snippet, and you get the code and instructions on how to implement it. If you’re curious – you can spend hours here just looking at code snippets saying “oh boy, that’s how you do that…”

Visit WP snippets

WP Hacks

WP Hacks

As the title implies, the posts and articles at WP Hacks are for, well – hacking WordPress. You’ll find lots of code snippets, explanations, examples, and plugin and theme reviews here. We’ve contributed a few articles over the years to this website, and Kyle Eslick does a great job of providing a generous amount of completely free WordPress information.

Visit WP Hacks

WP Recipes

WP Recipes

At WP Recipes you’ll find some of the best tutorials and articles around. Jean-Baptiste Jung has quite the knack for writing posts that quickly fulfill a need, like – well, a “recipe”. More often that not I read the posts here and come away with “wow, I didn’t know you could do that…”.

Visit WP Recipes

Pro Blog Design

Pro Blog Design

Mike Martin has been running the Pro Blog Design blog for quite a few years, and he has really set the bar high for quality content. Most of the posts revolve around WordPress, many are about code. Expect to learn something every time you walk away from this website.

Visit Pro Blog Design

Honkiat

Hongkiat

Hongkiat as has lots of quality WordPress posts and articles. Many revolve around lists of items, like best themes, best plugins, top error messages, best plugins for this or that, etc. Many are just great tips, like the one we found the other day on How to split large XML files for WordPress import. Sometimes you’ll find code snippets and solutions here as well.

Visit Honkiat

Lorelle on WordPress

Lorelle

Lorelle on WordPress is the only WordPress website on this list hosted at WordPress.com (not self-hosted). Lorelle has been blogging about Wordpres since – well, since WordPress started nearly. There are all kinds of useful and insightful posts about blogging and WordPress here. She’s written the book “Blogging Tips”, and spoken at dozens (if not hundreds) of WordCamps and WordPress meetups over the years. Lorelle is, without a doubt, one of the most well respected and recognizable WordPress bloggers online.

Visit Lorelle on WordPress

WP Hub

WP Hub

WP Hub is one of the newer web sites on this list – but I can’t leave them out because of have such great tutorials. I’m a big fan of “posts with meat” – and I hate overview content with no real value. Like this great lengthy article on “Making a custom comments section for WordPress. It’s a no-nonsense, “here’s the code and this is how you do it – get your hands dirty” type of article. You’ll see most of the articles there are like that.

Visit WP Hub

Speckyboy

Speckyboy

Speckyboy has been a great web design resource for years, and they post a lot of WordPress related content. The link above is to their posts categorized under “WordPress”. Many posts are resource lists and “best of” top 10 type lists, but many are coding and tips that are really helpful. They do really go from basic knowledge to advanced as well (a little something for everyone). Things like How to create a WordPress header template, to more basic posts like How to create a MySQL database in cpanel.

Visit Speckyboy

Digging into WordPress

Digging into WordPress

Chris Coyier and Jeff Star put out a book a few years back called “Digging into WordPress” that was (and still is) very popular. They started blogging WordPress tips to promote the book (in the beginning), and the rest is history. Today this is one of the most popular WordPress resource sites online. From newbies to advanced WP users – everyone can learn something here, they always have great refreshing content.

Visit Digging into WordPress

WP Engineer.com

WP Engineer

Although the posts haven’t been as proliferant in 2012 as they once were, WP Engineer is still a great resource site – with most than 550 posts of WordPress tips and tricks. If you’re looking for something specific, it might be best to search the site, but browsing the archives can make you easily lose a few hours. Loads of great content here.

Visit WP Engineer.com

Conclusion

Still hungry for more? We tried to give you a list of the (still) greatest WP resources websites online. Each year, sites come and go – but if you’re on the hunt for even more content check out this list of 100 WordPress related blogs. Even that list has changed since it was published just a few short months ago – but at you can use it as a reference for new places to check out for sure!

What are your favorite WordPress resource and help websites?

Need WordPress Help? Contact JTPratt Media, we’ve been building and maintaining websites since 1995, and WordPress since 2004.

16AUG
1
Tweet

Drop Shadow Box WordPress Plugin Works Great

Posted in: Uncategorized
  |  by: jtpratt

The Internet has gone through some interesting changes over the last 10-15 years. In the beginning it was all about big flashing, jittering, tickering, content. Then it evolved into Shockwave, Flashy, cartoony, animated designs. It has evolved into a more minimalistic, simplistic design (think “Apple”).

For a long time, websites were just clustered with so much content – at times you were sent into “information overload”. Designers learned the mantra “less is more”, and found that you can do a whole lot with nothing more than well placed whitespace.

WordPress themes have been evolving over time as well, allowing website owners to make their own customizations via a theme admin page. If you’ve installed or used many premium themes in the last 18 months, then you have probably seen a shortcode builder or two. Shortcodes allow you to quickly add or format content in posts or pages. Themes with built-in shortcodes usually allow you to add things like quote boxes, buttons, dividers, and more.

These are really cool, and a great way for a non-technical website owner to professionaly format content without knowing any CSS or code. The problem is, once you do that you’re pretty much married to your theme. If you switch to a new theme, you have to switchover to the new shortcode format it provides – which is usually completely different.

One thing that’s happened over the last year is that, “all in one” shortcode plugins have come out (so you’re protected if you switch themes). You might want to check out:

All in One Short Codes
Styles with Short Codes

Both of those plugins have a nominal cost, but they work great and provide dozens of shortcodes.

Sometimes you might just have a need to consistently do one specific thing. Drop shadow boxes comes to mind, because with a drop shadow box you can instantly highlight content in a post, page, or sidebar. Maybe you need an author box, byline, place to put sponsored content, highlight code, or just want a place for an excerpt or service. You might want to check out the free Drop Shadow Boxes plugin. It does one single thing, and it does it well.

Here are some examples:

This is the default drop shadow box, except the width is set to 100% (default is 300px):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet dui eu ante viverra convallis. Duis leo elit, sagittis vitae aliquam et, gravida et enim. Sed id tortor mi. Nulla fermentum ante a lorem lobortis feugiat. Sed justo lectus, consectetur nec fermentum non, dictum ut neque. Donec lobortis dignissim tortor id aliquet. Donec cursus odio et turpis placerat accumsan. Ut sollicitudin, sapien vitae venenatis fringilla, ipsum nisi feugiat dui, vitae malesuada arcu orci at libero. Integer posuere iaculis justo eget mollis.

In this version the border color is set to blue (the rest is default other than border_color blue):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet dui eu ante viverra convallis. Duis leo elit, sagittis vitae aliquam et, gravida et enim. Sed id tortor mi. Nulla fermentum ante a lorem lobortis feugiat. Sed justo lectus, consectetur nec fermentum non, dictum ut neque. Donec lobortis dignissim tortor id aliquet. Donec cursus odio et turpis placerat accumsan. Ut sollicitudin, sapien vitae venenatis fringilla, ipsum nisi feugiat dui, vitae malesuada arcu orci at libero. Integer posuere iaculis justo eget mollis.

There are various effects, this one has effect set to raised.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet dui eu ante viverra convallis. Duis leo elit, sagittis vitae aliquam et, gravida et enim. Sed id tortor mi. Nulla fermentum ante a lorem lobortis feugiat. Sed justo lectus, consectetur nec fermentum non, dictum ut neque. Donec lobortis dignissim tortor id aliquet. Donec cursus odio et turpis placerat accumsan. Ut sollicitudin, sapien vitae venenatis fringilla, ipsum nisi feugiat dui, vitae malesuada arcu orci at libero. Integer posuere iaculis justo eget mollis.

In this example the effect is set to curled, and rounded_corners are set to true:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet dui eu ante viverra convallis. Duis leo elit, sagittis vitae aliquam et, gravida et enim. Sed id tortor mi. Nulla fermentum ante a lorem lobortis feugiat. Sed justo lectus, consectetur nec fermentum non, dictum ut neque. Donec lobortis dignissim tortor id aliquet. Donec cursus odio et turpis placerat accumsan. Ut sollicitudin, sapien vitae venenatis fringilla, ipsum nisi feugiat dui, vitae malesuada arcu orci at libero. Integer posuere iaculis justo eget mollis.

With this plugin you can make drop shadow boxes in any page, post, or sidebar in seconds. You can control the format, effects, color, alignment – it’s very well thought out.

6AUG
4
Tweet

What’s New in WordPress 3.4

Posted in: Uncategorized
  |  by: jtpratt

wordpress-34-updates

WordPress 3.4 has been out a couple weeks now, and if you haven’t already updated (or even if you have) you might be wondering what all the new changes are. We’re going to walk through the new features one by one so you can understand exactly how they work.

One nice thing about new features is that WordPress now has beautiful tooltips when new features come out, as you’ll see in the next item.

Theme Customizer

WordPress has added a new option under “appearance->themes” called “customize”. This link is available for all themes, and you’ll see a tooltip announcing it when you visit the themes admin page:

WordPress theme customizer

When you click the customize link for a theme you’ll see a nice left sidebar overlay with some options. The first option is completely new – the “theme preview”. If you click ‘customize’ for a theme that isn’t active you can preview what it will look like here. Over the years there have been lots of theme preview plugins available (like Theme Test Drive) – and now this is a built in feature of WordPress (no plugin required).

In a smart move, they also exposed common theme options here as well, like the ability to edit the site title and tagline, navigation menu, and what to display on the front page. You can still edit these items in their original locations under “Settings” in wp-admin, but now you can quickly edit them together here as well.

For themes that support it (like 2010 and 2011) you can also edit background and background color elements. This makes is so much easier for the average person to own a website and customize it on their own without even needing to purchase a theme at all (using built in WordPress themes).

customize wordpress theme

Any Size 2010 or 2011 Headers

If you ever used the default 2010 or 2011 WordPress themes for your website, you know that one pain was the fact that the heaer image had to be a specific size (height and width). Now they are flexible and you can use whatever size you want.

Automatic Embedding

Embedding content is getting easier in WordPress. In the past if you wanted to add a YouTube video you needed to either have a plugin installed (Jetpack, Viper Video Quicktags, YouTube Shortcode), or you had to copy and paste the entire embed code from YouTube in your post.

WordPress now automatically handles certain embeds with just a URL if you have it setup properly.

Go to “Settings->Media” and check the “auto-embeds” option to make this work.

When you check that option it enables a setting inside WordPress that allows auto-embedding of sites that support the “oembed” protocol. This means that you can automatically embed video and content from the following websites:

YouTube, Vimeo, Daily Motion, blip.tv, flickr, Viddler, Hulu, Qik, Revision3, Scribd, Photobucket, PollDaddy, WordPress.tv, SmugMug, FunnyOrDie, and Twitter.

The first thing you should know is – if you have a theme or plugin that does it’s own auto-embedding, you should probably turn that off before enabling this inside WordPress to avoid conflicts. The second is this feature has been inside WordPress since 3.0, but Twitter was just added with 3.4.

The strange thing about this list is that all the supported sites are images or video (other than Scribd which is documents), except for Twitter. It’s kind of cool in a way to be able to embed a tweet with a follow button – but it’s just a really odd feature. I guess time will tell how many people really use it.

HTML in Image Captions

When you add a caption to an image you can now use bold, italic, and link HTML codes. You can only use this feature if your theme supports image captions.

Code Changes

If you’re a developer you will be grateful that wp_query has (finally) been updated to be faster with larger sites. There are also faster translations, and a new themes API. Libraries were updated such as jquery, simplepie (RSS), Plupload, and PHPMailer. WordPress now has an official XML-RPC API as well, with complete support for custom post types and taxonomies.

Have you updated to WordPress 3.4 yet? What are your thoughts?

25JUN
2
Tweet

Is Dreamhost Down (and a bad webhost)?

Posted in: Uncategorized
  |  by: jtpratt

Is Dreamhost down?We have done client website work on hundreds of webhosts over the years, and we fix 3-5 malware infected or broken websites per week. One thing typically remains constant – we get more virus infested and hacked / injected websites from these 3 webhosts than any other:

1. Godaddy
2. Dreamhost
3. Bluehost

Is it irony that those are 3 of the most popular webhosts online? Are these webhosts more insecure or vulnerable than others? Do they get hacked more often? Or are they just a bigger target because they host so many websites?

Personally, as a company that does WordPress development full time we do not like, prefer to work on, or endorse any of those 3 webhosts just because we see more hacked and malware infested websites on their servers than any others. Today is prime example since we were working on a malware infected website on Dreamhost – and were very surprised as to what we encountered.

We secured and hardened a WordPress website that had been infected. We scanned, cleaned, and secured the database, and all theme and plugin files – and then did a complete reinstall of WordPress core files on top of that- AND checked the entire hosting account and reset all passwords. We scanned it for malware once last time and all was clean.

Then about an hour later sucuri.net found malware on one page of the site (SEO spam links). We viewed that page and found nothing. We did a fetch as googlebot in Google webmaster tools and saw a completely different webpage (of spam links).

At this point we knew that there was a redirect going on where the website was showing the googlebot crawler one webpage (with spam links) while visitors were seeing the normal webpage (only). But how?

We checked the .htaccess file (being the most logical place that the redirect would occur) but it was clean. We checked the theme manually, but everything was fine. We even scanned the database manually for rogue code and it checked out. As a last ditch effort we even reverted to site to the default 2011 WP theme and deactivated all plugins – and did the fetch as googlebot again, and it STILL showed the spam links.

In our opinion this could only mean one thing – the website was completely clean, and the redirect was happening at the server level in the apache configuration file (httpd.conf). Being a shared website, the only way to confirm this would be to contact tech support at Dreamhost. So we logged into the client’s account but there was no phone number. We went to Dreamhost.com – but their main website was down for 4 hours this morning (with 500 server errors). I’d say these were both bad signs. We figured there would be some type of live chat on their website (being a huge webhost), but couldn’t find that either.

So after a quick google search we found this on the Dreamhost wiki:

Here at DreamHost we mainly provide support through e-mail. We do however provide an option whereby customers can request a phone call back from our technical support team.

Callbacks are not included with our standard hosting package by default. You can, however, add three callbacks per month to your account for a nominal monthly fee.

Callbacks must be requested through your account control panel. Just log in to your account and click through to the “Support/Contact Support” tab. If you’ve added Premium Phone Support to your account you’ll see a “Request Callback?” checkbox near the end of the submission process.

WOW – really?! Not only was the main Dreamhost website down for 4 hours, but then we found out that you can’t even contact them by phone or live chat AT ALL! Seriously, this is an issue where we’re pretty sure we have verified that one of their shared hosting servers has been compromised, and we can only “submit a ticket” through the client account.

We did submit a ticket (since it was the only option), but still 12 hours later have received no response at all. We also saw from the web searches earlier today, that many Dreamhost websites were down earlier this month as well – maybe they’re just a bad webhost.

We’re often asked, if you don’t like this 3 popular webhosts – who do you like? We prefer Hostgator because they are one of the largest and fastest growing webhosts in the last 5 years, physically located in the US (Arizona), and the tech call center is in the United States (not outsourced). In addition they have full free phone tech support and full free live chat tech support for ALL accounts 24/7. They are also very WordPress friendly, and have much better server configurations for WordPress powered websites.

14MAY
1
Tweet

3 SEO Tricks for Affiliate Marketing Websites

Posted in: Uncategorized
  |  by: jtpratt

If you do affiliate marketing and were looking for some SEO tricks to get you better rankings, this post is definitely for you. It is, however, more of “what not to do” then it is a set bunch of tricks. If you haven’t figured it out just yet – Google doesn’t exactly take too kindly to you trying to trick them (or game the rankings). Your best bet is to play it safe and do more of what they want you to do (for better rankings). The real trick is – knowing what they expect you to do (and keeping up on those expectations and rules).

seo tricks for affiliate marketing websites

Before you get started, if you haven’t already – you should immediately register your website with Google Webmaster Tools. Why? Google has all kinds of information that they can give you about your website, from what your top organic search keywords are – to how often you’re being crawled, and if you have any issues (like duplicate titles or meta info). You can also register an XML sitemap in your webmaster account as well, which tells Google the location of all your pages, and when they were last updated.

So, now let’s get started on some SEO tricks…that will be useful for affiliate marketing websites.

Affiliate SEO Trick #1

Ad Placement and Frequency is Key: One of the things Google said in early 2012 was that they were paying more attention to the frequency and location of ad placement on websites. This includes Adsense, as well as affiliate links, banner ads, ebay auctions, etc.

Google is interested in what’s “above the fold”. An old affiliate website marketing trick was to place Adsense (or other ads) above the fold so it was the first thing visitors saw (rather than the content). The hope was the reader might be enticed into clicking an ad before reading your content. Google wants your website to be known, found, and used for it’s content (not it’s ads). Even if your website has great content, and lots of readers and engagement – if you have one or multiple ads “above the fold” (before the webpage scrolls), you are at risk of either getting a Google penalty or deindexed (and losing your traffic).

If you want to keep your rankings, as well as potentially improve your rankings (as other sites get penalties), you want to make sure that the “above the fold” section of your webpages lead with content (not ads). Move your ads down below the fold, and make sure the search crawlers find and index the content first.

Affiliate SEO Trick #2

Don’t “Over SEO” your pages on-site: another classic SEO trick is to find some great keyword phrase, and then use it in your HTML title, your meta description, your meta keywords, your h1 heading(s), and then a crap load of times in your content (depending on how many words were on your page). Now that Google has figured out how much easier it is to “game the engine” – they very things that used to get you better rankings can now get you penalized and thrown to the back of the index (or thrown out).

Good content will get you far, but not very far is you’re going keyword happy all over the place. It’s too obvious, and too much like the used car sales man jumping on you within 5 seconds of pulling into the lot.

What you really want to do is use your keywords in the HTML title, and maybe your meta description (in the same or different order). Then just be prudent about how and where you use them within your post or page. If it looks like you’re using the keywords too much or too many times, you probably are.

Affiliate SEO Trick #3

Use your images for SEO: something that has worked for years (and still works when you don’t abuse it) is image SEO. For every page or post you create have any image you can use that’s relevant (a featured image). Instead of image.jpg, rename the image using your target keywords. If your target is “gold widgets” then the file name might be “gold-widgets.jpg” or “gold-widgets-for-sale.jpg”. Again – don’t over SEO, you usually just want one image, and the keywords don’t have to be by themselves or the same exact order as your target.

Also, don’t lead with your images, lead with your content (at least a few sentences or a paragraph), and then add your image, and continue with the rest of the content. When you add the image, be sure to use the keywords in some fashion in the alt and title tags. Making sure you don’t “over SEO” you might not to have the exact same alt and title text for an image. Maybe one is “gold widgets” and another is “best review of widgets that are gold”.

Keyword combinations that are different (and in different orders) help you rank for more broad match phrases in search, and also keep you out of hot water and penalties for trying too hard.

Importance

Why are these 3 tricks so important to SEO as it pertains to affiliate websites?

Here’s a graphic to illustrate:

affiliate website google penalty in the raw

I want you to pay close attention to the trend over 30 days in this graphic. In the span of a month the trend of traffic is pretty much the same (and very low). But for 3 days out of the month it’s nearly 4x as much. You might not be aware of this recurring trend if you haven’t seen it before “in the wild”.

We own dozens of affiliate blogs and websites, some get updated regularly – and some we just don’t have time for. Most have a mix of Amazon affiliate links, ebay links, Adsense, or other affiliate offers. Some we’ve had time to upgrade for Google’s new rules regarding SEO, and some we haven’t touched at all.

The ones that still have “SEO issues” (over-SEO, over-placement of ads, above the fold issues), we see have trends like the one above. For a few days out of the month, Google seems to run a “test” to see if the website should be indexed better (or not). They give you some traffic, and it seems like they’re looking for factors like bounce rate and time spent on pages, to determine if people are finding what they’re looking for (or not). If your numbers aren’t any better (than before), they “re-penalize” your site, and then revisit it at a future date (again).

We’ve watched sites go through this phase for months and months, and usually they traffic lasts 3-7 days, and then goes away (anywhere from 1-3 months). Consider this the new trendy version of “the modern Google penalty”. If you don’t want this to start happening to your websites, take the 3 SEO tricks listed above to heart – and start making changes to your affiliate websites (to stay indexed).

7APR
0
Tweet

Where to Find Free Stock Images and Photos

Posted in: Uncategorized
  |  by: jtpratt

free-stock-photos-pd-images

It doesn’t matter whether you have a business website or a blog – at one time or another you find yourself in need of quality images or photos. It seems like there are dozens of stock photo websites now where you can buy images for $1-10 – with istockphoto being (probably) the most expensive. There actually are places where you can find free quality stock images and photos for download – you just have to know where to look.

http://sxc.hu/

The stock.xchng website is probably the most well known place to get free stock photos. To download photos you have to signup for an account, and you have to watch the licenses. Some are free for personal use only. Also nearly every page of results has istockphoto results above and below the free images – as long as you pay attention to what’s free (and what’s not) you’ll be find. The nice thing about this site is that there are lots of very high-res pics for download at no cost at all.

http://www.dreamstime.com/free-images_pg1

Dreamstime sells stock photos, but if you know where to look – they do have a free images section. You have to signup for a free account to get them, but they are free, and there are lots of images

http://stockvault.net/

Stockvault is a great place to find free images if you are using them for non-commercial use (like a blog or personal presentation). This is another website where you have to pay attention to what photos are free and which are ads for pay stock image sites (as the results can be intermingled).

http://morguefile.com/

Morguefile does require and account, but there are more than 10,000 free stock images that are royalty free. This website is a big better than some of the others because the free photos are a big distraction free and it’s much easier to distinguish the free images from the paid ads and results.

http://www.freepixels.com/

Freepixels is a smaller site with a few ads, but the images they do have are easy to navigate and download (with an account). There are aout 40 categories of images, mainly organized in abstract, architecture, nature, objects, food and drinks, travel, and people.

http://www.photogen.com/

Photogen is another smaller site we like because while it does have ads, the image results are actually all free (and not intermingled with paid results). It’s easy to navigate and easy to download high quality images (with an account).

http://www.freeimages.co.uk/

Free Images is another website you should place at the top of your search list because not only do the have 6,000+ images – but you can view, access, and download them hassle free without an account. Searches are lightning fast, the ads are clearly marked in the sidebar, and the images are easily accessible by organized categories.

http://www.textureking.com/

Texture King is a unique site because they have free “stock textures” images. If you’re looking for an overlay, background, backdrop, etc., these are some great images! Another great (nearly ad free) site that does not require an account at all to view and download the images (which are high quality).

http://www.everystockphoto.com/

What makes Every Stock Photo unique is the fact that this site is actually a search engine for other free stock photo sites. It has results form stock.xchng, flickr, photoXpress, and more.

http://www.nationsillustrated.com/

Nations Illustrated has photos from all over the world with about 7,300 pictures (of varying quality). Most seem to be travel related, but you don’t need an account to access them, and about the only ad distraction you have to put up with is adsense.

http://www.publicdomainpictures.net/

Another term for free stock images is “PD” (public domain) and at the Public Domain Pictures website you’ll find all kinds of them. It’s fairly easy to tell the ads from the free pictures. Images are varying degrees of quality, but you can access and download them without an account.

3NOV
4
Tweet

WordPress Access Control Made Easy

Posted in: Uncategorized
  |  by: jtpratt

Have you ever wanted to restrict access to a page or post, or create a members only website in WordPress? There are lots of great plugins out there that you hear people talking about all the time like Amember, S2 Member, Wishlist Member – some are premium (paid) some are free.

We ran into a situation recently where we wanted to restrict access to an entire website – all but a couple pages. We needed to do it quick, didn’t want to create any membership roles, and just wanted the solution “to work” out of the box.

Every now and then a plugin comes along that just fits the bill for a particular solution – and that’s what happened when we met WordPress Access Control.

All you have to do is install the plugin and click the most basic options:

wordpress-access-control

In the image above (click for full view) all you have to do in general options is click “make blog members only”. You can redirect people to a custom login page if you want. Please note here as well that this plugin completely supports custom post types. You can choose do display pages and posts in menus (or not) as well.

wordpress-access-control

Choose the default post state for both pages and posts and quickly choose who can access it (all or particular roles). You can setup specific foles, but it’s completely not required. The s2Member roles listed here are from another plugin we had installed.

wordpress-access-control

Last you have options to show or not show results in search.

So once the plugin is installed in addition to the “default” out of the box options, you also have these options on the top right of every edit screen for pages and posts (above the publish box).

We need this plugin to create a development staging environment for WordPress to do some work for a client. We didn’t want the dev site to be publicly viewable or indexable by search engines, and in about 30 seconds with this plugin installed we had achieved that! Hopefully you find it just as easy to restrict access with the WordPress Access Control plugin.

Do you need custom WordPress functionality within your website? Please view our custom WordPress plugin services.

11OCT
0
Tweet

13 Amazing Featured Content Slider WordPress Plugins

Posted in: Uncategorized
  |  by: jtpratt

wordpress-featured-content-sliders

I can remember a few years back when jQuery sliders and WordPress Featured Content Slider plugins were limited to a few broken versions in the official plugin repository – and the random free code you could copy and paste from the web. Now there are a LOT of great slider and featured content plugins in the plugin directory – in fact 192 of them just for the search term “slider“. Sometimes these are called gallery plugins, carousel plugins, featured articles, featured posts, featured slideshow, sticky widgets, and more. Also, some of these plugins integrate with HTML5, audio, video, Flash, jQuery, and more.

To make your life a little easier – we’ve already sorted through ALL of them, and I’m only going to show you ones that have about a 4 star review or above AND that have been updated at least in 2011, and that have 1,000 downloads or more. We also weeded out any ones that we tried and that didn’t work right, or had problems. We tried each one out in a dev test site running WordPress 3.2, but just check the plugin details (in the future) to see what it’s compatible with – and last time it was updated.

So without further ado, here we go – 13 Amazing featured content slider plugins for WordPress!

1. Featured Articles Lite

Featured Articles Lite has a 4 star rating and more than 10,000 downloads. The fact that it’s called a “Lite” plugin is ironic, since it’s a fancy Javascript slider (uses Mootools) with all kinds of cool features, and has options for light, dark, text, images, and even transparent overlay. This is what you would expect from a content image slider, the ability to add a graphic, heading, text, a “read-more” link, and some pagination back and forth through the items. Check out the screenshots of all the different versions>. It’s a fairly mature plugin, now at revision 2.3.7. Keep in mind that this slider plugin actually uses the content of existing posts or pages that you have published and “features” them in a slider carousel fashion.

Configuration: When you first run the plugin for the first time it asks you who to set what user roles have permission to use it like this:

featured-articles-configuration

You can just leave it as admin if you want, then go to the “edit/add” screen to configure some sliders. Each slider you setup has all kinds of options for you to choose from.

featured-articles-slider-setup

You can see in the image above the first settings are to display the slider in a loop, how many characters to truncate descriptions to both with and without an image, what HTML tags are allowed, how many articles to include in the slider, the display order (newest posts, featured posts, most commented, random order), thumbnail size, slider size, and whether to dipslay thumbnails or author links. Since you can set the size of the slider, you can even add this as a sidebar widget (but more on that later).

featured-articles-slider-setup2

The image above are even more settings, where you can actually choose what content the slider shows (the “Content Settings” section). You can choose whether your featured content will be drawn from post or pages (one OR the other, not both), you can choose the text for the “read more” link, and whether or not the article title is a clickable link.

In the “Display Settings” are you actually chose WHERE the slider will show up. This is particularly handy if you’ve moved your blog to the homepage to an inner page, and made an inner page your homepage. With this feature you can assign the slider to the proper page directly from the dashboard (without having to edit any theme code). Your options are to show the slider on one, none, or any category page, and then any static pages, AND / or your homepage. You can also choose whether the navigation for the sliders is on the bottom, or the sides.

You can choose whether or not to have a read more link, whether the article title is clickable:

featured-articles-save-slider

As if that weren’t enough, you can give your slider section a title, and then select from one of the 4 included themes. You can also choose the JavaScript settings for the duration of the slide effect, fade distance, whether the slides enter from the left or top, whether navigation click stops auto sliding, and whether users can use a mouse wheel for navigation in the sliders. You can choose to autoslide every xx seconds as well.

The fact that this plugin allows you to add a featured content slider to your site without having to edit any theme code at all makes it one of our top picks – and we hadn’t even mentioned that it comes with it’s own sidebar widget! Keep in mind that you have to setup a slider with a widget the same or less than your sidebar in order for it to work. But it’s so easy to drag the “FA Lite Slider” to your sidebar and then just a slider (once it’s created). If you absolutely have to manually add a slider to a specific section of your site (like the header or footer, or very custom page) – hey, that’s an option too! There’s not much you can’t do with this thing.

Download Featured Articles Lite here.

Here’s a shot of the light style in action:

featured-content-slider

(click image for full size)

2. Featured Content

Featured Content is a plugin that barely breaks our rule of 2011 updates (it was last updated on Dec 15th of 2010), but it has a 5 star rating and has been downloaded 3,000+ times. We decided to list this one because it’s unique, and you’ll see why.

This plugin creates a custom post type for the featured content it displays and allows you to feauture content in your sidebar or pages that either open posts directly, or display in cool little modal windows.

featured-content-shortcode

(click image for full version)

in the image above you see some featured content images that were displayed using shortcodes.

featured-content-sidebar

The image above is how it looks in a sidebar.

featured-content-modal-window

(click image for full size)

The image above is how the featured content displays in the modal window (if you use that option).

Configuration: To setup the featured content areas this plugin uses either widgets or shortcodes.

featured-content-slider-setup

In the image above the general features (settings) are the choice of index slude, indentifier, permalink structure for the custom post types, plural and singular name, and you can choose to enable thumbnails, taxonomies, custom fields, comments, trackbacks, or revisions (or not).

This plugin is really cool, but we would say it’s for WordPress users on an intermediate to advanced level. Also, it’s only at version 0.3.1 (but did seem to work well).

Download the Featured Content plugin here.

3. WP Featured Content Slider

Well, the first thing we liked about the WP Featured Content Slider was that there was a demo for us to check out. That’s always a plus! It does support manual insertion of the slideshow, and supports shortcodes as well. It has a 4 star rating on 45,000+ downloads, and is in version 2.1.

featured-content-slider

(click image for full version)

The image above is what the featured content slider might look like in your theme.

featured-content-slider-setup

Configuration: The image above are the settings for this plugin which seem a bit basic compared to some of the others. You do get 4 effect options, and you can set height, width, background color, bg color, border, text color, and image width and height (which is great).

What’s missing here are the options for how many posts or pages to use as “featured content” (and which ones to use).

featured-content-slider-page-options

That’s because the option of what pages and posts to include are actually on the post and page edit screens like in the image above.

set-featured-image

In the image above you’ll another item on page and post edit screens, the ability to set a “featured image” (for that page or post to be in the slider).

The nice thing about this plugin is it’s easy to use without a ton of options to worry about. It’s easy to add the slider to any page or post using the [featslider] shortcode, but it couldn’t be any bigger than the content area of that page (which is a drawback). You can manually add the slider with the PHP code, and there doesn’t appear to be any widget support. All in all, if you need a simple slider, this can do the job.

Download WP Featured Content Slider Here.

4. Feature Slideshow

Feature Slideshow has 9,000+ downloads and 4 star review, now in 1.1.1-beta. It’s easy to choose the size of the slideshow, and this one (unlike others) has the ability to choose the number of posts to be displayed or the ability to use specific post categories OR tags. It has automatic scaling and cropping of images, and you can see a demo here.

feature-slideshow-demo

(click image for full size)

You can see in the demo above that this is the type of featured content slideshow found in may popular premium themes. It’s nice because it has the links and text in a shaded area to the left, with an arrow pointing to the image on the right.

Configuration: Basic options are broken down into visual settings and post settings as follows:

feature-slideshow-options

You can set the slideshow widget, list width, overlay text size, title color, transition interval, number of posts to show, and post type (posts or pages).

feature-slideshow-advanced-settings

(click image for full size)

There are also some advanced settings, where you can choose the order, child ID’s of parent pages, and specific categories.

When you setup a slideshow, all posts to be displayed must have a featured image. You also have to enter a short description in the “feature slideshow options” metabox on the post edit screens. There is no widget support, you can add slideshows using shortcodes or manual PHP insertion into your WP theme. This plugin is best used by WP users with intermediate to advanced experience levels.

Download Feature Slideshow here.

5. SM Sticky Featured Widget

SM Sticky Featured Widget is only a widget, but if you only want to feature content in a widget – this may be just what you need! You can use thumbnails (or not), and has the cool option to display “category related sticky posts” when the widget appears on category pages. You can make this thing work quickly just by making posts “sticky”.

sm-sticky-featured-widget

The example above is what it looks like with thumbnails in a WordPress site using a classified theme. The plugin has 2,600+ downloads and is in version 1.1.0 with a 4 star rating. We won’t go into any specific configuration options, it’s pretty easy to use.

Download SM Sticky Featured Widget here.

6. Promotion Slider

We always like things that have unique applications, because when it comes to featured content, sliders, and carousels – the one thing they all tend to have in common it that they’re all so similar. You’re about to see some examples that might change your mind about that – and give you some new ideas. The Promotion Slider plugin has had 37,000+ plugins for version 3.3.1 with an average rating of 4 1/2 stars. They even have a cool demo video.

The main features this plugin boasts are ad management from the dashboard, creation of unique pages for each promotion, a jQuery animation that’s actually “SEO friendly”, default styles, the ability to link to external URL’s (w00t!), the ability to display third party ad code, title and/or excerpt support, the ability to add multiple sliders to one page without conflicts, and works with custom post types.

Let’s look at some example screenshots:

promotion-slider1

(click image for full size)

Wow, not your standard slider – huh!

promotion-slider-settings2

Examples with ad image, text title, and link.

promotion-slider3

(click image for full version)

The example above has cool thumbnail image navigation!

Configuration: Let’s fire this thing up and see what it does!

promotion-slider-sidebar

One installed you’ll see the options appear in your sidebar like the image above. If you’ve used WP 3.0+ custom post types, you’ll realize right away that the ability to manage promotions and add new ones are just custom post type screens (awesome!).

add-new-promotion

(click image for full size)

The screen above is the add new promotion edit screen.

promotion-slider-options

The image above is the area below the content area on the add new promotion page. You have the ability to change the linking behaviour (open in same page or new window), and you can set the link to an external URL if you don’t want to use the internal post link page (awesome!). Or you can even check the box to “insert ad code”, and leave the add new promotion content area blank, and add some ad code in here (like adsense, VERY cool).

use-content-delivery-network

If THAT weren’t enough – there’s even one more option field to serve the URL of the image (if you’re using one) from a custom content delivery network!

promotion-slider-category

The Promotion Slider has it’s own category screen, because the items are custom post types – you can set distinct categories for them (completely separate from post categories!). That means you can bin your ads in all kinds of different new ways for display.

promotion-slider-options1

The first section of Promotion Slider’s options are “Slider Settings”. You can choose to start on the first slide (or a random one), automatic slide advancement can be on or off, and you can set default thumbnail size.

promotion-slider-settings2

The second set of settings for Promotion Slider are for display. You can choose from 5 types of slider navigation, 3 kinds of title display, and whether or not to display the excerpt in the slider. You even get advanced settings for loading the javascript in the header of footer!

In the end, we found this plugin pretty robust for all levels of WP experience. We LOVE the fact that you can (finally) create a slider without having to use normal posts and pages! The ability to use custom post types and their own categories is a God-send. Also, the added ability to point to external links and use third party ad code, again – WOW! It has a great shortcode, with 13 different additional attributes you can use with it, see the FAQ for full info. You can even use the shortcodes in a text widget!

The only bad thing we can say about this plugin was there wasn’t a lot of options for styling the display – HOWEVER, in the FAQ there’s info about how to give a slider it’s own HTML id so you can style it any way you want. So that’s our only complaint – that there aren’t more display style layouts to choose from (out of the box). If that’s our only complaint, well I guess that isn’t so bad, is it?

Download Promotion Slider here.

7. Smooth Slider

Smooth Slider has a 4 star rating and more than 102,000+ downloads for version 2.3.5 – so it’s pretty mature (and widely used).

At first we didn’t know why – because the display is pretty basic:

smooth-slider

(click image for full size)

Then again, if something is simple and works, it’s popular right? What you see is what you get, an image, title, description, and some basic navigation. You’ll also see in that image a link back to the plugin site, but there’s an option to disable it Misc settings.

Configuration: One thing we liked about this plugin was the fact that as you build a slider, there’s a “preview” pane at the top of the page – so you can see what the thing is going to look like in advance. We wish all the slider plugins had this. This pluggin does allow you to setup multiple sliders, and has the ability to add them to pages with either a shortcode, or manual PHP code.

smooth-slider-box

In the image above you see the slider box options. You can change the slide interval, transition speed, number of posts to show in the slideshow, background color (with color picker), slider height and width, and border color.

The navigation button options are pretty exhaustive, you can show next and prev, nothing, numbers, you can even choose the image size or custom text or HTML (for your own images). We hadn’t seen that many options for navigation in the other plugins.

slider-title-post-title

For the slider and post title options you can choose text, where to get the title from (slider name or default title), font face, size, style, etc.

thumbnail-image-options

In thumbnail image options you can choose how to pick images, how to align image, the image size and max height, border thickness and color, and even a checkbox to convert smooth slider to an image slider (with no content).

slider-content

In the slider content options you can choose the font face, font color, font style, where to pick content from (content, excerpts, custom fields), and max content size in both words and characters.

misc-slider-settings

The Misc slider settings allow you to turn off the link back to the plugin on the front end display, offer the ability to retain certain HTML tags, the “read more” text, who can add posts to the slider, randomization, text to display for browsers without Javascript support, whether or not to allow shortcode support, styles to use, whether or not to enable the multiple slider (per page) option, and even an option to enable or disable the “flash of unstyled content” you see on so many pages loading sliders.

I guess NOW we see why a plugin that at first seemed so basic, had so many downloads! The configuration options are nearly endless! You could use this plugin with any level of WP experience, but just be prepared for the myriad of setup options. If you want fine grained control to configure EVERYTHING (and you’re ok with a basic display) then this is the plugin for you.

Download Smooth Slider here.

8. Easy Nivo Slider

Next we look at Easy Nivo Slider, which has a 4 star rating on 11,000+ downloads in version 1.6.1. Like some of the other sliders which we chose for various reasons, Easy Nivo has some unique configuration options of it’s own. Like the ability to add the slider to a post or page with no coding using a button on the WP visual editor toolbar! Also, you can build sliders from post images, featured images in posts, or from NextGen galleries. In addition, it uses WordPress native thumbnail supporrt, to make sure all the images fit the sliders you build.

One thing we should tell you is that a lot of the slider plugins just build upon an already existing open source jQuery slider. “Nivo” is an open source jQuery plugin, so there are multiple WordPress slider plugins with “Nivo” in the name (that go by all kinds of different names). So follow our download links, or be sure to explicitly search for “Easy Nivo Slider” to install the one we’re reviewing here.

Another thing is, (this) Nivo slider is primarily for images. There’s caption support, but you’ll see in the following examples how that looks:

novi-slider-images

(click image for full size)

The plugin has slider settings for a first slider, second slider, and even a widget slider:

easy-nivo-slider-settings

First slider options are above, with size, number of slices, linking, opacity, navigation, and “jump to slide” navigation.

easy-nivo-slider-preview

This plugin also has a “preview” screen, where you can also choose image selection and slider settings. You can choose one of 14 different transition options.

easy-nivo-slider-settings2

On the settings screen you can choose whether or not to activate NextGen gallery supporrt, use debug mode, and how to load the code.

nivo-slider-visual-editor

(click image for full size)

In the image above you can see where the button is to add a slider from the visual editor on the edit screen for posts or pages.

easy-nivo-slider-post-options

(click image for full size)

The image above shows the options for adding a slider to a post – where you can chose slider size, transition, speed, and pause. There are 2 other tabs for featured images slider options, and NextGen Slider options.

All in all this is a great little plugin that any WP user of any experience level could use. Just keep in mind it’s basically for images – but the NextGen gallery support is nice, and the ability to add from the visual editor (without any coding) EVEN nicer!

Download Easy Nivo Slider here.

9. NextGen Gallery Sliders

Ok, since the last plugin had NextGen Gallery support, and there are a lot of NextGen Gallery slider plugins out there – let’s just give you some basic options (if that’s what you’re looking for).

There’s JJ NextGen JQuery Slider:

jj-nextgen-slider

Here’s NextGen Image List

nextgen-image-list

Also JJ NextGen jQuery Carousel

nextgen-carousel

10. UnPointZero Slider

The UnPointZero Slider has a 4 star review on version 2.1.5 with 6,000+ downloads. It has fully customizable CSS, and you can set slider navigation with arrows, numbers, or even advanced options with thumbnails. It has shortcode support and you can use manual PHP code insertion where you want it to display.

We included it because the layouts are what you would come to expect from a slider, like these examples:

unpointzero-slider1

(click image for full size)

The image above shows a slider with Title and overlay text, and the navigation are thumbnails with text to the right.

unpoint-zero2

The image above is a slider exaple with just image and overlay, and simple arrow based navigation.

unpointzero-slider3

(click image for full size)

And this example is an image with overlay text a bit smaller, and number based navigation in the top right corner.

Configuration: On the settings page for Unpointzero slider, the first thing you see is the “Embed Code and shortcode” section. It’s very refreshing to see this right on the settings page, so you don’t have dig through a readme file or plugin page to find the right PHP code or shortcode to use to insert the slider. If even shows the shortcode or PHP code to insert multiple sliders.

unpointzero-general-options

The General options for the plugin are whether to use posts or pages, and after that there’s a unique feature where you can use either the page/post names OR ID numbers to be included in the slider. The next section is “only for POSTS” – where you choose the number of posts to be displayed. You can choose all posts (not recommended), 10 posts, 20 posts, or auto.

unpointzero-display-settings

In display settings you can choose the number of slides, characters for the title and description, and width and height of the front image and small images.

unpointzero-slider-style

You also get to choose whether or not to display thumbnails in navigation, the title or description, mouseover actions, and even a special setting for displaying non-Latin languages (like Hebrew, Chinese, etc.).

The Unpointzero slider plugin is pretty intuitive with standard options. Normal posts and pages are used as the “featured content” for the slides. This plugin is best used by users with intermediate to advanced WP experience levels. One thing we didn’t particularly like was that the plugin documentation and settings page don’t really say where the images for the slides come from. We did finally figure out that it’s the post featured images:

set-featured-image2

We kind of figured that, but the plugin documentation should have said it (for people that don’t know). You just have to set a featured image for each post being included in the slider. All in all, if you want a slider that looks like one of standard slider design examples we showed – this will do the job.

Download Unpointzero Slider here.

11. jQuery Slider

The jQuery Slider has 5 star ratings for 14,000+ downloads in version 1.3. This plugin is very basic, but does what’s expected. It produces a nice looking featured slider with some overlay text like this:

jquery-slider

In the top right it displays an active timer before the next slide displays in a “0-60″ circle fashion. You can see the demo here. You can insert the slider either via shortcode on PHP code.

Configuration: The options are basic, but the plugin works well.

jquery-slider-options

You can see in the options above you only get 5 things, width, height, pause on hover, show pagination, and show navigation.

This plugin uses custom post types to setup your slides, which is a great feature we saw in a few earlier examples. Sometimes you just don’t want to use your existing posts and pages as featured content, and the option to setup custom posts for the slider is really great.

jquery-slider-setup

The image above is the example of the slider management screen.

jquery-slider-editing

(click image for full size)

The image above is simplicity at it’s best. You just give the slide a title, and description, and then set the featured image. Having exhaustive options is great (when you need them), but this is a plugin that we would feel comfortable telling users with beginner WP experience levels to use.

With the shortcode you can add the slider easily to a post or page, or even in a text widget. There aren’t a ton of layout options, but sometimes you just don’t need all that.

Download jQuery Slider here.

12. Related Posts Slider

We included the related posts slider because it does something very unique. It adds a slider beneath your content for “related posts”. It has both shortcode and widget support. It can show a slider either in news style, or horizontal carousel format. You can add as many related posts as you want, you get complete CSS customization (with 2 styles in the box), and it’s even compatible with the YARPP or WordPress Related Posts plugin.

Here’s the example of news style format:

related-posts-slider-example

(click image for full size)

The points on the top and bottom show which elements are customizable.

Here’s the horizontal carousel format layout example:

related-posts-slider-example2

(click image for full size)

This is a very nice compact slider design with thumbnail and title, and left and right navigation arrows. This is a very cool layout, and something you normally only see on high-end news sites.

Configuration: To use this plugin you first have to install the YARPP or WordPress Related Posts.

related-posts-slider-options

In the image above for overall slider settings, you see you have to choose which plugin you’re using and the slider format (default or carousel). Then select a style, number of posts, slider height, background color, foreground color, background for hover, text color for hover, outer border thickness, outer border color,and inner border thickness, and inner border color.

slider-title

The the slider title options you can set the text, font type, font size, weight, and style.

thumbnail-image-settings

In thumbnail image settings you can use a custom field or key namefor images, or featured images, but there’s even an option to consider images fromm within the post. This is a great featured because you can set it to use the post image (if there is one), but the featured image as a backup. So if you’ve got 300 posts and have been blogging since before there was “featured images” in WP 3.0+ – you can use both old and new posts. You can also choose alignment, image width, and width and height.

list-section

In list section settings you can choose the font face, color, size, weight, and style – along with max words in the title.

preview-section

For the preview section you can choose title font, color, size, weight, style, the same for content font, where to pick content from (excerpt, custom fields, or content), max words, whether or not to show read more (and the text for it), what HTML to retain, and whether or not to open links in a new window.

The last section of options for the Related Posts slider is “Manual Insertion”:

manual-insertion

This is something we’d like to see ALL the slider plugins have, the ability to insert the slider before the content, after the content, or manually (quickly and easily). You can also choose to turn the link back to the plugin author on the front end on or off.

This plugin is unique and has great options. We don’t have to show how to add related posts to the slider, because the YARPP or WordPress Related Posts plugin(s) do that automatically, and the settings page determines how those posts are displayed. Although there are a ton of setup options, this is a plugin that someone with any level of WP experience could setup and use.

Download Related Posts Slider here, or install from your WordPress dashboard.

13. Content Slider by SlideDeck

We saved the Content Slider by SlideDeck for last because it’s very unique. It has 92,000+ downloads on a 4 star review of version 1.4. This is the only plugin we listed that has both a Free and a paid Premium version, and we’ll go over those options.

The things that make the Content Slider stand out are that you can add images, video, or mp3 audio to the slides, it has a drag and drop interface, you can use the built-in WordPress “Kitchen Sink” editor to format the slides, you can preview the slides as you’re building them, and it’s SEO optimized. The PRO version has touchscreen support for Apple devices, you can create vertical slides, you can apply skins and themes, and you can create smart slidedecks from RSS feeds.

So, let’s look at some exampe layouts – shall we?

content-slider-example

This is an example slider with image, title, content, navigation – as you can see it’s beautifully styled!

content-slide-example2

(click image for full size)

You can see a full width example slider above with navigation, and overlay title and text in a smoky strip at the slide top.

Now check out THIS example:

content-slider-example3

(click image for full size)

This is an example of a slider that’s accordion style with 4 sections. Click on each section to expand. This first slide actually has a video in it that you can play IN THE SLIDER!

content-slider-video

(click image for full size)

The image above shows what happens when you click play on the video (the screenshot is of the actual video playing). The rest of the slider goes away, and you get video controls and a “back” button. How awesome is that?

content-slider-within

(click image for full size)

Pay close attention to the example above because that slider example is NOT what you think it is. If you look where my mouse pointer is on the left, you’ll see the vertical strip with the 4 icons. EACH ONE of those icons is clickable AND if you click any one of them, it loads a new slide WITHIN THAT SLIDE! If you think about it, it’s actually a featured content slider WITHIN a featured content slider!

content-slider-popup-window

(click image for full size)

In the example above it’s actually a slide with 4 clickable areas. I clicked on the + icon in this example – which displays the popup as shown. But that’s not all…

content-slider-video-popup

(click image for full size)

When I clicked the play button icon in the example image above, the popup actually has a VIDEO in it that loads on the page without reloading (from within the slider). OMG! Talk about a geeky heart attack! View all those examples here.

Configuration: Now (of course) all that cool vertical slide stuff is only available in the PRO version. So the main questions are – how easy is this thing to setup, and what can you do with the free version out of the box? The PRO Premium version is $99 for a single site, so let’s see what we can do with the free open source version from the WordPress repository.

There are basically 2 ways to add slides, you can “add new” or “add smart slide deck”.

add-new-slidedeck

To add a new slide deck, start by giving it a name, and then go through and give each slide a title, and some content. You can see you can format the content any way you want with a visual or HTML editors, and ability to upload images, or even upload and set background images.

slidedeck-options

In the “add new” edit screen you have slidedeck options to autoplay, loop, show active corner indicator, allow keyboard navigation, or mouse scroll wheel. You can hide the title bars, choose animation speed, the skin (7 styles), and what slide to start on.

slidedesk-reoder-slides

You can also reorder the slides with drag and drop from the edit screen as in the image above. The only weird non-intuitive features is that the “add another slide” button is within the re-order slides widget (only). So if you don’t know how to add another slide, you may spend a few minutes looking.

slidedeck-theme-code

You can get the theme code snippet (for manual insertion) from the slide edit screen. Those were some great options for adding a slide deck. Now let’s take a look at adding a “smart slidedeck”.

add-smart-slidedeck

First you give it a name, and then choose a skin style.

smart-slidedeck-options2

Then you choose the total numbber of slides to display, playback options, type of content (recent posts, featured posts, popular posts, filter posts by category), you can validate images, and choose the navigation type.

So with the Content Slider plugin you can actually create a content slider that has unique content all it’s own (we showed that in the “Add new” example above). Or, with the smart slide deck you can actually create a content slider from your existing content. In all the previous plugins we tested they either used existing content, or had the ability to create custom slides. This is the only plugin we found that does both.

When you create a smart slidedeck, you can even preview it lightbox style:

smart-slidedeck-preview

(click image for full size)

AND, you can even change the slide dimensions LIVE in the preview!

Once you add a new (custom) slidedeck, or create a “smart” slidedeck, you can easily go back and edit them from the edit screen:

edit-slidedecks

(click image for full size)

So, with the Content Slider plugin you can add as many slidedecks as you want. So far we could do a TON of stuff with the Free open source version. What we haven’t looked at yet was how to add a slider into your site (other than the manual PHP code snippet we got on the edit screen).

If you go to any normal post or page edit screen in your WordPress dashboard you’ll see this box above the “publish” section on the right:

content-slider-add

You can choose the slide title (if that post or page is going to be a slide), and you can check the checkbox to “feature this post in smart slidedecks”.

At the bottom there’s also a button to “Insert SlideDeck”.

insert-content-slider

(click image for full size)

When you click that button you get the dialogue box above, where you can choose to insert any of your existing slidedecks, and you can even set the dimentions right there!

embed-a-slidedeck

Once embedded the shortcode is automatically added to your post or page in the edit box, as in the example above. We also used that image to show that if you’re using the visual editor there’s also a bright colored “SD” icon on the toolbar to embed a slidedeck as well.

So, while we found the free version to be incredible for the content slider – you probably want to know what’s missing that only comes with the PRO (paid) version. What you get with PRO is support (yay!), it’s unbranded, you get vertical slide capability, RSS Feed Smart SlideDeck capability, Background image support, and API capability (for the programmers in the crowd). Oh, PRO has touchscreen support as well.

In our opinion, the Content Slider is the most intuitive, has the most features, and the free version will work for most uses. It could easily be setup by users with any level of WordPress experience, and inserting sliders to your site is a breeze. This plugin is very mature, well thought out, and the only one that you can either create sliders with custom or existing content, AND use audio, video, images, AND text from within the slides.

Download the free open source version of Content Slider here, or install from your WordPress dashboard.

Conclusion

We covered some amazing WordPress slider plugins, and there should be one there for about any use you would have no matter what your experience level. Just make sure to choose one you feel comfortable using, that meets your needs. Figure out in advance if it’s better (for you) to use a featured content slider that uses existing post and page content, or that creates distinctly different content to be used exclusively for the slider. Every one of the plugins featured is completely free, and can be installed from the “Plugins->Add Plugins” page of your WordPress dashboard from the official repository. Have fun!

JTPratt Media is a web development company in the midwest building custom themes and custom WordPress plugins.

21JUN
6
Tweet

WordPress 100 Things: WordCamp Columbus

Posted in: Uncategorized
  |  by: jtpratt

WordPress 100 Things Today I’m giving the presentation “100 Things You Should Know About WordPress” at WordCamp Columbus. I’ve given this presentation once before, with Anthony Montalbano (founder of WordCamp Detroit) at WordPress Ann Arbor. The previous 100 Things You Should Know About WordPress page is here.

wordcamp-columbus

Basically it’s 10 slides with 10 things on 10 topics that are about or affect WordPress. Tips, tricks, and best practices are presented – in kind of a rapid-fire format (lol). Some of the content would be more beginner or intermediate – but there is definitely points and nuggets of wisdom for all levels of WordPress experience.

The 10 Topics are (drumroll please…)

1. Webhosting and WordPress
2. Setup and Installing WordPress
3. Choosing a WordPress Theme
4. WordPress Security
5. Default Plugins to Install
6. Content Creation
7. Theme Modification
8. Fundamental Plugins to Install
9. Content Organization
10. WordPress Resources

The full slide deck for the presentation is on SlideShare – feel free to download, embed on your own website, etc.

Wordcamp columbus-100-things
View more presentations from John Pratt

In the presentation there’s one slide for each of those 10 items, and of course everybody will want the links and resources that go along with each. So, each of the 10 above is linked to the appropriate content page – so you can get everything you need (if you were there in person, or even if you weren’t!).

17JUN
0
Tweet
Page 1 of 32 12345...»

Recent Posts

  • WordPress Custom Post Types on Steroids Tutorial
  • Where can I get WordPress help?
  • Drop Shadow Box WordPress Plugin Works Great
  • What’s New in WordPress 3.4
  • Is Dreamhost Down (and a bad webhost)?
  • 3 SEO Tricks for Affiliate Marketing Websites
  • Where to Find Free Stock Images and Photos
  • WordPress Access Control Made Easy

JTPratt Media

  • JTPratt Media

  • Address:
    210 Comstock, Adrian, 49221
  • Province/State:
    MI
  • Country:
    USA
  • Phone:
    +1 (267) JTPRATT
  • Hours of operation
    Mon-Fri 9am to 6pm

Testimonials

Your quick response helped save my Wordpress blog from being overwhelmed by spam attacks. Almost immediately Google restored our page rank.

Irina Wardas HHC
Natural Counselor

View All

Recent Posts

  • WordPress Custom Post Types on Steroids Tutorial
  • Where can I get WordPress help?
  • Drop Shadow Box WordPress Plugin Works Great
  • What’s New in WordPress 3.4
  • Is Dreamhost Down (and a bad webhost)?
  • 3 SEO Tricks for Affiliate Marketing Websites
  • Where to Find Free Stock Images and Photos
  • WordPress Access Control Made Easy

Follow Us on Twitter

  • RT @UltClassicRock: Follow @UltClassicRock & @guy_speed & RT this to win a $2,400 Stevie Ray Vaughan Fender guitar: http://t.co/ ...2 months ago

  • Secrets integrating social media in #Wordpress http://t.co/b2sTPtgf3 months ago

  • Easy Functions.php #WordPress hacks: http://t.co/bAwyeNa53 months ago

  • #WordPress security made easy: http://t.co/4ytlOerF4 months ago

  • Looking for front end web developer with mobile experience full time onsite SE MI NW OH If that's you (or someone you know) contact me ASAP5 months ago

  • RT @jordanmoore UXArchive looks like it’s going to be a neat resource documenting user flows — http://t.co/Rcz0MSFv /via @SidebarIO5 months ago

Copyright © 2013 JTPratt™ Media. All rights reserved.  Privacy Policy | Disclosure Statement
Top