bavotasan.com » link

An Easy Way to Display an RSS Feed with PHP

c.bavota — Thu, 15 Jul 2010 05:48:41 +0000

RSS feeds are everywhere, and sometimes it’s a good idea to display one to keep people in the loop of important posts from your site, or sites you think might be relevant. Luckily, PHP 5 introduced the DOM extension which make it easy to work with XML documents. Now all it takes is just a small bit of code to fetch and display a feed.

The following code will first create a new DOMDocument() into which we will load the WordPress.org RSS feed.

$rss = new DOMDocument();
$rss->load('http://wordpress.org/news/feed/');

Then we will single out certain elements and place them into an array. For this example, I will just fetch the title, description, link and published on date.

$feed = array();
foreach ($rss->getElementsByTagName('item') as $node) {
	$item = array ( 
		'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
		'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
		'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
		'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue,
		);
	array_push($feed, $item);
}

Finally, we set it to display 5 posts on screen with the titles linking directly to the original post.

$limit = 5;
for($x=0;$x<$limit;$x++) {
	$title = str_replace(' & ', ' & ', $feed[$x]['title']);
	$link = $feed[$x]['link'];
	$description = $feed[$x]['desc'];
	$date = date('l F d, Y', strtotime($feed[$x]['date']));
	echo '.$link.'" title="'.$title.'">'.$title.'
';
	echo 'Posted on '.$date.'
';
	echo ''.$description.'
';
}

Put it all together and this is what you get:


	$rss = new DOMDocument();
	$rss->load('http://wordpress.org/news/feed/');
	$feed = array();
	foreach ($rss->getElementsByTagName('item') as $node) {
		$item = array ( 
			'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
			'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
			'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
			'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue,
			);
		array_push($feed, $item);
	}
	$limit = 5;
	for($x=0;$x<$limit;$x++) {
		$title = str_replace(' & ', ' & ', $feed[$x]['title']);
		$link = $feed[$x]['link'];
		$description = $feed[$x]['desc'];
		$date = date('l F d, Y', strtotime($feed[$x]['date']));
		echo '.$link.'" title="'.$title.'">'.$title.'
';
		echo 'Posted on '.$date.'
';
		echo ''.$description.'
';
	}
?>

