Dynamic content plug-in

Today we are building a “plug-in” mainly for WordPress, but you we will show you how to use it on a regular site as well.

You will need to know a certain degree of how to make a website from scratch. It would be to your best advantage to know PHP, jQuery, CSS and XHTML to fully understand what is actually happening.

Things you will need to complete this plug-in:

The latest version of jQuery

You will need this file block.php (right-click / save-as)

The top graphic that.png

The content background this.png

Adding the scripts

First we must add the jquery script to the page

Now we must add the jquery that will take the elements and hide them, and give the function to show, hide and toggle

$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$(‘#recent, #archiv’).hide();
// shows the slickbox on clicking the noted link
$(‘a#arc-s’).click(function() {
$(‘#archiv’).show(‘slow’);
return false;
});
// hides the slickbox on clicking the noted link
$(‘a#arc-h’).click(function() {
$(‘#archiv’).hide(‘fast’);
return false;
});
// toggles the slickbox on clicking the noted link
$(‘a#arc’).click(function() {
$(‘#archiv’).slideToggle(700);
return false;
});
// shows the slickbox on clicking the noted link
$(‘a#rec-s’).click(function() {
$(‘#recent’).show(‘slow’);
return false;
});
// hides the slickbox on clicking the noted link
$(‘a#rec-h’).click(function() {
$(‘#recent’).hide(‘fast’);
return false;
});
// toggles the slickbox on clicking the noted link
$(‘a#rec’).click(function() {
$(‘#recent’).slideToggle(700);
return false;
});
});

</script>

Adding the links to show the content

This step is fairly simple, all we need to do is make a simple link, but give it a couple of unique attributes. Let’s also place the links inside a div so it can be easily styled.

<div id=”mini-nav”>
<a href=”#” id=”arc” onclick=”$(‘#recent’).slideUp(‘slow’);”>Topics</a>
<a href=”#” id=”rec” onclick=”$(‘#archiv’).slideUp(‘slow’);”>Recent Posts</a>
</div>

We added the id=”" which has the name of the link and the onclick=”" will hide the the div opposite of the one clicked.

Now lets add the block

The block, as i refer to it as, is the content that will be displayed when you click on one of the two links above. By now I hope you have downloaded block.php

<?php include(“block.php”); ?>

Further details on the Block

In the block file, I have it coded to Work on WordPress. This will not work on anything else but wordpress. So to change that, we need to open up the block.php file and edit a few parts.

Inside the div “archiv”

<?php wp_list_categories(‘show_count=1&title_li=’); ?>

Take out that, which will list all the categories in WordPress and add whatever text/code you wish.

Inside the div “recent”

<?php

global $post;

$myposts = get_posts(‘numberposts=5&offset=1&category=1′);

foreach($myposts as $post) :

<?php endforeach; ?>

Change that, which get your recent posts in WordPress, to whatever text/code you want.

Now to style it

Add this either to your stylesheet (.css), or to the local file between the <style> tags.

#mini-nav {
position: absolute;
top: 0px;
left: 45%;
width: 150px;
height:20px;
background: url(that.png);
}
.doit li{
display: inline;
padding-right: 10px;
}
#archiv, #recent {
margin-top: 35px;
margin-bottom: 10px;
padding-top: 6px;
width: 600px;
height: 54px;
background: url(this.png);
}

This will put the two links at the top of the page on top of the black button. And it will create the padding and margins for the rest of your content that you can add.

Wrapping up

So, this will create dynamic content on any site, and is a great little plug-in for WordPress. If you have any questions or comments, please leave them in the comment field below. I hope you enjoyed it.

Written by Tyler

Web designer, developer, Funny guy, Thinker, Music lover. Follow me on Twitter @tjefford

You can leave a response, or trackback from your own site.

5 Responses to “Dynamic content plug-in”

Dynamic Content plug-in using jquery for Wordpress | WhiteSandsDigital.com Says:
August 7th, 2008 at 7:21 am

[...] how to make a dynamic content plugin for wordpress or any website using jquery.read more | digg [...]
kaikajky Says:
September 9th, 2008 at 10:28 pm

whenever i try to save the block.php with right click, it never works. i only gets php file that has this

Fatal error: Call to undefined function wp_list_categories() in /home/division/public_html/files/block.php on line 4
Tyler Says:
September 10th, 2008 at 12:04 am

Woops, Sorry about that. It is fixed now. Note you will need to save it as a .php file not .txt
Ariyo Says:
September 10th, 2008 at 8:02 pm

Live demo would be appreciated!
Tyler Says:
September 10th, 2008 at 8:39 pm

@Ariyo, Demo is at the top of the blog, I am using my plug in