New at Doc’s Political Parlor: Me

I’m happy to say that I’m a new contributor at the premiere blog for Alabama politics, Doc’s Political Parlor & Home of Lawn Mower Repair. Danny does a great job over there, and I’m excited to help out. It’s a great opportunity to write about what I enjoy, and have people actually read it : )

I will be continuing the Alabama 2010 series that I started here at the Parlor. I will link to them from here as they come out.

To see all of my posts, check this out. To subscribe to the Parlor feed, go here. You can also follow @PoliticalParlor on Twitter.

Alabama 2nd Called a “Must Win”

Alabama 2nd Congressional district mapPolitico has a story out highlighting 50 must win House seats for the Democrats to retain control or the Republicans to gain it.  Politico calls this list, ” a roster filled with freshmen who benefited from Barack Obama’s coattails.”  Alabama’s second district race between Democratic freshman incumbent Bobby Bright and GOP challenger Martha Roby has made the list.

Politico details the Alabama race like this:

ALABAMA 2ND DISTRICT: Rep. Bobby Bright has done virtually everything possible to distance himself from national Democrats. But in this Republican-oriented seat challenger Martha Roby is hammering him by citing his vote for Nancy Pelosi as Speaker.

The race will definitely be a tough fight for Bright. There is a lot of anti-incumbent sentiment right now, and generic congressional democrats are polling at only 36% nationally.  I assume this is part of why I’ve not seen the word ‘Democrat’ on any campaign material or on his website, and he touts himself in his most recent ad as being simply an, “independent conservative”.  We’ll have to wait and see if distancing himself from the Democratic party is enough to fend off Roby in November.  Sources I’ve seen are all calling it a tossup.

If you live in Alabama’s 2nd district, have you decided?

Location of Vermilion 380 Oil Rig Explosion

An oil platform has apparently exploded while out of operation south of Vermilion Bay, Louisiana.  See the picture below for the approximate location in comparison to the Deepwater Horizon Spill.

Multiple sources are saying that 13 people were on the platform, and one person is injured.  The Coast Guard is working to put out the fire.  Mariner Energy is the rig owner.  The water depth is approximately 350 feet.  The MSNBC is reporting that the coast guard has informed them that the platform was not a drilling platform.

Location of Vermillion 380 Oil Platform
Approximate Location of Vermilion 380 Oil Platform compared to DeepWater Horizon

Alabama GOP Sets Tone for November

Alabama GOP billboard
Alabama GOP billboard

The Alabama GOP has put up new billboards in the effort to take over the state legislature in November.  They are staying with the slogan announced in June that says, “136 years is long enough.”  They are asking people on 136years.com that are sick of, “corruption, wasteful spending and higher taxes by the Democrats” to sign a petition to elect Republicans.

The video on the website starts off with an entertaining bit about how, “in 1874, Hawaii was still ruled by a king. In that same year democrats took control of the Alabama house and senate.”

sidenote: With a quick Wiki of Hawaii politics in 1874, I found that the man pictured in the ad was the second elected king of Hawaii, David Kalākaua.  He was elected that year after his predecessor didn’t name a successor to the throne, and it turns out that the “1874 election was a nasty political campaign in which both candidates resorted to mudslinging and innuendo.”  I guess politics really haven’t changed that much since then… but, I digress.

It also targets democrats for failing to pass ethics reform, raising taxes, and giving themselves 62% pay raises.  You can watch the whole thing below, but I find it interesting that it closes by asking us to, “send Obama, Pelosi, and the corrupt democrats a message… that 136 years is long enough.”  I think the Republicans will  make every effort to link the state and national Democratic parties to capitalize on all the current national dissent.  But will that play stick with Alabama voters that are accustomed to voting for local democrats?

TheBlazeThumb

Glenn Beck Blazes Into WordPress

The Blaze - Glenn Beck's New Conservative Website
The Blaze - Glenn Beck's New Conservative Website

Glenn Beck has launched a new website based on WordPress, The Blaze.  Beck markets The Blaze on his personal site with the catchy tagline, “nothing burns hotter than the truth.”  I’m not going to expound on my own feelings about Glenn Beck, but his influence in America is obvious.  Mediaite describes The Blaze as a potential conservative rival to the Huffington Post.

The Blaze will undoubtedly attract enormous attention from conservatives and liberals alike, and it is really a pretty nice showcase of WordPress.  It’s a pretty basic magazine layout, but very sleek and clean.  The design is actually a welcome change to the often over-crowded, ad filled layouts we see in many magazine style themes.  The feature article takes up most of the screen on first load, with just a picture and post title at the top.  The main content area is a two column layout of recent stories, and the sidebar is a pretty typical layout.  The blog is separate from the main stories, and there is a section in the sidebar called, “The Wire” that is just a title listing of additional stories that don’t appear worthy of the main content area.