Not too complicated. All you need to change is the feed you want to load (line #3) and the number of posts to display (line #14). Of course, you could always play around with the output to get it styled exactly how you want. That is totally up to you.

A Complete Re-Design

c.bavota — Wed, 07 Jul 2010 21:04:24 +0000

Lately, I’ve been feeling bavotasan.com was looking a little too, how do you say, plain and boring. It was truly in dire need of a complete makeover but I couldn’t think of what direction to take it in. So instead of re-designing it myself, I thought it would be a good idea to enlist the help of a friend of mine who just happens to be a great designer. Jean-Marc Runner and I have worked on quite a few projects together (Réno Dépôt, Sparkle Like the Stars, At Home with Kim Vallée) and I couldn’t have picked a better person to give my site a modernized look. The site has been completely rebuilt from the ground up and boy, does it show. Take a look around and you’ll see what I mean.

If something seems out of place to you, or if you have any suggestions, please feel free to drop me a line through the contact link in the menu above or leave a comment below.

Creating a Scrolling Back to Top Button with jQuery

c.bavota — Mon, 28 Jun 2010 20:55:39 +0000

If you take a look way, way, way down at the bottom of this page, you will see a Back to Top button that scrolls the whole page until it reaches to top. It is a pretty simple effect to add to your site and looks a hundred-times cooler than just using your typical anchor name and link. Getting it all to work takes nothing more than a few lines of jQuery version 1.4.2.

First, we need to create our button/link. I am just going to use an anchor tag and some text:

<a href="javascript:void(0)" class="backtotop">Back to Topa>

Next we need to add some jQuery between the tags:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'>script>
<script type='text/javascript'>
jQuery('.backtotop').click(function(){
	jQuery('html, body').animate({scrollTop:0}, 'slow');
});
script>

Remember, you can change the speed by replacing slow with a numerical value. You can also add some easing effects by including the jQuery UI. Read more about easing effects here.

WordPress 3.0: Activating the Background Editor

c.bavota — Mon, 07 Jun 2010 21:31:39 +0000

Adding a color or image to your Web site’s background is not a very complicated thing to do if you are familiar with CSS. Luckily for those out there who know nothing about CSS, WordPress 3.0 introduces a simple admin user-interface that makes it extremely simple to select a color or image for your background. There are even controls for image position, repeating and attachment.

The new background editor in WordPress 3.0

Activating the background editor only requires that you add one line of code to your theme’s functions.php file.

if(function_exists('add_custom_background')) add_custom_background();

This will add the “Background” link to your Appearance panel in the wp-admin. Placing it inside the function_exists() function makes it backwards compatible in case someone uses your theme with WordPress 2.9.

The New Google Font API

c.bavota — Mon, 24 May 2010 15:55:04 +0000

Using the standard Web safe fonts is quickly becoming a thing of the past thanks to modern alternatives like @font-face kits and the new Google Font API. Taking a quick look through the Getting Started guide shows just how simple it is to apply the API to your Web site. All you have to do is add a link between your site’s head tags to the CSS file hosted on Google, and then you can call the chosen font throughout your stylesheet.

Here is an example of the link:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Then you can use the font like this:

>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
>

Check out a list of available font in the font directory. They are all licensed for commercial and non-commercial use.

WordPress 3.0: Checking out the New Menu System

c.bavota — Fri, 21 May 2010 16:43:20 +0000

The release of WordPress 3.0 is almost here, so I thought it would be a good idea to start an in-depth discussion on some of the new features. One that I am really looking forward to, and that has been getting a lot of buzz, is the new menu system. Inspired by a similar system created by WooThemes, WP 3.0 allows the user to create multiple menus that can include any category, page or link they choose. I have been testing the latest build (3.0-beta2-14769) and so far, the menu system interface is looking pretty good.

Here are a couple of screen shots to show you what it looks like:

WordPress 3.0's new menu system.

This is what you will see once you have created a menu.

Taking a look behind the scenes of TwentyTen, the new default theme for WP 3.0, gives a little insight as to how it all works and what needs to be in place to make sure that the theme you are using will take advantage of this new feature.

First, you need to include the following in your functions.php file:

add_theme_support( 'nav-menus' );

Make sure it is placed within the PHP tags. That is all you really need to activate the menu system. A link to the Menus admin page will appear in the Appearance panel. If you really want your theme to stand out, you can even register menu locations so that the user can assign menus to specific areas of your theme templates. This is similar to the sidebar functionality.

register_nav_menu('main', 'Main Navigation Menu');

This will register a menu with the ID “main” and the description “Main Navigation Menu”. Including this snippet will make a new panel appear on the Menus admin page (see the second image above). Now users can select which of their menus will appear in that registered location.

Next comes the function to actually display these menus in your theme. This is how TwentyTen uses the function in header.php:

 wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>

The above code displays the first menu you created, ordered how you have set it, within a div container with the classname “menu-header”.

Here is a list of all the arguments that the function can take (so far):

menu – The menu that is desired. Accepts (matching in order) id, slug, name. Defaults to blank.
menu_class – CSS class to use for the ul container of the menu list. Defaults to ‘menu’.
container – Whether to wrap the ul, and what to wrap it with. Defaults to ‘div’.
container_class – the class that is applied to the container. Defaults to blank.
fallback_cb – If the menu doesn’t exists, a callback function will fire. Defaults to ‘wp_page_menu’.
before – Text before the link text.
after – Text after the link text.
link_before – Text before the link.
link_after – Text after the link.
echo – Whether to echo the menu or return it. Defaults to echo.
depth – how many levels of the hierarchy are to be included. 0 means all. Defaults to 0.
walker – allows a custom walker to be specified.
context – the context the menu is used in.
theme_location – the location in the theme to be used. Must be registered with register_nav_menu() in order to be selectable by the user.

You need to use the theme_location argument to call a registered menu:

 wp_nav_menu( array( 'theme_location' => 'main', 'sort_column' => 'menu_order', 'fallback_cb' => 'display_home' ) ); ?>

I have also added the fallback_cb argument to show how to control the default callback if no menu is created. If you don’t include a callback it will default to wp_page_menu() which will just list your pages. I have assigned a function called display_home() as my callback.

function display_home() {
	echo '.get_bloginfo('url').'">Home
';
	wp_list_categories('title_li=&depth=1&number=5');
	echo '
';
}

By default, that will display a home link and 5 categories.

There still seem to be a few bugs in the new menu system, but that is to be expected in a beta version. All in all, it is a great addition to WordPress, and theme developers should rejoice that they can now easily offer more control to their users by taking advantage of one of the many core features that will be included in WP 3.0.

Force WordPress to use the Latest Version of jQuery

c.bavota — Fri, 02 Apr 2010 15:20:43 +0000

If you’re using WordPress 2.9.x, then the latest version of jQuery included is 1.3.2. What if you want to take advantage of new features in version 1.4, like delaying an animation queue or binding multiple event handlers? You can easily add a link in your header to the latest version, but that might end up conflicting with some plugins or themes.

The best approach would be to use the following piece of code to let WordPress know that you want to load the current version instead.

Place this into your theme’s functions.php file:

function current_jquery($version) {
        global $wp_scripts;
        if ( ( version_compare($version, $wp_scripts -> registered[jquery] -> ver) == 1 ) && !is_admin() ) {
                wp_deregister_script('jquery'); 
 
                wp_register_script('jquery',
                        'http://ajax.googleapis.com/ajax/libs/jquery/'.$version.'/jquery.min.js',
                        false, $version);
        }
}
 
add_action( 'wp_head', current_jquery( '1.4.2' ) ); // change number to latest version

If jQuery is updated, all you have to do is change the version number when calling the function.

Reference: Binary Bonsai

Easy Overlay Modal Window jQuery Plugin

c.bavota — Mon, 15 Feb 2010 17:04:24 +0000

I developed the following jQuery plugin for the Design options admin panel of Magazine Premium. All it needed to do is display an example of all of the @font-face kits that are available with the theme. It is pretty simple and just fades in a centered modal window containing an image when you click on a link.

There are just a few things you need to put in place in order to get it working. First, there is the plugin iteself.

Here is the jQuery code:

(function($) {
  $.fn.easyOverlay = function(){	
    $(this).click(function(e){
      if($("#easyOverlay")) { $("#easyOverlay").remove(); }
      $("body").append("X
");
      $("+ this.rel +"' alt='' />").appendTo('#easyOverlay').load(function() {
        var wide = ($(window).width() / 2) - ($(this).width() / 2);
        var high = ($(window).height() / 2) - ($(this).height() / 2);			
	var scrollTop = $(window).scrollTop();
        $("#easyOverlay").css({
          top: high + scrollTop + "px",
          left: wide + "px",
		  display: 'none',
          visibility: "visible"
        }).fadeIn();
      });
    });
    $("a.closeit").live("click", function(){
      $("#easyOverlay").fadeOut();
    });
  };
})(jQuery)

Here is the CSS you need:

#easyOverlay{
  position:absolute;
  border:1px solid #ccc;
  background:#333;
  padding:5px;
  visibility: hidden;
  top: 0;
  color:#fff;
  z-index: 1000;
}
 
