Luca Prosepio updated both the theme and the plugin and you can see them working on www.giochi-gratuiti.com.

Download both the theme and the plugin.

That’s why I made my 22 lines script to display my sidebar widgets in random order. And not just in “random order”, because I needed to keep some widgets in fixed positions, and having the remaining ones rotating.

Motivation

Once I removed Adsense and network ads from the blog I received a lot of sponsorship requests.

There’s nothing wrong with the ones I denied, it’s just they do not match with the content of the blog.

Anyway, as I am doing some minor changes to the blog, I am starting to place the supporters in the sidebar.

Every block is a widget created from the Appearence menu this way:

And what I want is having the first and the last widgets (respectively the twitter “Follow me” button and the Facebook fan widget) to remain fixed in their first and last position, while the remaining widget should be displayed in random order.

Saying it quick, I needed a script to display in random order widgets from the i-th to the j-th

The theory

If you theme is designed according to WP guidelines, your sidebar.php file should contain something like this:

<div class="sidebar">
	<ul>
		<?php if(function_exists('dynamic_sidebar')):dynamic_sidebar(); else : ?>
		<?php endif; ?>
	</ul>
</div>

Where dynamic_sidebar function calls each of the active widget callbacks in order, and outputs the sidebar itself.

The generated html is something like this one:

<li id="some_id" class="widget widget_text">1st Widget content</li>
<li id="some_id" class="widget widget_text">2nd Widget content</li>
...
<li id="some_id" class="widget widget_text">i-th Widget content</li>

At this time, since there aren’t hooks to handle widget output, we have to save the generated html, break it into individual widgets’ html, and mix it as required.

The code

The following code shouldn’t be copied and pasted, and assumes you haven’t lists inside your widgets. But it can give you a brief idea of what you’re supposed to do.

First, call your sidebar in sidebar.php this way:

<div class="sidebar">
	<ul>
		<?php if(function_exists('dynamic_sidebar')):random_widgets('Sidebar',2,5); else : ?>
		<?php endif; ?>
	</ul>
</div>

I am calling random_widgets function rather than dynamic_sidebar.

The arguments are the sidebar name, the index of the first widget to be shuffled and the index of the last widget to be shuffled. Every widget outside such indexes won’t be shuffled.

random_widgets function is defined inside functions.php

function random_widgets($sidebar,$random_start,$random_end){
	ob_start();
	$widgets = dynamic_sidebar($sidebar);
	if($widgets){
     	$html = ob_get_contents();
     	$widgets_array = explode("<li",$html);
     	$head = array_slice($widgets_array, 0, $random_start);
    		$body = array_slice($widgets_array, $random_start, $random_end-$random_start+1); 
		$tail = array_slice($widgets_array, $random_end+1);
     	shuffle($body);
     	$new_array = array_merge($head,$body,$tail); 
     	foreach($new_array as $widget){
     	    if($widget){
     	         $final_html.= "<li".$widget;
     	     }
		}
    }
    else{
        $final_html = "";
    }
    ob_end_clean();
    echo $final_html;
}

What happens? I am saving the output inside a variable called $html. From such variable, I create an array with all widgets, break the array into sub arrays, shuffle the required array and rebuild the final code.

And that’s it, without installing any plugin. You can see the result refreshing the page, sidebar widgets will shuffle, with the only exception of the first and the last widgets, which remain in their place.

Any feedback is welcome, anyway… don’t forget I will release the final theme for free so if you have suggestions or weird requests, don’t hesitate.

Look at this screenshot:

Suggestions are welcome, since obviously once finished the theme will be released for free after a series of tutorials.

There are a lot of plugins doing this task, adding a new type of widget generally called “php widget”, but rather than installing a plugin this simple job can be done simply adding in functions.php file of your theme these few lines:

1
2
3
4
5
6
7
8
9
10

add_filter('widget_text','execute_php',100);
function execute_php($html){
     if(strpos($html,"<"."?php")!==false){
          ob_start();
          eval("?".">".$html);
          $html=ob_get_contents();
          ob_end_clean();
     }
     return $html;
}

Which will turn the default Text widget into a php enabled widget.

Adding this feature directly to functions.php allows you to create a theme with this built in feature without the need of an external plugin. This is very useful when you plan to distribute your theme.

Let’s see how does it work:

Line 1: add_filter hooks a function to a specific filter action.

Filters are the hooks that WordPress launches to modify text of various types before adding it to the database or sending it to the browser screen.

The first parameter is the name of the filter to hook (widget_text) while te second is the name of the function to be called when the filter is applied (execute_php). The third is the priority, and 100 should grant us a very low priority since lower numbers correspond with earlier execution, and the default value is 10.

widget_text is the filter applied to the widget text of the WordPress Text widget.