The site loaded pretty fast for me, in less than a second on every page I tried, which I think is pretty impressive for the home page especially.  I can’t nail down many plugins used, but the site is using the new official Tweet button.

As far as I can tell, The Blaze is not in the WordPress.org Showcase directory.

phones_terror_suspects

Suspected Terrorist Plotter’s Flight Originated in Birmingham

Terror Suspect Originates in Birmingham
al Soofi, on the left, al Marisi, and the suspicious luggage. Courtesy ABC News

Ahmed Mohamed Nasser al Soofi, a Detroit native and one of two men suspected of planning a terrorist attack, began his trip to Amsterdam in Birmingham.  Birmingham TSA subjected al Soofi to additional screening due to “bulky clothing” that he was apparently wearing.  He was allowed to continue on his flight despite that his checked baggage contained watches taped together, a Pepto-Bismal bottle taped to a cell phone, and over $7,000 in cash.  Some sources are also reporting that his checked luggage contained a box cutter and multiple large knives.  However, the photo above does not support that claim, and officials are saying much of what is being reported is based in rumor.

Once in Chicago, al Soofi checked his luggage to a flight destined for Yemen (through Dubai) while he met the second suspect, Hezem al Murisi, and the two boarded a flight for Amsterdam together.  Officials stopped the plane with the luggage before takeoff after realizing al Soofi did not board the plane, and arrested both men when they landed in Amsterdam.

Law enforcement officials told ABC News that the scare, “was almost certainly a dry run.”  Neither man has officially been charged with anything, as no items found were actually illegal.  Apparently, police are also backing off any connection between the two men, focusing the investigation on al Soofi alone.  So why was the second man arrested?

I guess we can give kudos to BHM for putting the alert on al Soofi.  Would the luggage have been caught being on a separate flight if Birmingham TSA hadn’t triggered it?  International flights are required to have a 100% baggage match, but who knows?  Well done, Birmingham security.  I’ll try to remember I said that as I get impatient next time I fly.

Alabama Candidates’ Jobs “Plans”

Alabama Needs WorkRobert Bentley and Ron Sparks both know that job creation by the next governor is a major issue for Alabama voters this November.  However, I feel less than inspired by their proposed plans to create jobs.  Both candidates are promoting laws that have already been passed as major jobs initiatives.

Robert Bentley has released his first campaign ad since the primary runoff and the first thing he talks about is how he offered 5,000 new jobs to Alabama through the Alabama Reemployment Act.  To his credit, he was the primary sponsor of the bill, but it passed both houses by June.  The law gives tax credits to Alabama employers that hire persons currently collecting or have expired unemployment benefits.  The credits vary depending on the employees wage but can’t be claimed until the employee works 12 consecutive months and doesn’t apply if employees make less than $10 per hour.

Ron Sparks has been pushing his plan to invest $1.4 billion in road and bridge projects to create 38,000 jobs.  His proposal includes a $400 million immediate contribution plus $100 million per year for ten years.  Well, the $100 million over ten years part is exactly what SB121 does, which passed both houses of the legislature and will be a ballot initiative November 2nd to amend the state constitution.  So 70% of Sparks’ big infrastructure idea will be voted on the same day his own fate is voted on.  45% of the money in the bill will be distributed evenly between all 67 counties and 55% will be allocated to counties based on population.  State Senator Lowell Barron of SD8 is the primary sponsor.

I look forward to more in depth and specific job initiatives by both gubernatorial candidates.  Considering we need at least a quarter million new jobs to reach full employment, Alabama deserves as much.

Tutorial: WordPress Feature Posts Slider Using jQuery

JQuery Slider for WordPress Feature Posts
This is how the original tutorial looks. I customized my own to look entirely different changing only CSS.

A while back, I found a great tutorial on how to build a feature posts slider with jQuery.  It was just what I was looking for, except as I’m not a PHP expert, I didn’t know how to integrate it into WordPress.  Fortunately I’m a member of the best theme framework that WordPress has to offer, ThemeHybrid.  In the exceptionally run support forums, I was pulled along by Justin Tadlock (Hybrid’s creator) and Rarst (a Hybrid contributor) to make my goal of creating a highly flexible, super customizable feature post slider a reality.  Now I’m going to share how we did it so that any other WordPress user can do it too.

