Sticky Post Slider in WordPress without a Plugin

Posted by See Guo Lin on February 28, 2011

“Many blog owners love to have a slider for featured posts in their blog home page these days. A slider gives draws the attention to the blog posts selected by the owner and allows the visitors to quickly glance through some of the best posts.”

Guo Lin shares his preferred method of creating a slider for featured posts in WordPress.

Many blog owners love to have a slider for featured posts in their blog home page these days. A slider gives draws the attention to the blog posts selected by the owner and allows the visitors to quickly glance through some of the best posts. It is a smart and welcomed way to promote the blog with its own posts. Many blog owners seek help from various plugins to achieve the slider for featured posts. But I prefer to code it directly in the theme I work on, while using the existing ‘Sticky Post’ feature in WordPress to achieve the same effect.

Disclaimer: This may not be the only nor the best way for anyone to achieve the same presentation, but I intend to share it as a reference for interested people.

There are several reasons I usually choose to use the Sticky Post feature instead of implementing another custom field or tag or category etc. First, I notice the native WordPress Sticky Post feature is not in use in most of the blogs (note: personal observation), and I think this native feature should be more well utilized.

Second, I think the current way presenting Sticky Posts in WordPress takes away too much attention from the worthy latest posts because Sticky Posts take up the place before the latest posts at the same content area. A separate area to display the Sticky Posts such as the post slider area is a good way to give attention to some ‘selected’ posts while not attracting too much attention away from the latest posts.

Third, implementing the post slider using a tag or a category is more like a hack because tags and categories are supposed to describe the contents of the blog post. Sometimes there may be a need to present contents with a certain tag or category differently (e.g. tag templates or category templates), but the main point of using tags and categories should be to describe the blog post contents, not merely as a way to differentiate the way blog posts are presented.

Enough said. Let’s get into how I do it.

Let’s say I have these blog posts and several of them are made ‘Stick Posts’:

In the default Twenty Ten theme, each of the Sticky Posts appears in a box in a light-blue background with a thick black top border line in the home page of the blog, in the main blog posts area above all most recent posts:

MooTools and noobSlide

Since in this post, I’m going to use noobSlide as our content slider, we need to include MooTools JavaScript library. Go to the functions.php file in the template and add the following codes at the bottommost.

function register_custom_js() {
    wp_register_script( 'mootools', 'http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js', '1.3.0' );
    wp_register_script( 'noobslide', get_bloginfo('template_directory') . '/_class.noobSlide.packed.js' , array( 'mootools' ) );
}
add_action( 'init', 'register_custom_js' );

function enqueue_noobslide() {
    if ( is_home() ) { // our slider only appear in the home page, so load the script only in home page
        wp_enqueue_script( 'noobslide' );
    }
}
add_action( 'wp_print_scripts', 'enqueue_noobslide' );

Post Thumbnail Support

In this tutorial, I’m going to use post thumbnails in my slider. If your theme has not yet added the feature, you can add it using the following codes in your functions.php:

function custom_theme_setup() {
    add_theme_support( 'post_thumbnails' );
}
add_action( 'after_setup_theme', 'custom_theme_setup' );

Also make sure your Sticky Posts has set the ‘Featured Image’ (BTW, WordPress should standardize the use of name).

Custom ‘Read more’ Link

In the default Twenty Ten theme, a custom “Read more” link is used. I’m going to change it to use my own customized “Read more” link so I can place a class for styling.
I will comment out this line in the Twenty Ten functions.php file:

//add_filter( 'get_the_excerpt', 'twentyten_custom_excerpt_more' );

Then, I will add the following to the same file:

function custom_excerpt_with_more( $excerpt ) {
    if ( has_excerpt() && ! is_attachment() ) {
        global $post;
        return $excerpt . '<p class="slider-more"><a href="' . get_permalink( $post->ID ) . '">Continue reading</a></p>';
    }
    return $excerpt;
}
add_filter( 'get_the_excerpt', 'custom_excerpt_with_more' );

function custom_excerpt_more( $more ) {
    global $post;
    return '<p class="slider-more"><a href="' . get_permalink( $post->ID ) . '">Continue reading</a></p>';
}
add_filter( 'excerpt_more', 'custom_excerpt_more' );

custom_excerpt_with_more() function is for automatic excerpts or user-specified excerpts with read-more tag. custom_excerpt_more() is for hand-crafted excerpts.