#easyOverlay .closeit {
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 5px;
  background: #333;
  color: #fff;
  cursor: pointer;
  z-index: 2000;
  text-decoration: none;
}

You can easily change some of the design CSS elements but a few thins need to stay in place to make it work. Don’t change the following styles:

#easyOverlay{
  position:absolute;
  visibility: hidden;
  top: 0;
  z-index: 1000;
  }
 
#easyOverlay .closeit {
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
  z-index: 2000;
  text-decoration: none;
  }

Now comes the HTML markup:

<a href="javascript:void(0)" class="screenshot" rel="link-to-your-image.jpg">Name of Imagea>

To call the plugin all you need to do is this:

$(document).ready(function() {
  $(".screenshot").easyOverlay();
});

There aren’t any options so all you pretty much get is a centered modal window that fades in when you click the link, and fades out when you click the X.

Test it out below:

Adler | Chunkfive | Galatia | Riesling

All the images used were provided by Font Squirrel.

Magazine Premium is Ready and I Want to Give Away 5 Copies

c.bavota — Mon, 11 Jan 2010 18:08:08 +0000

I’m almost finished Magazine Premium and I thought it would be a good idea to open up a discussion to see what features people would like to see available. Now don’t go crazy, and please don’t repeat the same requests. I’ll take the top 5 best requests (that aren’t a part of the theme already) and I’ll add them to Magazine Premium. I’ll also give a free copy to those who suggested the top 5.