View WebDeveloperPlus demo | View my custom WordPress demo

Why this slider to display featured posts?

  1. It’s coded to jQuery standards.
  2. It includes a list of posts with thumbnails in addition to the feature post.
  3. It can slide right into most themes as is, but is also extremely flexible.
Feeling brave? Go ahead, download the files and skip to the bottom for how to implement the final product.

One requirement to make this work is Justin’s Get The Image plugin.  Don’t worry though, in addition to making the slider work, this plugin will make your life easier in general, providing a simple and effective method for automatically grabbing images for you to use for things like post thumbnails in excerpts.  If you already use Hybrid, you already have Get The Image, so no need to download.

Most of the brains for the slider are going in the functions.php file.  Depending on your theme, you may already be very familiar with this file.  Basically, it’s where you put stuff that’s not natively in your WordPress theme.  While we’re on it, for a great (and long) list of things you can put in functions.php that will make your website awesome check out what the guys at WP Beginner have offered up.

In addition to the functions file, we’ll be creating a css file  to style the slider and a small javascript file to make it work.  Let’s dig in.

Click each tab to view that section of the tutorial.  All files are available for download at the bottom of the tutorial.

[tab: The Functions File]

This is by far the most complex part.

Let’s register and call styles.

wp_register_style( 'jquery-ui-slider', get_stylesheet_directory_uri() . '/jquery-ui-slider.css', '', filemtime(
STYLESHEETPATH . '/jquery-ui-slider.css' ) );
wp_enqueue_style( 'jquery-ui-slider' );

If you only use the slider on a certain page you can wrap this section into a conditional statement.

Next, we’ll start our main function, jquery_ui_slider(), and load Javascript files. We’re loading Javascript files within the function so that they are only loaded on pages where the function is actually called.

function jquery_ui_slider() {

	slider_scripts_register(); /* calls function defined later */
	add_filter( 'script_loader_src', 'google_scripts_unversion' ); /* filters Google API url for bug prevention */
	add_action( 'wp_footer', 'slider_footer_scripts', 20 ); /* adds an action to load the scripts in the footer */

And meat of the html and php:

The most important thing to note here is that in the second line we’re calling for posts in the “Featured” category and displaying four posts at a time. Both can be changed for your application, but it will be necessary to adjust the css accordingly if you want to change the number of posts in the slider.

?> <div id="featured" > /* remember to close the php tags before starting html */

<?php $loop = new WP_Query( array( 'category_name' => 'Featured', 'posts_per_page' => 4 ) ); ?>

<?php $i = 0; ?>

<ul class="ui-tabs-nav">

<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

<li id="nav-fragment-<?php echo ++$i; ?>" class="ui-tabs-nav-item <?php if ( $i <= 1 ) echo 'ui-tabs-selected'; ?>" >
<a href="#fragment-<?php echo $i; ?>"> /* references the div #fragment-i where i equals 1, 2, 3, or 4  */
<?php get_the_image( array( 'link_to_post' => false ) ); ?> /* uses plugin to grab the image from post */
<span><?php the_title(); ?></span>
</a>
</li>

<?php endwhile; ?>

</ul>

<?php $i = 0; ?>

<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div id="fragment-<?php echo ++$i; ?>" class="ui-tabs-panel <?php if ( $i > 1 ) echo 'ui-tabs-hide'; ?>"> /* adds ui-tabs-hide portion of class if post is not active */
<?php get_the_image( array( 'link_to_post' => false ) ); ?> /* uses plugin to grab the image from post */
<div class="info">
<h2><a href="<?php echo get_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?></p>
</div>
</div>
<?php endwhile; ?>
</div>
<?php
}

To get the actual WordPress posts we’re querying the database for four “Featured” posts and looping through the posts two times. The first loop grabs the list of posts with thumbnails and title and applies the ul class “ui-tabs-nav”. The second loop grabs the posts and displays the image, title and excerpts with the div class “ui-tabs-panel” for the active post plus “ui-tabs-hide” for non-active posts. It’s important to pay attention to where you are opening and closing php tags, as the php and html are mixed throughout this section.

Now we will register, filter, and print scripts.

