Widgetized Sidebars (Dynamic Sidebars)

This was the single biggest help to me. The site design called for a links area at the bottom to link to other groups and departments and organizations related to this one. It also called for contact information at the bottom.

The solution is to use widgetized “sidebars” and then tweak the css to to turn your sidebar into a footer. To add a sidebar insert this code into your functions.php file in your theme.

<?php
 if ( function_exists('register_sidebar') )
 register_sidebar(1);
?>
</php>
 
You can repeat this code for as many sidebars as you need. Just make the "1" into a different number.
<span id="more-397"></span>
Now insert this code where you want your  sidebar to appear.
 
<pre lang="php">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(1) ) : ?>
<?php endif; ?>

This will make your dynamic sidebar appear. For me i just fixed the widths of the widgets and floated them left with this code.

#footer .widget{
width:290px;
float:right;
}

By setting the width of the widgets and floating them to the left of my footer I made an editable content area the didn’t interfere with the post or page structure using widgets and dynamic sidebars.

Custom Loops

For the site i was making there wasn’t going to be a blog but rather a news section and an events section so i needed to split the posts be category and query them individually.

<?php
 $news= 'category_name=news&orderby=date&order=DEC&showposts=3';
 query_posts($news); // run the query
 ?>

This snippet created a new query called news ($news) grabs 3 posts from the news category and orders them descending by date. You then set up The Loop normally below this code. My completed loop looked like this.

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
	<?php
		if ( $news%2 ) {
    		echo "<li class='news_even'>";
			} else {
    		echo "<li class='news_odd'>";
			}
			?>
			<h3 class="smallindent"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
			<p class="posted smallindent"><?php the_time('m-d-y') ?> </p>
			<div class="smallindent"><?php the_excerpt(); ?></div>
		</li>
		<?php $news++ ?>
	<?php endwhile; ?>
	<?php else : ?>	
	</ul>
	<?php endif; ?>

Drop Down Menus

The clients wanted the website to have a drop down normally i would oppose it but they had quite a bit of content they wanted to put on the site. After looking around for several hours and testing various methods for dropdown menu. I found this, it turned out to be the holy grail I was looking for and cross browser to boot. and it worked out of the box with the markup generated by wp_list_pages function.

Simplify the Admin Panel

After the first meeting and training session I wanted a way to hide various parts of the admin panel that were going unused. The theme was stripping Wordpress back to the core. No tags, no need to manage categories, or the media library. The solution was wplite. This nifty plugin lets you disable panels in the admin screen. It also lets you limit the post metadata fields (i.e. excepts, post tags, page order, templates, slugs ect.) it turned out to be the magic bullet I was looking for the make managing the site simple and easy. It can even strip the dashboard so the default page is writing a new post.

The next challenge

the next large project I have is to rebuilding the ASDA website with wordpress. With all the bells and whistles and more. The current proposal is.

• Multi-author blog
• Post by email for the discussion mailing list.
• Possibly hosting an ezine
• membership directory for the group
• links feed
• member portfolios

I’ll be publishing more on the development of the site once the group who is designing it throws more at me to code and when we get more ideas.

So I figured it would not be terribly difficult to hack the NETTUTs tutorial to make my own Twitter badge with PHP by reading the RSS feed that Twitter provides.

The Function

Here is the code for the function I wrote. It uses Curl instead of file_get_contents. After a little research file_get_contents requires allow_url_fopen = ON in the php.ini file, Which as this and this will tell you is a security risk>

Switching from file_get_contents to Curl wasn’t hard after a simple Google search turned up this post and it worked like a charm.

So here is the function I wrote by mashing up these two tutorials and a few extra if statements.

Update

My friend Aaron Parecki commented here about how I could improve this script with a few lines of RegEx code to simplify searching for twitter usernames (@) and links (http://). Its whole lot less code and a whole lot easier. You can read his addition to this here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<?php
function DisplayTwitterFeed($feed_url, $num=10) {
 
$ch = curl_init("$feed_url");
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_HEADER, 0);
	$data = curl_exec($ch);
	curl_close($ch);
 
	$x = new SimpleXmlElement($data);
 
	echo "<ul class='twitter'>";
 
	$i = 0;
 
	foreach($x->channel->item as $entry) {
        	if($i == $num) break;
			$i++;
 
		//get the content and cut out the first word which is always @whatever
		$tweet = $entry->title;
 
		$tweet = explode(' ', $tweet);
 
     	$tweet = implode(' ', array_slice($tweet, 1, 140));
 
		$tweet = explode(" ", $tweet);
			echo "<li>";
 
			foreach ($tweet as $words)	
 
				if ($words[0] == "@") {
					echo "<a href='http://twitter.com/" . substr($words, 1) . "'>" . $words. "</a> ";
				} elseif (substr($words, 0, 7) == "http://") {
					echo "<a href='". $words . "'>" . $words. "</a> ";
				} else {
					echo $words." ";
				};
 
			};
 
			echo "</li>";
 
	};
 