Add your suggestions in the comments below. If someone already suggested a feature you wanted, don’t fret, just think of something else you might want to see in Magazine Premium.

Here is a quick list of features that I have already added:

widgetized footer bar
custom footer text
optional “Powered by WordPress” link
checkboxes for cats and pages to include in nav menu
optional secondary nav menu
optional search bar or home link in main nav menu
4 front page section with selectable category feed
variable site and sidebar width
featured slideshow with selectable category feed
optional images for each front page section
font selection
color selection
sidebar ads widget
sidebar tabs widget (recent comments, popular posts and subscribe)
simple mailing list/subscribe to our mailing list function
custom CSS editor
full width page template (no sidebars)
new single page options panel with Ajax save function (no more page reloading to save)
drop-down login panel

Those are all of the features I can think of right now.

Here is a sneak peak of the new options panel:

Here is sample of the new design layout:

It still has a little ways to go so don’t be too judgmental.

WINNER #1: Matt – a more elaborate author page
WINNER #2: tinym – presets and @font-face kits
WINNER #3: Marcus – more control of the Read More link
WINNER #4: Boris – choose the post’s thumbnail image
WINNER #5: Scott – easily add links to the nav and sub-nav menus

Creating a jQuery Plugin to Increase Font Size

c.bavota — Wed, 06 Jan 2010 22:32:47 +0000

I have been spending a bit of time lately figuring out how to create my own plugins for jQuery. It doesn’t take much to accomplish and I thought it would be a good idea to put together a small tutorial to show everyone just how easy it can be. For this example, I will create a plugin to increase the font size of a selected div when a link is clicked.

To start, we are going to create a wrapper function which will allow us to use $ without conflicting with other JavaScript libraries:

(function($) {
  // our plugin goes here
})(jQuery);

Next we need to let jQuery know we are creating a new plugin by using $.fn. Let’s call our function increaseFontsize and give it a few variable, such as size, speed, easing and callback, so it works just like other jQuery functions.

(function($) {
  $.fn.increaseFontsize = function(size, speed, easing, callback) {
    // the guts of our plugin goes here
  };
})(jQuery);

Once you have done that, you can create the code that will make our plugin do what we want it to, which is increase the font size of a selected div.

The final plugin code looks like this:

(function($) {
  $.fn.increaseFontsize = function(size, speed, easing, callback) {
    return this.animate({fontSize: size}, speed, easing, callback);
  };
})(jQuery);

Now we can use our plugin just like any other jQuery function.

jQuery(function() {
  jQuery('a.increase').click(function() {
    jQuery('div.paragraph').increaseFontsize(16, 'fast');	
  });
});

Try it out below to see it work.

Increase Font Size | Decrease Font Size

Fusce eget diam purus, quis mattis dui. Proin volutpat velit at mi viverra id condimentum erat rhoncus. Aliquam eu nibh nisi. In hac habitasse platea dictumst. Nulla vel neque nulla, at lobortis nisl. Donec et erat orci. Mauris non semper libero. Curabitur euismod semper mi, at ornare ante sagittis eu. Nunc massa lacus, auctor facilisis tincidunt eu, euismod et massa. Nunc sit amet purus purus, non porttitor quam. In pulvinar erat sed libero vestibulum cursus. Nunc lobortis semper pellentesque. Nullam ut ligula non eros congue vestibulum.