So in the end we are telling WordPress to run execute_php function when the content of the text widget is generated.

Line 2: exexute_php function. Note the argument, the HTML generated by the Text widget.

Line 3: looking for <?php substring inside the HTML. If we find this substring, it means there is php to be executed inside the widget.

If you wonder why I am looking for "<"."?php" rather than "<?php", it’s just to preserve the correct syntax highlighting in most editors.

Line 4: ob_start() turns output buffering on. While output buffering is active no output is sent from the script, instead the output is stored in an internal buffer. This means the HTML produced by the Text widget is temporarily saved into an internal buffer.

Line 5 : at this time we need to evaluate the HTML as if it was a php script. eval function does the job, but we need to add <> to the HTML (again, split in two to avoid highlight issues) because we must tell eval function the php could not start from the beginning of the HTML string.

An example: if my Text widget contains

<?php echo $_SERVER['REMOTE_ADDR']; ?>

everything will work fine because the Text starts with php. But in this case:

your IP: <?php echo $_SERVER['REMOTE_ADDR']; ?>

eval function will fail because everything before <?php is parsed as php, returning an error. That’s why the text is changed to

?>a value: <?php echo $a; ?>

to tell eval we don’t start with php code.

Lines 6 and 7: once the php has been processed, we need to save the output buffer content, clean the output buffer and turn off output buffering.

Finally at line 9 the HTML is returned, with the php correctly parsed.

And that’s all, without needing any plugin.

That’s why I am asking you some suggestions. How should this blog look like? Which features would you add?

Help me with your ideas and feedback and I’ll design the blog according to your suggestions, obviously publishing the source code as usual.

I have to say I don’t like that much the blogs with slideshows in the header, preferring minimalist design like tutsplus network.

Well, I will wait for some suggestions, I’d start from the header. Consider I want to keep the logo.

WordPress heroes, this is your time. Show me your ultimate theme.

The problem is Mochi guys added a new field called “languages” that wasn’t supported by the database table.

I hope you will keep on using the plugin, and I want to inform you I am writing the 2.0 version, with the capability to feed games from big portals such as Kongregate and Newgrounds.

If you have a wish list, this is the time to add your most wanted feature.

Also, I would like to post on my Facebook fan page an album with all sites using the plugin or the theme, so if you want to see your site featured, send me a screenshot at info[at]emanueleferonato.com

We are about to create a custom contact page that will work under WP 3.0, and more precisely with Twenty Ten theme. Obviously, with some minor changes you will be able to do the same in your theme.

The script

Let’s start: in your theme folder, create a new file called contact.php (or whatever other name with php extension) and write this code:

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<?php
/*
Template Name: Contact me
*/
if($_POST[sent]){
	$error = "";
	if(!trim($_POST[your_name])){
		$error .= "<p>Please enter your name</p>";
	}
	if(!filter_var(trim($_POST[your_email]),FILTER_VALIDATE_EMAIL)){
		$error .= "<p>Please enter a valid email address</p>";
	}                        
	if(!trim($_POST[your_message])){
		$error .= "<p>Please enter a message</p>";
	}
	if(!$error){
		$email = mail(get_option("admin_email"),trim($_POST[your_name])." sent you a message from ".get_option("blogname"),stripslashes(trim($_POST[your_message])),"From: ".trim($_POST[your_name])." <".trim($_POST[your_email]).">\r\nReply-To:".trim($_POST[your_email]));
	}
}
?>
<?php get_header(); ?>
<div id="container">
	<div id="content" role="main">
		<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>	
			<h1 class="entry-title"><?php the_title(); ?></h1>
			<div class="entry-content">
			<?php if($email){ ?>
				<p><strong>Message succesfully sent. I'll reply as soon as I can</strong></p>
			<?php } else { if($error) { ?>
				<p><strong>Your messange hasn't been sent</strong><p>
				<?php echo $error; ?>
			<?php } else { the_content(); } ?>
				<form action="<?php the_permalink(); ?>" id="contact_me" method="post">
					<input type="hidden" name="sent" id="sent" value="1" />
					<ul class="contactform">
						<li>
							<label for="your_name">Name</label>
							<input type="text" name="your_name" id="your_name" value="<?php echo $_POST[your_name];?>" />
						</li>
						<li>
							<label for="your_email">Email</label>
							<input type="text" name="your_email" id="your_email" value="<?php echo $_POST[your_email];?>" />
						</li>
						<li>
							<label for="your_message">Message:</label>
							<textarea name="your_message" id="your_message"><?php echo stripslashes($_POST[your_message]); ?></textarea>
						</li>
						<li>
							<input type="submit" name = "send" value = "Send email" />
						</li>
					</ul>
				</form>
				<?php } ?>
			</div><!-- .entry-content -->
		</div><!-- #post-## -->
		<?php endwhile; ?>
	</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now let’s see what we’ve done:

Lines 2-4: This is the way we assign a template name to the page. In this case, the name is Contact me

We’ll see later what lines 5-19 do, and let’s jump to…

Lines 21-27: this is the same content you can find in page.php file into Twenty Ten theme folder, and if you’re using a different theme it should be the same content you can find in your theme page.php file until the beginning of the content of the page (typically the_content()).

In my case, I just replaced

1
2
3
4
5

<?php if ( is_front_page() ) { ?>
	<h2 class="entry-title"><?php the_title(); ?></h2>
<?php } else { ?>	
	<h1 class="entry-title"><?php the_title(); ?></h1>
<?php } ?>

with

<h1 class="entry-title"><?php the_title(); ?></h1>

because I know a contact page can’t be the front page.

Lines 28-33: Here come to play two variables, called $error and $email, you’ll see later how to set their values, meanwhile you have to know $error is an empty string or a string with an error (something like “You email address is not valid”) and $email is true if the email has been successfully sent.

The code proceeds this way:

* If the email has been sent, show a “Thank you message” and nothing else

* If the email has not been sent and there is an error, show the error and the form

* If the email has not been sent and there isn’t an error, show the page content (something like “Hello!! This is my fancy contact page!! Drop me a mail!!) and the form

Lines 34-53: The form itself, the easiest possible, it’s up to you to add some more fields, if needed, and some styling.

Lines 55-61: The end of the page, like in the normal Twenty Ten page.

Now it’s time to see the php that handles emails and errors

Line 5: If “Send email” button (line 50) has been pressed…

Line 6: set $error variable to empty string

Lines 7-9: creating an error message if the user did not enter his name

Lines 10-12: same as before, looking for a valid email address

Lines 13-15: same as before, looking for a message

Lines 16-18: if I did not find any error, I send the email with a basic formatting and sanitizing.

The setup

Once you created this file, create a new page this way:

Look how I assign the page template according to the file recently created.

And this is what you’ll get:

Your own custom contact page. It’s just a basic one, but if I receive good feedback, I can improve it with some jQuery magic…

Named Thelonious after the american jazz composer Thelonious Sphere Monk (October 10, 1917 – February 17, 1982), will represent a revolution in WP community.

Major new features in this release include:

• a sexy new default theme called Twenty Ten
• Short links support
• Custom backgrounds
• Custom headers
• Custom shortlinks
• Custom menus
• Custom post types
• Custom taxonomies
• Multi users support
• Contextual help in admin area

And obviously… it works with Triqui MochiAds arcade theme and plugin.

Now it’s time to dive into theme development!!

I received some interesting suggestions, and one of them is to link all posts of the same series. This is what a reader said: “In the first post, put a link of all the steps (requires manual editing)”.

I found a way to put an index on each post of a series using custom fields, and I am sure you’ll find it interesting. Let’s take Create a Flash game like Rebuild Chile series as example.

I want, in every post of the series, to show the full list of posts of the series. Without a lot of manual editing, of course.

So, that’s what I did: first, for every post of the series, I added a custom field called series with Create a Flash game like Rebuild Chile value. The idea is to add a series custom field to every post in every series with a proper value.

If you don’t know how to add a custom field, here it is a little help:

At the end of the Post page admin, you’ll find the form to add new custom fields. That’s how I added series custom field. Now, a few lines of code to rule them all… this is what you have to include somewhere inside the so-called WordPress Loop:

1
2
3
4
5
6
7
8
9
10

<?php $series = get_post_meta($post->ID, 'series', true); if($series): ?>
	<div id = "series">
		<h2>Read all <em><?php echo $series; ?></em> series</h2>
		<ul>
		<?php $chapters = get_posts('numberposts=-1&meta_key=series&orderby=date&order=ASC&meta_value='.$series); foreach($chapters as $chapter):?>
			<li><?php if($chapter->ID != $post->ID): ?><a href ="<?php echo get_permalink($chapter->ID); ?>"><?php endif; echo $chapter->post_title; ?></a></li>
		<?php endforeach; ?>
		</ul>
	</div>
<?php endif; ?>

Line 1: Assigning to a variable called $series the value of the series custom field value, if any. Then, if there is a value…

Line 5: Creating a $chapters array and populating it with every post (numberpost=-1) whose series custom field (meta_key=series) has $series value (meta_value=$series) ordering them by date (orderby=date) in ascending way (order=ASC). Then scanning the entire array, saving each item into $chapter
variable.

Line 6: Adding the post title, along with a link if it’s not the current post

The remaining lines are just HTML to let me style the content.

You can see the result in the Create a Flash game like Rebuild Chile series… I have to find the right style but I think I’m on the right way.

Do you like this way to use custom fields?