CSS and JavaScript

Then, we add the custom CSS and JavaScript codes in functions.php to make the theme serve them when we are in the home page where the slider will appear.

function custom_slider_css_js() {
    if ( is_home() ) { // only in home page
?>
<style type="text/css">
#slider{border:1px solid #ccc;width:640px;position:relative;overflow:hidden;height:213px;margin-bottom:20px;}
#mask{position:absolute;height:213px;}
.items{float:left;height:213px;width:640px;position:relative;}
.items .wp-post-image {float:left;}
.info{width:320px;float:left;font-family:Arial, Helvetica, sans-serif;}
#content .info h2{font-size:20px;font-weight:bold;color:#1c3f95;margin:10px 10px 15px 10px;}
#content .info p{font-size:11px;color:#1c3f95;line-height:16px;margin:10px;}
.info a{font-size:10px;padding:5px 7px;background:#e1e1e1;text-decoration:none;text-transform:uppercase;font-weight:bold;color:#1c3f95;}
.info a:hover{color:#ffffff;background:#1c3f95;}
#slider .handle{position:absolute;bottom:0;right:5px;line-height:10px;text-align:center;font-size:25px;font-weight:bold;}
.handle a{color:#ccc;height:20px;width:20px;display:inline-block;cursor:pointer;}
.handle .active{color:#1c3f95;}
.handle a:hover{color:#1c9f65;}
</style>
<script type="text/javascript">
/*<![CDATA[*/
window.addEvent('domready',function(){
    var nS8 = new noobSlide({
        box: $('mask'),
        items: $$('#mask .items'),
        size: 640,
        autoPlay: true,
        interval:8000,
        handles: $$('.handle a'),
        onWalk: function(currentItem,currentHandle){
            $$(this.handles).removeClass('active');
            $$(currentHandle).addClass('active');
        }
    });
    var handle = $$('.handle a');
    handle.each(function(el,i){el.addEvent('click',nS8.walk.bind(nS8,[i,true]));});
});
/*]]>*/
</script>
<?php
    }
}
add_action('wp_head', 'custom_slider_css_js' );

WordPress Theme Modification

Next, go to the theme template file that display the Loop in the home page, in this case, it is the loop.php file in the Twenty Ten theme. Place the cursor right before the Loop area and we can start putting our codes for the slider.

<?php
if ( is_home() ):
    $sticky = get_option('sticky_posts');
    $slider = new wp_query( array( 'post__in' => $sticky ) );
    ?>
    <?php if ($slider->have_posts()): $count = 0; ?>
        <div id="slider">
            <div id="mask">
                <?php while ( $slider->have_posts() ): $slider->the_post(); $count++; ?>
                    <div class="items">
                        <?php the_post_thumbnail( array( 320, 213 ) ); ?>
                        <div class="info">
                            <h2><?php the_title(); ?></h2>
                            <?php the_excerpt(); ?>
                        </div>
                    </div>
                <?php endwhile; ?>
            </div>
            <div class="handle">
                <?php for ($count; $count > 0; $count--): ?>
                    <a>&bull;</a>
                <?php endfor; ?>
            </div>
        </div>
    <?php endif; ?>
<?php endif; ?>

At this point of time, when you go to the home page of the blog, you will see the slider is up and running already and we are almost done:

But wait, we are not done yet. Notice the main blog posts area still have the Sticky Posts? We need to get rid of them to return the attention taken away from the latest posts. To accomplish that, we will add the following codes right after our content slider codes:

<?php
if ( is_home() ):
    $sticky = get_option('sticky_posts');
    $slider = new wp_query( array( 'post__in' => $sticky ) );
    ?>
    <?php if ($slider->have_posts()): $count = 0; ?>
        <div id="slider">
            <div id="mask">
                <?php while ( $slider->have_posts() ): $slider->the_post(); $count++; ?>
                    <div class="items">
                        <?php the_post_thumbnail( array( 320, 213 ) ); ?>
                        <div class="info">
                            <h2><?php the_title(); ?></h2>
                            <?php the_excerpt(); ?>
                        </div>
                    </div>
                <?php endwhile; ?>
            </div>
            <div class="handle">
                <?php for ($count; $count > 0; $count--): ?>
                    <a>&bull;</a>
                <?php endfor; ?>
            </div>
        </div>
    <?php endif; ?>

    <?php
    $args = array_merge( $wp_query->query, array( 'post__not_in' => $sticky ) );
    query_posts( $args );
    ?>

<?php endif; ?>

All Done!

Now enjoy your fully functional content slider. =)

Images in the sample blog courtesy of phalinn.

Posted in Code 1 Comment »

Holiday Trip to Cambodia

Posted by Shaiful Borhan on February 23, 2011

“One of the impulsive things we did during our stay was abandoning Phnom Penh on the second day and taking a 6-hour bus ride to Siem Reap with the sole purpose to visit the national treasure, the one and only, Angkor Wat.”

Shaiful backpacked to Cambodia and tells the stories of his adventure. Shaiful Borhan is the Web Analyst and Developer at Stampede.

My recent trip to Cambodia was a memorable one. It is a country with fascinating history with thousands of years of civilization, majestic temples and interesting people.

My friends and I arrived at Phnom Penh Airport around 9am and immediately got a taste of “Cambodian taxi” when a tuk-tuk driver named Mon, offered us a ride to the hotel. The 30 minute journey gave me a chance to look at some of the interesting things about the Cambodian traffic. I guess the most prominent feature was the horn-happy drivers. Since the roads were mainly populated with slow-moving tuk-tuks and motodops, they tend to get in the way of other road users. Overtaking happened all the time, usually preceded by a quick beep of the horn. Then, there’s the traffic system that has very little stop lights or roundabouts and pretty much free-style. 3, 4 or 5-way intersections? No biggie, keep on surging forward until you get the right of way. Another notable feature was the range of vehicles on the road from tuk-tuk, Camry, Lexus to Hummer, Winged-B and even Bond’s DBS (no kidding!).

It’s still early when we reached the hotel. Naturally, Mon talked us into hiring him for a full-day tour, which we did. Later I found out that it’s actually a norm there. Even if it’s late evening, tuk-tuk drivers would still offer themselves to take you around for the next day. My recommendation, if you managed to find a trustworthy driver who allows some room for price negotiation and can speak understandable English, stick with him.

Mon asked us what we wanted to see. Too embarrassed to say we were mainly interested in the genocide memorials, we waited for him to reel off the sites. We then agreed to start off with a visit to the Killing Field at Choeung Ek followed by the S-21 prison at Tuol Sleng, and later in the day to the Silver Pagoda and finally Central Market for a little shopping. I’m not going to go into detail describing these places, read up TripAdvisor or Travelfish

Most of the places of attraction charge a nominal fee between 1 to 3USD except Angkor Wat (20USD/adult). The unofficial main currency in the city is USD without the coins, which is complemented by the Cambodian Riel. Therefore, it is common when purchasing using USD you will be given the change in a combination of USD and Riel. It’s a good thing to have a few thousand Riel at your disposal but once you left Cambodia they will be useless because the currency is non-convertible. The standard exchange rate for Riel is 1USD = 4000 Riel. On rare occasion, some merchants will accept the Thai Baht as well.

One of the impulsive things we did during our stay was abandoning Phnom Penh on the second day and taking a 6-hour bus ride to Siem Reap with the sole purpose to visit the national treasure, the one and only, Angkor Wat. We also stayed a night at Siem Reap to have a taste of the night life. Maybe it’s just us, but my friends and I think this little city is much more systematic and has been made touristier than Phnom Penh. The capital city, with its stunning colonial heritage, royal palace and remnants of war kinda gave the “historical” feeling to travellers.

The next day we headed back to Phnom Penh on a different bus company than the previous one. The previous bus was pretty much a tourist bus with a hostess and only stopped once at a large town. The second bus however, had cheaper fare and was boarded primarily by locals. It still uses the same route but had different pit-stops. Unlike the first bus, this one stopped twice at small village towns. These were the only places where I saw merchants quoting prices in Riel only and accepting Thai Baht. Not to mention seeing some bizarre things too. Very fascinating.

Back in Phnom Penh, we spent the remaining of the day visiting the Royal Palace and the Russian Market for a final round of shopping. A note on shopping, price haggling is a must. Items such as woodcrafts can have opening price two or three times its original value. A vendor made me an initial offer of 50USD for a Cambodian Tro and eventually let go for 20USD. Don’t go overboard though, it’s impossible to haggle for a 3USD t-shirt if you’re just planning to buy a piece. Buy in bulk by combining the purchase with your friends and the price might go down a bit.

On the final day, back to the airport, we took the same tuk-tuk with Mon (already prearranged since the first day) and bid farewell to this enchanting and humble Indochina country. Honestly, I don’t mind a second visit.

Posted in Travel 3 Comments »

Managing Web Projects and People

Posted by Anita Zein on February 16, 2011

A roundup of good articles and posts on project management.

Anita Zein shares a sliver of articles from her huge repository of great project management resources. Anita is the Project Manager at Stampede.

As a project manager and a virtual one at that, I came across articles that shed a new light on my daily job scope and the different personalities of people I’m involved with. Being aware of what individuals aspire to helps me manage people and their tasks better. As experience alone is not enough to grow, I still have plenty to learn and in the process, I will share articles that I hope will be useful to the readers.

Are You the Boss You Need To Be?

For the very first time I hear my thoughts echoed in another person’s article – that man is a living resource that will continue to grow. I find this very true – my own work environment is full of creative people who would never stop learning and growing. I’ve been thinking all this time that, if only one or two people agree with my opinion, it’s probably not strong enough idea to be thought further and shared. The validation by this article makes me really happy.

I managed to take sometime this month to stop thinking about work for a while and instead, settle a few little (but aggravating) personal affairs of mine. I don’t think it’s not possible for someone whose life is unorganized, unplanned and without sold direction to be able to manage so many tasks and care for so many people. All should start from our own selves.

Continue reading “Are You the Boss You Need To Be?”

10 Ways to Boost Creativity

Prior to managing and motivating others, you need to manage and motivate yourself. Being creative at work begins with you feeling comfortable with yourself and your work space. Make effort to understand the problem and be careful when passing judgment. When making decision, involve people who understand the issues and exchange ideas with them. We should all treat each other the way we want to be treated, because in a team, the role of every person is equally important.

Continue reading “10 Ways to Boost Creativity”

Don’t Let “Post-Holiday” Letdown Threaten Your Remote Team

There are moments during a long vacation when I feel uncomfortable not thinking about work. Vacations are actually good opportunities to reflect and formulate new plans, as there aren’t scheduled activities to keep you occupied. Staying connected and keeping everyone on the team aware of what’s going on is primary. Upon returning from holidays, team members should be able to ease back into their work environment and teamwork atmosphere. A back-from-holiday welcome would also show them that they are greatly appreciated, anticipated and a joy to have back.

Continue reading “Don’t Let “Post-Holiday” Letdown Threaten Your Remote Team”

Keeping Your Team Productive and Happy During the Holidays Ain’t Easy – But It’s Important

Prior to any holidays, it’s crucial to note everyone’s days off, organize their tasks according to priority and complete the most important tasks first. It pays to know people’s habits and arrange for help or back-up plan around their unavailability. Not all surprises are good.

Continue reading “Keeping Your Team Productive and Happy During the Holidays Ain’t Easy – But It’s Important”

Effective Ways to Use Anger in the Office

There were times when I felt like losing control of the anger that resulted from personal or job-related issues. But now the good news .. It is completely normal when it happens occasionally. Not every negative energy must be channeled in negative manners. Instead of turning it into disaster, use the anger as energy solver. Be in control and focus on issues that are within your reach to resolve.

NOTE: Do not engage too long with people who make you angry. Either resolve it or walk away.

Continue reading “Effective Ways to Use Anger in the Office”

How to Manage Criticism Effectively

Responding to criticism with a negative attitude will only hinder your opportunity to grow. Criticism is a chance to correct mistakes and challenge yourself to attain more. People will not waste their time to think about you, let you know your mistakes and give suggestions to improve if you are not very important to them or believe that you are able to do better. Analyze the criticism by understanding yourself. If it is proven true and you acknowledge it, take action to fix it immediately. When it is false, do not sweat it.

Continue reading “How to Manage Criticism Effectively”

10 Ways to Stop Communication Overload

Keep communication simple, centralized and effective.

Continue reading “10 Ways to Stop Communication Overload”

Reasons to Work

Last but not least, if you are the right man in the right place, and all of your needs are met, you feel very important and special by your presence in this world, then you’ll be happy to work for the rest of your life.

Continue reading “Reasons to Work”

(picture via ffffound)

Posted in Roundups Add Comment »