echo "</ul>";
?>

Starting from the top. We define a function and pass it two variables, our Twitter RSS URL which you can find here.

Get your twitter RSS feed here.

The second variable will tell the function how many tweets to display.

After defining the function I dropped in the Curl code from here.

$ch = curl_init("$feed_url");
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_HEADER, 0);
	$data = curl_exec($ch);
	curl_close($ch);

From what I have read this starts the curl session and fetches the data from the RSS feed and writes it to the $data variable. Next comes a bit of code from the NETTUTs tutorial.

	$x = new SimpleXmlElement($data);

From my research SimpleXmlElement turns XML data into easy to use arrays in PHP. So now we have a variable $x that is an array that contains the data we passed to it from our RSS feed that we can use as a normal array.

echo "<ul class='twitter'>";
 
	$i = 0;
 
	foreach($x->channel->item as $entry) {
        	if($i == $num) break;
			$i++;

This snippet will make a second variable that will control how many tweets we display using and if statement and the break command. This also starts the foreach segment that will look through our array and pick out our tweets.

Looking at our feed

It took me a little while to figure out exactly how to move through the RSS feed and get out the data we need. If you look at the source code for the RSS feed it looks like this.

<item>
    <title>graphfixpunk: i cant believe how many people are willing to pay for help on in my basic HTML/CSS class</title>
    <description>graphfixpunk: i cant believe how many people are willing to pay for help on in my basic HTML/CSS class</description>
    <pubDate>Wed, 29 Oct 2008 01:17:33 +0000</pubDate>
    <guid>http://twitter.com/graphfixpunk/statuses/979843077</guid>
    <link>http://twitter.com/graphfixpunk/statuses/979843077</link>
  </item>

if you remember the foreach statement about we started with $x and then moved to channel $x->channel and then went into item $x->channel->item and then we executed everything in the foreach statement for every item in the channel.

Back to the code

So what this code does is it fetches the content of the tweet.

$tweet = $entry->title;
 
$tweet = explode(' ', $tweet);
 
$tweet = implode(' ', array_slice($tweet, 1, 140));

Then $tweet is exploded where every word in the string will become its own word in an array. Then implode will compress that array back into a string starting from 1 (skipping 0 which is always @username)

So What that did was get the content of out tweet and cut out the first word.

So what about links?

Up until now everything was fairly easy we could just echo $tweet and stop there but then we wouldn’t have any links which the default twitter badge shows. After a lot of searching on Google and the PHP manual I found substr which lets you use parts of strings without altering the string.

$tweet = explode(" ", $tweet);
			echo "<li>";
 
			foreach ($tweet as $words)	
 
				if ($words[0] == "@") {
					echo "<a href='http://twitter.com/" . substr($words, 1) . "'>" . $words. "</a> ";
				} elseif (substr($words, 0, 7) == "http://") {
					echo "<a href='". $words . "'>" . $words. "</a> ";
				} else {
					echo $words." ";
				};
 
			};
 
			echo "</li>";

For starters we will explode $tweet again so we have an array that contains all the words in our tweet. Then we start a LI element to contain the tweet.

This is where it gets confusing. Start another foreach loop. This loop will check every word to see if the first character is equal to “@” and if it is echo an anchor tag that links to twitter.com/the_word.

If the first character is not “@” then it checks if the first seven characters in the word and if they are equal to “http://” then we echo an anchor that links to whatever the word is.

If both of those tests fail then it just echos the word with a space afterward. This foreach statement will run through this check for every word in a tweet and check for links and echo these statements back.

Lastly close your foreach and echo a close to your LI, end the foreach you started at the top of the script, and end the UL and your done.

Implementation

I had some problems getting this to work out of Wordpress default functions.php file so I made my own user-functions.php and added this code to my header.

<?php include_once (TEMPLATEPATH . '/user-functions.php'); ?>

Then just call the function where you want your twitter list to appear and pass it the url for your feed and the number of tweets to display.

	<?php DisplayTwitterFeed("http://twitter.com/statuses/user_timeline/15374455.rss", 5); ?>

