Change the look of the Popularity tab in Arras’ Tabbed Widget

By
Mitko Haralanov
– July 30, 2010Posted in: Code, Featured, Website, WordPress
Updated: May 10, 2011 08:32 There seems to have been a small bug in the code from the first update. I’ve corrected the error in the code shown in the first [...]
Updated: May 10, 2011 08:32

There seems to have been a small bug in the code from the first update. I’ve corrected the error in the code shown in the first update.

Updated: May 10, 2011 08:32

Today, I updated my Arras theme to version 1.5.0.1. With this update some of the information below has changed.

First, you don’t need to add the fix for the IE display issue. The core theme has fixed that problem. Secondly, the new theme has defined methods in the Arras_Tabbed_Sidebar class to deal with displaying the different tabs rather then using a switch statement. The method that displays the Popularity tab is called popular_tab(). The original code of that method is:

        function popular_tab() {
                if ( function_exists('akpc_most_popular') ) {
                        echo '<ul>';
                        akpc_most_popular(10, '<li>', '</li>');
                        echo '</ul>';
                }
        }

After applying my modifications, the new method has the following content:

        function popular_tab() {
                if ( function_exists('akpc_most_popular') ) {
                        echo '<ul>';
                        global $akpc;
                        $popular = $akpc->get_popular_posts('most', $this->postcount, 'yes', array('column' => 'total'));
                        foreach ($popular as $post) { ?>
                                <li class="clearfix">
                                <?php if ( function_exists('get_the_post_thumbnail') ) {
                                        echo '<span class="thumb">';
                                        echo get_the_post_thumbnail($post->ID, 'sidebar-thumb');
                                        echo "</span>";
                                } ?>
                                <a href="<?php echo get_permalink($post->ID) ?>"><?php echo $post->post_title ?></a><br />
                                <span class="sub"><?php echo get_the_time(__('d F Y g:i A', 'arras'), $post->ID); ?> |
                                <?php echo $post->total ?> Views</span>
                                </li>
                        <?php }
                        echo '</ul>';
                }
        }

Popularity Tab in IE

Popularity Tab in IE

After upgrading to WP 3.0 and Arras 1.4.3, I also re-arranged some of its layout – most notably, I stopped displaying the Featured posts in the Tabbed widget and replaced it with the Most Popular. There was no sense of having the featured posts displayed yet again since it was already on the front page.

Unfortunately, by doing so two things happened that broke the site in IE or made it look not as good as I wanted it to. The thing that broke is that Arras had a minor bug in the code for the Tabbed widget which ended up making the sidebar look rendered partially and in the wrong order.

The offending code was found in arras-theme/library/widgets.php:

                                echo '<div id="s-popular" class="widgetcontainer clearfix">';
                                if ( function_exists('akpc_most_popular') ) akpc_most_popular();
                                echo '</div><!-- #s-popular -->';

The problem is that the function akpc_most_popular() generates a list of links which are surrounded by the tags <li> and </li>. However, as you can see in the code snippet above, the tags <ul> and </ul> are missing. This was causing IE to render the list in the wrong place on the page. The fix was very simple – add the missing tags:

                                echo '<div id="s-popular" class="widgetcontainer clearfix"><ul>';
                                if ( function_exists('akpc_most_popular') ) akpc_most_popular();
                                echo '</ul></div><!-- #s-popular -->';
Fixed Popularity Tab

Fixed Popularity Tab

Now, that this was fixed, I had the chance to look at the content of the tab. What I realized was that I didn’t like how the information was presented at all – It was just a list of links with no other information at all.

So, I set out to find a way to fix this. After a little digging through the Arras and Popularity Contest plugin, I found out that changing the look of the tab would be relatively easy. It also turned out that the changes need to be made to only one file – arras-theme/library/widgets.php.

Even though, I didn’t want to have the Featured Post tab present in the Multi-Tabbed Widget, I did like how it look and how it presented its content, so I wanted to replicate that look for the Popular posts, as well.

However, the first step was to figure out how to actually get the raw data. The call that Arras currently used (akpc_most_popular()) output the list of popular posts directly to the browser. Looking through the Popularity Contest plugin code, I found that the akpc_most_popular() call, in turn, called a class method which did all the “dirty” work – $akpc->get_top_ranked_posts().

What I needed was an API call that would let me work with the raw data. Further inspection of the Popularity Contest (PC) code showed that there was a call that appeared might work – akpc_get_popular_posts_array(). However, that wasn’t the case. The PC code had a bug in that function.

In the body of akpc_get_popular_posts_array(), there was a call to $akpc->get_popular_posts(). The prototype/signature of that method is:

function get_popular_posts($type = 'popular', $limit, $exclude_pages = 'yes', $custom = array())

Below is the body of the akpc_get_popular_posts_array() API function.

function akpc_get_popular_posts_array($type, $limit, $custom = array()) {
        global $akpc;
        return $akpc->get_popular_posts($type, $limit, $custom);
}

You can see that there is a discrepancy between the method signature and the way it was being called, which resulted in it [the method] not returning any results.

The solution was simple enough – call the $akpc->get_popular_posts() method directly from arras-theme/library/widgets.php. I removed the code below:

                                echo '<div id="s-popular" class="widgetcontainer clearfix"><ul>';
                                if ( function_exists('akpc_most_popular') ) akpc_most_popular();
                                echo '</ul></div><!-- #s-popular -->';

and replaced with the following:

                                echo '<div id="s-popular" class="widgetcontainer clearfix"><ul>';
                                if ( function_exists('akpc_most_popular') ) {
                                        global $akpc;
                                        $popular = $akpc->get_popular_posts('most', 10, 'yes', array('column' => 'total'));
                                }
                                echo '</ul></div><!-- #s-popular -->';

This allowed me to get an array of the raw data that I needed. Each of the elements in that array was an object referring to a post from the 10 most viewed posts.
Now, that I had the information that I needed, it was type to display it. Because I wanted the look of the Popular tab to mimic the look of the Featured Post tab, I looked through the arras-theme/library/widgets.php file and found the code that dealt with the display of the Featured Posts:

                                if (is_numeric($featured)) {
                                        echo '<div id="s-featured" class="widgetcontainer clearfix">';
                                        $f = new WP_Query('showposts=8&cat=' . $featured);
                                        if (!$f->have_posts()) {
                                                echo '<span class="textCenter sub">' . __('No posts at the moment. Check back again later!', 'arras') . '</span>';
                                        } else {
                                                echo '<ul>';
                                                while ($f->have_posts()) {
                                                        $f->the_post();
                                                        ?>
                                                        <li class="clearfix">
                                                        <?php if (function_exists('the_post_thumbnail')) the_post_thumbnail('sidebar-thumb') ?>
                                                        <a href="<?php the_permalink() ?>"><?php the_title() ?></a><br />
                                                        <span class="sub"><?php the_time( __('d F Y g:i A', 'arras') ); ?> |
                                                        <?php comments_number( __('No Comments', 'arras'), __('1 Comment', 'arras'), __('% Comments', 'arras') ); ?></span>
                                                        </li>
                                                        <?php
                                                }
                                                echo '</ul>';
                                        }
                                        echo '</div><!-- #s-featured -->';
                                }

I used the above section as the template for the code which displayed the Popular posts and I ended up with this:

                                echo '<div id="s-popular" class="widgetcontainer clearfix"><ul>';
                                if ( function_exists('akpc_most_popular') ) {
                                        global $akpc;
                                        $popular = $akpc->get_popular_posts('most', 10, 'yes', array('column' => 'total'));
                                        foreach ($popular as $post) {
                                                ?>
                                                <li class="clearfix">
                                                <?php if ( function_exists('get_the_post_thumbnail') )
                                                        echo get_the_post_thumbnail($post->ID, 'sidebar-thumb'); ?>
                                                <a href="<?php echo get_permalink($post->ID) ?>"><?php echo $post->post_title ?></a><br />
                                                <span class="sub"><?php echo get_the_time(__('d F Y g:i A', 'arras'), $post->ID); ?></span>
                                                </li>
                                        <?php
                                        }
                                }
                                echo '</ul></div><!-- #s-popular -->';
Modified Popularity Tab

Modified Popularity Tab

The screenshot shows how the front page looks after making the changes above.

All the changes that are needed to fix the IE issue and change the look of the Popular tab are contained in the arras-theme/library/widgets.php file from the Arras theme. This has the benefit of retaining these changes if the PC plugin releases a new version and gets updated.

However, be careful when updating your Arras theme as the update process will replace your modified files. In order to get around that, I alway keep a copy of all the diffs that I’ve made to the theme against the original files. Since most of you (including me) have made changes to the stylesheet(s) (probably through arras-theme/user.css), most likely you are already keeping a list of all the changes. Just as this to that list.

VN:F [1.9.13_1145]
Rating: 5.0/5 (6 votes cast)
VN:F [1.9.13_1145]
Rating: +6 (from 6 votes)
Change the look of the Popularity tab in Arras' Tabbed Widget, 5.0 out of 5 based on 6 ratings

Related Posts

Tags: , , , , , , , ,