function slider_scripts_register() {
if ( !is_admin() ) { /*only perform on non-admin pages */
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2', true );

wp_deregister_script( 'jquery-ui-core' );
wp_register_script( 'jquery-ui-core', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js', array( 'jquery' ), '1.8.2', true );
wp_register_script( 'jquery-ui-slider', get_stylesheet_directory_uri() . '/jquery-ui-slider.js', array( 'jquery-ui-core' ), filemtime( STYLESHEETPATH . '/jquery-ui-slider.js' ), true );
}
}

function google_scripts_unversion( $src ) { /*filter jQuery version on Google APIs */

if( strpos($src, 'ajax.googleapis.com' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}

function slider_footer_scripts() { /* define the function we used earlier via add_action */

if ( !is_admin() ) {
wp_print_scripts( 'jquery-ui-slider' );
}
}

That’s it for the functions file. There are all kinds of ways to customize this. Some ideas would be to add a byline or entry meta, remove the title from the thumbs, or limit the length of the excerpts (which needs to be done to about 20 characters using the default css). The sky is the limit!
[tab: The CSS File]
The CSS needs to be named jquery-ui-slider.css and can be saved in the same folder as your style.css. If you use the default CSS, you will also need the selected-item.gif image for the active post pointer.  To make the original slider fit into WordPress, apply the following CSS.

/*featured content*/

#featured{
	width:340px;
	padding-right:250px;
	position:relative;
	border:5px solid #ccc;
	height:250px;
	background:#fff;
}
#featured ul li {
        background: none;
	margin: 0;
	border: none;
}
#featured ul.ui-tabs-nav{
	position:absolute;
	top:0; left:340px;
	list-style:none;
	padding:0; margin:0;
	width:250px;
}
#featured ul.ui-tabs-nav li{
	padding:1px 0; padding-left:13px;
	font-size:12px;
	color:#666;
}
#featured ul.ui-tabs-nav li img{
	float:left; margin:2px 5px;
	background:#fff;
	padding:2px;
	border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
	font-size:11px; font-family:Verdana;
	line-height:17px;
}
#featured li.ui-tabs-nav-item a{
	display:block;
	height:60px;
	color:#333;  background:#fff;
	line-height:15px;
        margin-right: 1px;
}

#featured li.ui-tabs-nav-item a:hover{
	background:#f2f2f2;
}
#featured li.ui-tabs-selected{
	background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
	background:#ccc;
}
#featured .ui-tabs-panel{
	width:340px; height:250px;
	background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
	position:absolute;
	top:170px; left:0;
	height:80px;
        width: 340px;
	background: url('images/transparent-bg.png');
}
#featured .info h2{
	font-size:14px; font-family:Georgia, serif;
	color:#fff; padding:0px 5px; margin:0;
	overflow:hidden;
        line-height: 18px;
}
#featured .info p{
	margin:0 5px;
	font-family:Verdana; font-size:11px;
	line-height:13px; color:#f0f0f0;
}
#featured .info a{
	text-decoration:none;
	color:#fff;
}
#featured .info a:hover{
	text-decoration:underline;
}
#featured .ui-tabs-hide{
	display:none;
}
#featured .thumbnail{
	height: 50px;
	width: 70px;
        border: none;
}
#featured .ui-tabs-panel .thumbnail{
	height: 250px;
	width: 340px;
        margin: 0;
        padding: 0;
        border: none;
}

If you want to create a slider to fit into your theme like a glove I recommend Firebug, a cup of coffee, and lots of imagination.  You can see how I styled it for one of my own themes here, or you can also view the custom version I put into my demo. If you make your own, show me that one too! After all, my favorite part about this slider is that it is so flexible.

WordPress Feature Post Slider Using jQuery

[tab: The jQuery]
The jQuery makes the whole slider work.

I’m not a jQuery expert by any means, and I learned during this project about the jQuery no conflict wrapper for WordPress. Below is the code from the tutorial adapted for WordPress.  This file needs to be named jquery-ui-slider.js and you can save it in the same folder as the css.

jQuery.noConflict();
jQuery(document).ready(function($) {
$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",3000,true);
}
);
});
});

3000 is the number of milliseconds between rotations. It is set to 0 on hover so that the slider will pause when a user scrolls over it.  Get a lot more jQuery ideas here.

[tab:END]

Once you’ve finished all three files:

You need to call the function where you want it in your theme. For my theme, I’m using the condition is_front_page() and Widget Logic in the Hybrid widget area utility_before_content.  I have the simple php function

<?php jquery_ui_slider(); ?>

and I’m done. You of course can show this any way you like using the same function.

You now have everything you need for your very own, highly customizable WordPress feature posts slider utilizing jQuery. Three files and done. Again, I’d like to thank Justin Tadlock and Rarst for the more-than-help integrating this into WordPress and WebDeveloperPlus for the original tutorial.

Did you enjoy this tutorial? Let me know about it in the comments! Did you use it? Show it off!

download the files

Happy sliding!