So why is this better then the twitter badge?

The default twitter badge uses script tags which will not display when a user has Javascipt disabled (a little over 10% of my visitors). This code will show up no matter what and still displays links and names of tweeters.

Comment with questions and problems.

1. use wp_enqueue_script to load the Jquery that is packaged with Wordpress.
2. go over how Jquery Cycle works and make The Loop generate the necessary XHTML
3. make a custom query to load only the posts we want
4. configure Jquery Cycle to run the slideshow

1. Enqueue Jquery

The first thing you want to do is to get Jquery to load Wordpress comes with a version of Jquery included so its generally best to load that> The function to load javascript libraries and plugins is wp_enqueue-script. The code to load the jQuery and the jQuery Cycle plugin is below

<?php wp_enqueue_script('jquery.cycle.all.min','/wp-content/themes/upsidedowncity_v_3/jquery.cycle.all.min.js',array('jquery')); ?>
<?php wp_enqueue_script('jquery_script','/wp-content/themes/upsidedowncity_v_3/jquery_script.js'); ?>
<?php wp_head(); ?>

You place this code right above the “wp_head();” line your header.php file. The first wp_enqueue_script calls JQuery cycle which has been uploaded in to my current theme folder. The first section is the name of the script (file name minus the .js) then the path to the script then the array holds the libraries that the script depends on (JQuery in this case).

The next wp_enqueue_script calles “jquery_script” which is the .js file where we can place all of our jquery.

How Jquery Cycle Works

Jquery Cycle is a jquery plugin build for slideshows. To make it work you give it an element and it turns every child of that element into a slide. so to make our slideshow work we need to have a div with some children and in those children will be out images and headers.

So we need to make a containing div with unordered lists that hold 3 images and links. These ULs are the “slides ” Not the LIs.

The Code

Don’t get overwhelmed by the next code block. I’ll go over it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<div id="featured_posts" class="clear">
<a class="prev"></a>
 
<div class="slide_cont">
 
<?php 
$containter = 1; 
$display = 1;
?>
 
  <?php $my_query = new WP_Query('category_name=featured');
  while ($my_query->have_posts()) : $my_query->the_post(); ?>
 
<?php
if (($containter == 1) and ($display >= 4)) {
	echo "<ul class='slides' style='display:none;'>";
	} elseif  ($containter == 1) {
 	echo "<ul class='slides'>"; 
	} else {}
?>
 
<li>
	<h3 class="long"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
	<a href="<?php the_permalink() ?>"><img width="260" height="120" src="<?php $values = get_post_custom_values('featured'); echo $values[0]; ?>" alt='<?php the_title(); ?> Thumbnail Image' /></a>
</li>
 
<?php 
$containter++; 
$display++;
?>
 
<?php
if ($containter >= 4) {
echo "</ul>"; $containter = 1;} else {}
?>
 
		<?php endwhile; ?>
</div> <!-- end #slide_cont -->
 
<a class="next"></a>
</div> <!-- end #featured_posts -->

Right, Starting at the top on line 1 we begin a div to wrap this whole section with, we also end this div on line 41.

On line 2 we make an empty anchor tag and give it a class of “prev” this will be the button that make the slideshow go to the previous slide. There is also another anchor with a class of “next” right before the featured_posts div closes.

Lines 6-9 make 2 php variables called “container” and “display” later we will use these variables to control when to make our slide containers.

11-12 creates a new wp_query and tells to get everything from the category called “featured”. If you want your slides to be from a different category you can change that here. This also starts The Loop and everything from here until line 37 will repeat for every post in the “featured” category.

14
15
16
17
18
19
20

<?php
if (($containter == 1) and ($display >= 4)) {
	echo "<ul class='slides' style='display:none;'>";
	} elseif  ($containter == 1) {
 	echo "<ul class='slides'>"; 
	} else {}
?>

This is code that generates the wrappers around our slides. it uses the variables from lines 6-9. Lines 15-16 say if container is equal to 1 and display is equal to or greater then 4, make an unordered list with “display:none;”. You need to have display:none; because otherwise users will see all the slides while the document is still loading and then they all get hidden.

The next 2 lines say if the above test fails (i.e. container is not equal to 1 and display is not equal to or greater than 4) to check if container if equal to 1 if it is them make an unordered list.

If both these test fail nothing happens.

Lines 22-25 generates the header and the images for each post. You can add the images inthe custom field section in the wordpress write panel by putting a path to image as the value and the key as “banner”. For more information you can visit

The PHP chunk on lines 27-30 tells php to add 1 to the value of both of out variables you will see why later.

32
33
34
35

<?php
if ($containter >= 4) {
echo "</ul>"; $containter = 1;} else {}
?>

The above php checks the “counter” variable and if it is equal to or greater then 4 it ends the unordered list that was started above when the UL was started. Then it resets container to 1 so a new list will start next time we go through the loop. If counter is not equal to or greater then 4 it does nothing.

How it works

Here is a visual flow for how the above loop should work.

1. The Loop Starts.
2. The first “if” statement fires counter is equal to 1 so a visible UL is made.
3. An image and link are generated
4. Display and container now equal 2
5. the second “if” statement is checked container equal 2 so nothing happens
6. The first “if” statement fires container and display equal 2 so nothing happens
7. Another image and link is made
8. Display and container now equal 3
9. the second “if” statement is checked container equal 3 so nothing happens
10. The first “if” statement fires container and display equal 3 so nothing happens
11. Another image and link is made
12. Display and container now equal 4
13. the second “if” statement is checked container equal 4 so our first 3 links and images are wrapped in a UL. Counter now equals 1
14. The first “if” statement fires container equals 1 and display equals 4 so a hidden UL is made
15. An image and link are generated
16. Display equals 5 and container equals 2
17. Ect…

What we have now is a DIV that contains unordered lists. each list contains a set of three posts

Make Cycle Work With Our Loop

Now we have our loop configured and it is generating XHTML like the following.

<div class="slide_cont">
<ul>
	<li><!--Loop Stuff --></li>
	<li><!--Loop Stuff --></li>
	<li><!--Loop Stuff --></li>
</ul>
<ul>
	<li><!--Loop Stuff --></li>
	<li><!--Loop Stuff --></li>
	<li><!--Loop Stuff --></li>
</ul>
</div>

Now in the jquery_script.js file in out theme folder we can insert the following example from the Cycle documentation.

jQuery(document).ready(function($) {
$('.slide_cont').cycle({
    fx: 'scrollDown'
});
});

Notice that I did not call JQuery with the $ shortcut. By default the jQuery included with wordpress uses jQuery.noConflict( ) so it does not interfere with the Prototype library. Hence using the different (document).ready(function) is needed. You can read more about noConflict here.

Note I use a slightly different cycle on my web page that adds previous and next controls. and adds several other parameters. I also use CSS buttons to make those empty anchors in the previous and next buttons.

Style Your Slideshow

Cycle works best when you fix all of your elements widths and heights. Below are the styles that I have applied to my sideshow

/*Featured Post Slide Show*/
#featured_posts{
width:960px;
margin-left:-10px;
height:140px;
}
 
#featured_posts h3{
font-size:12px;
width:255px;
}
 
#featured_posts ul{
 
}
 
#featured_posts ul li{
float:left;
margin:0 9px 0;
}
 
.slide_cont{
width:835px;
clear:none;
float:left;
margin:0 17px;
}
 
.slide_cont ul li h3 a, .slide_cont ul li h3 a:hover{
color:#fff;
}
 
.prev{
display:block;
width:35px;
height:75px;
background: url('images/left_arrow.png') no-repeat center;
cursor:pointer;
float:left;
margin:35px 0 0 10px;
}
 
.next{
display:block;
width:35px;
height:75px;
background: url('images/right_arrow.png') no-repeat center;
cursor:pointer;
float:right;
margin:35px 10px 0 0;
}
 
h1, h2, h3, h4, h5, h6{
color:#fff;
background:#000;
font-family:"courier new",courier;
padding:3px 0 3px 5px;
}

That should give you some basic styles to get you started.

Bring it all together

This is where it all comes together. I made my life easy by grouping all of the PHP code for the slideshow in featured_post_slideshow.php and used

<?php include('featured_posts_slideshow.php') ?> <!--Adds Featured Posts -->

At the bottom of my header.php to make it work across every page. Also now would be a good time to check if you have Cycle and jquery_script.js in your theme directory and is the wp_enqueue-script calls are correct and placed above the wp_head(); line in your header.php

If you have any questions leave a comment and I’ll help you out.

This also has some bugs. If the number of posts in your “featured” category isn’t evenly divisible by 3 the whole thing will come crashing to a halt.

Includes featued_posts_slideshow.php, CSS, Images and JQuery.