In this guide, we are going to create a simple plugin that scan through the post content for “{donationcode}” and replace it with our paypal donation codes. Jump to complete code

1. Creating a new plugin php file

We created a file called simple_replacer.php and put it into wp-content/plugins/simple_replacer/ folder.

2. The plugin header

<?php
/*
Plugin Name: Simple Replacer
Plugin URI: link to your page to download the plugin or usage guide
Description: Replaces {donationcode} with paypal donation codes
Author: Zen
Version: 1.0
Author URI: http://zenverse.net/
*/
 
?>

3. Adding a function that does the replacing work

Type these codes into the file after the header part (after */)

function the_replacer($content) {
 
$post = str_replace( '{donationcode}' , 'YOUR_DONATION_HTML_CODES' , $content);
 
return $content;
}

NOTE:
Without returning the variable $content, you will ruin the whole post content (return empty content), so make sure you include the “return” line.

4. Adding filter, let wordpress know what we want to do

Add this, 1 line before the php closing tag (?>)

add_filter('the_content', 'the_replacer');
 
//if you want to run the function on excerpts too, uncomment the line below
//add_filter('the_excerpt', 'the_replacer');

NOTE:
The function name “the_replacer” must match the php function that you created in step 3.

The Complete Code

<?php
/*
Plugin Name: Simple Replacer
Plugin URI: link to your page to download the plugin or usage guide
Description: Replaces {donationcode} with paypal donation codes
Author: Zen
Version: 1.0
Author URI: http://zenverse.net/
*/
 
function the_replacer($content) {
 
$post = str_replace( '{donationcode}' , 'YOUR_DONATION_HTML_CODES' , $content);
 
return $content;
}
 
 
add_filter('the_content', 'the_replacer');
 
//if you want to run the function on excerpts too, uncomment the line below
//add_filter('the_excerpt', 'the_replacer');
 
?>

That’s it.

1. Adding codes to The Loop

First of all, if you do not know what is The Loop, please refer to this page.

Open up index.php, look for:

<?php the_excerpt(); ?>

or, your theme may be using this instead of that above:

<?php the_content(); ?>

Add these codes just before the “the_excerpt” or “the_content” line :

<?php if (function_exists('has_post_thumbnail')) {
 if ( has_post_thumbnail() ) { ?>
	<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array( 150, 150 ), array( 'class' => 'alignleft') ); ?></a>
<?php } } ?>

Explaination:

• The first line check whether “has_post_thumbnail” function exists before running the code, so that it wouldn’t causes fatal error in older wordpress version.
• has_post_thumbnail is the function that determine whether your post has post thumbnail
• the_post_thumbnail is the function that output the post thumbnail <img> tag

.

2. Using the_post_thumbnail()

According to the wordpress codex, the function’s usage is:

<?php the_post_thumbnail( $size, $attr ); ?>

It can accept 2 arguments. The first argument is the thumbnail size and the second argument is the image’s attributes.

Based on the example in part 1
I used to specify the thumbnail size in array form, like in the above example (a square thumbnail of 150 pixels).

For the second argument, I added .alignleft class to the thumbnail so that it floats left. You can add more attributes like this too:

the_post_thumbnail( array( 150, 150 ), array( 'class' => 'alignleft' , style' => 'border:1px solid red ; margin-right:5px ;' ) );

3. Make your theme support post thumbnail

Open functions.php, scroll to the most bottom and add this before ?> (the closing php tag) :

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
}

Visit your admin panel and edit/create a post, you will then notice a new box called “Post Thumbnail” appear at the bottom right corner. You can add thumbnail there.

4. I need rectangle thumbnail

When you upload a thumbnail, wordpress generates only square thumbnails. What if you need rectangle thumbnail in your theme?

In your functions.php, look for:

add_theme_support( 'post-thumbnails' );

After that, add this in the next line:

set_post_thumbnail_size( 300, 100, true );

The first argument is width, second is height and the third is crop_flag (if true, wordpress will crop it upon creating the thumbnail, instead of resizing)

From now on, wordpress will generate an additional rectangle thumbnail of size 300 x 100 pixels everytime you upload image.

Okay, you might ask, what about my old uploaded images? I want each of them to have a rectangle thumbnail too. Fortunately, there is a plugin called “Regenerate Thumbnails” which can do the job for you automatically.

Hope this helps

<?php if ( has_post_image() ) { ?>
	<a href="<?php the_permalink(); ?>"><?php the_post_image( array( 125, 125 ), array( 'class' => 'alignleft' ) ); ?></a>
<?php } ?>

However, the function names above were based on wordpress 2.9 RC1. The functions names actually changed when Wordpress 2.9 is out.

• has_post_image() -> has_post_thumbnail()
• the_post_image() -> the_post_thumbnail()

So the codes you need to use is:

<?php if ( has_post_thumbnail() ) { ?>
	<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array( 125, 125 ), array( 'class' => 'alignleft' ) ); ?></a>
<?php } ?>

That’s it.

New Major Features

• “Trash” feature, if you accidentally delete a post or comment you can bring it back, just like your OS.
• Built-in image editor that allows you to crop, edit, rotate, flip, and scale your images.
• Batch plugin update and compatibility checking which means you can update 10 plugins at once
• Easier video embeds that allow you to just paste a URL on its own line and have it magically turn it into the proper embed code.
• Custom post types so you can juggle more types than just post, page, and attachment.
• Sidebars can now have descriptions so it’s more obvious what and where they do what they do.
• Automatic database optimization support, which you can enable in your wp-config.php file by adding define(’WP_ALLOW_REPAIR’, true);.
• Rel=canonical support for better SEO. What is rel=”canonical”?
• Themes can register “post thumbnails” which allow them to attach an image to the post.
• When you’re editing files in the theme and plugin editors it remembers your location and takes you back to that line after you save.

More Info & Links

• Video and full list of new features in WordPress 2.9 @ Official Dev Blog
• Download Wordpress 2.9

There are 2 functions available :

• wptdb_output()
• wptdb_list_themes()

Function : wptdb_output()

Please read ” Using shortcode ” first to understand this page better.

Description

Allows you to output theme info in template files instead of using shortcode in post. It accepts argument in strings and works exactly like the shortcode . Introduced in version 1.4.

Usage

<?php 
if ( function_exists ( 'wptdb_output' ) ) {
wptdb_output($args);
}
?>

Parameters

theme
(string) The theme’s folder name. Must be set.

format
(string) Format id. Default format will be used if you give an invalid format id.

get
(string) Get single info instead of using format.
Valid values : All available tags

autop
(string) Auto wrap the content with HTML paragraph <p> tag

• true – default
• false / 0 (to display content inline)

echo
(string) Show the result or keep it in a variable. Default is true.

• 1 (true) – default
• 0 (false)

Example of Usage

Display format id of 1

<?php 
if ( function_exists ( 'wptdb_output' ) ) {
wptdb_output( 'theme=my-theme-folder-name&format=1' );
}
?>

Display number of previews (inline)

Lunated theme has <?php 
if ( function_exists ( 'wptdb_output' ) ) {
wptdb_output( 'theme=lunated&get=hits&autop=false' );
}
?> previews in total.

Assign to variable

<?php 
if ( function_exists ( 'wptdb_output' ) ) {
$stored = wptdb_output( 'theme=lunated&get=today&echo=0' );
echo $stored;
}
?>

Argument in array form

<?php 
if ( function_exists ( 'wptdb_output' ) ) {
$stored = wptdb_output( array(
'theme' => 'lunated',
'get' => 'today',
'echo' => '0',
) );
echo $stored;
}
?>

Function : wptdb_list_themes()

Description

Allows you to display a drop-down menu (<select>) for visitors to choose and preview your non-private themes. Introduced in version 1.5

Usage

<?php 
if ( function_exists ( 'wptdb_list_themes' ) ) {
wptdb_list_themes($args);
}
?>

Parameters

style
(string) Type of output. Default is “option” which output <option> to be used with <select>. Valid values:

• option – default

hierarchical
(string) Show parent-child relationship. Default is true. Valid values:

• 1 / true (true) – default
• 0 / false (false)

orderby
(string) Sort themes by wordpress default method or by number of previews. Valid values:

• default – default
• hits

order
(string) Sort order for themes (either ascending or descending). Default is asc. Valid values:

• asc – default
• desc

show_hits
(string) Show number of previews beside theme name in a bracket. Default is false. Valid values:

• true / 1
• false / 0 – default

echo
(string) Show the result or keep it in a variable. Default is true.

• 1 (true) – default
• 0 (false)

Example of Usage

Display drop-down menu using default settings

<?php 
if ( function_exists ( 'wptdb_list_themes' ) ) {
echo '<select name="">';
wptdb_list_themes();
echo '</select>';
}
?>

Display drop-down menu , sort the themes by number of previews in descending order

<?php 
if ( function_exists ( 'wptdb_list_themes' ) ) {
echo '<select name="">';
wptdb_list_themes( 'orderby=hits&order=desc' );
echo '</select>';
}
?>

Display drop-down menu with number of previews shown beside the theme name

<?php 
if ( function_exists ( 'wptdb_list_themes' ) ) {
echo '<select name="">';
wptdb_list_themes( 'show_hits=1' );
echo '</select>';
}
?>

Argument in array form

<?php 
if ( function_exists ( 'wptdb_list_themes' ) ) {
echo '<select name="">';
wptdb_list_themes( array(
'orderby' => 'hits',
'order' => 'desc',
));
echo '</select>';
}
?>

What can you do with shortcode ?

You can display theme info such as number of previews in posts and pages. You can output anything within these supported tags:

• Name of the theme (based on style.css)
• Description of the theme (based on style.css)
• Theme URI (based on style.css)
• Author name (based on style.css)
• Version number of the theme (based on style.css)
• Folder name of the theme
• URL to preview the theme (?themedemo=xxx)
• Total no. of previews
• URL to theme’s screenshot file
• URL to the theme’s info page (if exist)
• URL to the theme’s download page (if exist)
• URL to the page to buy the theme (if exist)

Example of what you can do

Retrieve the number of previews of my Lunated Theme and display it inline

Oh. Lunated theme has been previewed 13630 times in total.

Make a preview link to Lunated theme using default format

Preview Lunated (13630)

Understanding and Using Shortcode

Generally, you need to specify the theme folder name like:

To understand more about the shortcode and examples:

1. Get Single Info only

Use attribute ‘get’ to return only a single infomation

Valid values of attribute ‘get’ :
All tags available are the valid values of attribute ‘get’. However, you can only use one tag at once. (without curly bracket of course)

Example:

• Get number of previews of my Lunated theme and display it inline
  
• Get URL to screenshot file of my Lunated theme and display it inline
  

You can use media button to make the whole process a lot easier.

2. Formatted Output – return output based on format id

use attribute ‘format’

you can create and save a new format at plugin option page

Default format is : <a title="{name} has been previewed {hits} times" href="{demo}">Preview {name} ({hits})</a>

Example:

• Display using default format (you don’t have to specify the format id)
  
• Display using format id 1
  

You can use media button to make the whole process a lot easier.

3. Auto wrap output content with HTML paragraph <p> tag

use attribute ‘autop’

by default autop is set to true, which means it automatically wrap the output content with <p> tags

To display the content inline, use autop=”false”

Example:

Signs of the attack

• Strange characters in your permalinks (including eval and base64_decode). For example :
  

  example.com/category/post-title/%&(%7B$%7Beval(base64_decode($_SERVER%5BHTTP_REFERER%5D))%7D%7D|.+)&%/

• Extra administrator account in the users control panel which you cannot see

Check your blog for the signs

• Visit your blog index and see if there are any strange permalinks.
• Login into admin panel > Users > Check whether the number of Administrator is correct

How to prevent this attack?

• Upgrade to the latest version
• Change your admin password to a strong password
• Change your FTP & mysql password

More Info

• More info about this matter at Lorelle’s blog
• How to Keep WordPress Secure

We’ve detected ads as part of your theme. They need to be removed before your theme will be allowed into the theme directory.

I got this message above when I submit my Lunated theme to Wordpress Themes Directory. But the problem is, I do not have any advertisement or sponsored links in that theme.

I can’t seems to find the solution after some time. Therefore, I created a support thread and end up emailed the theme to wordpress team and told them the problem.

It’s Him. Hardcoded Google Adsense Codes

Finally, I got a reply from the team few hours later:

The upload process is picking up the hard coded adsense items in your theme (in header.php for instance). Generally when themes want to support showing ads like this they just provide a way to paste in the ad code.

So, in case you got the error message while you submit a theme, you know what to look for.

What did I mean by Hardcoded Google Adsense Codes?

It is actually the whole part of javascript provided by google adsense after you’ve created a new ads.

<script type="text/javascript">
<!--
google_ad_client = "pub-<?php echo $zenverse_global_adsense_id; ?>";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text";
google_ad_channel = "";
google_color_border = "82cf1e";
google_color_bg = "82cf1e";
google_color_link = "555555";
google_color_text = "555555";
google_color_url = "555555";
google_ui_features = "rc:0";
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

Now that I had this problem, what should I do?

All I wanted is to let save my theme users’ time, allow them to display google ads in a simple way – by just entering adsense publisher id.

Now that I had this problem, I can do nothing but to remove all adsense codes from the template files and provide a way to paste in the ad code in theme option page.

Last but not least, I’ve created a page for user to get adsense codes for their theme along with recommended background and text colours. Look, I want to save their time again

Things you also need to check

Beside google adsense, if you have advertisement slots (eg: 125×125 ads at sidebar) in your theme, you might get that message too. You don’t have to remove the slots, just disable them by default.

According to the Wordpress Developer Center,

• Keep track of how many people have downloaded it.
• Let people leave comments about your plugin.
• Get your plugin rated against all the other cool WordPress plugins.
• Give your plugin lots of exposure in this centralized repository.

As a conclusion, there is no reason not doing this.

Let’s start

1. Make a request to host your plugin at Wordpress.org

You can make a request here. Of course, before that you must be logged in. If you do not have an account yet, register here. After the request submission, wait for an email confirming the status of your request.

Wait for this email (request approved):

Your plugin hosting request has been aproved.
Within one hour, you will have access to your SVN repository at
http://svn.wp-plugins.org/YOUR-PLUGIN-NAME/
with your WordPress.org/bbPress.org username and password (the same one you use on the forums).

2. Use a SVN Client for easier work

If you noticed, the “Using Subversion page at Wordpress.org” keeps telling us the commands to add files, etc. It makes the work seems to be complicated. A first-time user would not know where to start.

We can make our life easier by using a SVN client to do the stuff. I am using Tortoise SVN for Windows in this example.

3. Upload your plugin files for the first time

Make sure your readme.txt follows the standard. You can validate your readme.txt here.

After you’ve installed Tortoise SVN,

• Create a new folder at anywhere you like, the folder is the place to store and update your plugin files. (I created my folder in My Documents)
• Go into the new folder
• Right-click and choose SVN Checkout to retrieve the folders
• When prompted, enter the URL given in the email (example: http://svn.wp-plugins.org/YOUR-PLUGIN-NAME/)
• When prompted, login using account details you registered at Wordpress Extend just now
• Wait for it to load and you will notice that 3 folders (trunk, tags, branches) has been added to your new folder
• Go into “TRUNK” folder, Trunk is the place to store your latest plugin files.
• Move ALL your plugin files into “trunk”
• Right click at anywhere and choose SVN Commit to synchronize your files with Wordpress.org

Side Notes

Upload the files to “trunk” folder without any extra folder and do not zip the files (that’s Wordpress’s job). See below:

An example of uploaded content:
- trunk/readme.txt
- trunk/plugin.php

4. Done

We’ve finished the first upload. Now wait for the update that runs every 15 minutes. After that, try searching for your plugin at Wordpress Plugins Directory.

That’s all. Well, not yet.

There is some work you need to do whenever you released a new version or edit the files. We will cover that in the next part. Coming soon.

Dynamic sidebar is “dynamic”, it simply means that your sidebar can be customised easily by adding / removing widgets in admin panel. If your theme has dynamic sidebar, you can called it a widget-ready theme.

Step-by-step guide to create dynamic sidebar

1. Make sure the HTML codes for your (every) widgets follow a certain format

This is an example:

<div class="widget">
    <h2>Categories</h2>
      <ul>
        <li>Cat #1</li>
        <li>Cat #2</li>
      </ul>
  </div>
 
<div class="widget">
    <h2>About</h2>
    About me About me About me
  </div>

In the above example, we can see that every widget is surrounded by <div class=”widget”> and its title is surrounded by <h2> tags.

2. Look for functions.php

Second, look for functions.php in your theme folder. Create one if it is not there.

3. Register the dynamic sidebar

You need to let wordpress know that your theme has a dynamic sidebar. Place these lines of codes into your functions.php:

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
}

The function uses an array that contains 5 items.
Name – Name of your sidebar
before_widget – the html tags that wraps an invidual widget, eg: div. Put only the opening tag here.
after_widget – if your “before_widget” uses a <div> tag, you should use </div> here
before_title and after_title – html tags surrounding the widget’s title

4. Registering the dynamic sidebar : Examples

If your sidebar look like this:

<div class="rightsidebar">
 
  <div class="widget">
    <h2>Recent Posts</h2>
      <ul>
        <li>Recent Post #1</li>
        <li>Recent Post #2</li>
        <li>Recent Post #3</li>
      </ul>
  </div>
 
  <div class="widget">
    <h2>Categories</h2>
      <ul>
        <li>Cat #1</li>
        <li>Cat #2</li>
        <li>Cat #3</li>
      </ul>
  </div>
 
</div><!--/rightsidebar-->

This is how you register your sidebar. (NOTE: ignore the div that wraps the whole sidebar first, we are currently dealing with codes for every single widget)

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'sidebar',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
}

Another example: If your sidebar look like this :

<div class="rightsidebar">
 
  <div class="widget_top">
    <div class="widget_title">Recent Posts</div>
      <ul>
        <li>Recent Post #1</li>
        <li>Recent Post #2</li>
        <li>Recent Post #3</li>
      </ul>
  </div>
  <div class="widget_foot"></div>
 
 
  <div class="widget_top">
    <div class="widget_title">Categories</div>
      <ul>
        <li>Cat #1</li>
        <li>Cat #2</li>
        <li>Cat #3</li>
      </ul>
  </div>
  <div class="widget_foot"></div>
 
 
</div><!--/rightsidebar-->

This is how you register your sidebar.

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'sidebar',
'before_widget' => '<div class="widget_top">',
'after_widget' => '</div><div class="widget_foot"></div>',
'before_title' => '<div class="widget_title">',
'after_title' => '</div>',
));
}

5. Making the sidebar dynamic

Open sidebar.php. Lets say we have this in our sidebar.php :

<div class="rightsidebar">
 
  <div class="widget">
    <h2>Recent Posts</h2>
      <ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php endwhile; ?>
      </ul>
  </div>
 
  <div class="widget">
    <h2>Categories</h2>
      <ul>
<?php wp_list_categories('show_count=1&title_li='); ?>
      </ul>
  </div>
 
</div><!--/rightsidebar-->

Now we are going to make it dynamic. Leaves only the sidebar wrapper <div> there.

<div class="rightsidebar">
 
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("sidebar") ) : ?>
<?php endif; ?>
 
</div><!--/rightsidebar-->

Please note that the word “sidebar” inside the brackets in !dynamic_sidebar(”sidebar”) is the name you used when registering the sidebar.

It’s done. Your theme is now widget-ready. However, you might want to make it better.

5. Prepare your theme for users that don’t use widgets

Minority of people don’t use widgets in Wordpress, we have to include some basic features for them.

<div class="rightsidebar">
 
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("sidebar") ) :
// these codes will be run if they don't use any widget
 
// I take the sidebars codes from above example
?>
<div class="widget">
    <h2>Recent Posts</h2>
      <ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php endwhile; ?>
      </ul>
  </div>
 
  <div class="widget">
    <h2>Categories</h2>
      <ul>
<?php wp_list_categories('show_count=1&title_li='); ?>
      </ul>
  </div>
 
<?php endif; ?>
 
</div><!--/rightsidebar-->

Look, we have now included 2 basic features for them: Recent Posts and Categories.

6. So, your theme has 2 or more sidebars?

Easy, lets register all of them in functions.php :

Assume you have 2 sidebars with same format :

if ( function_exists('register_sidebars') ) {
register_sidebars(2, array('name'=>'Sidebar%d',
'before_widget' => '<div class="widgetobj">',
'after_widget' => '</div>',
'before_title' => '<div class="widgettitle"><h3>',
'after_title' => '</h3></div>',));
}

Please note that:
- The function used here is register_sidebars instead of register_sidebar.
- Change the number “2″ to the number of sidebars your theme has.
- The %d will be auto replaced by numbers. If you register 2 sidebars, they will be known as Sidebar1 and Sidebar2 (in this example). You are going to use the names later.

This is what we have in sidebar.php :

<div class="sidebar_1_wrapper">
 
  <div class="widget">
    <h2>Recent Posts</h2>
      <ul>
        <li>Recent Post #1</li>
        <li>Recent Post #2</li>
        <li>Recent Post #3</li>
      </ul>
  </div>  
 
</div><!--/sidebar_1_wrapper-->
 
<div class="sidebar_2_wrapper">
 
  <div class="widget">
    <h2>Recent Posts</h2>
      <ul>
        <li>Recent Post #1</li>
        <li>Recent Post #2</li>
        <li>Recent Post #3</li>
      </ul>
  </div>  
 
</div><!--/sidebar_2_wrapper-->

Now we make them dynamic :

<div class="sidebar_1_wrapper">
	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Sidebar1") ) : ?>
	<?php endif; ?>
</div><!--/sidebar_1_wrapper-->
 
<div class="sidebar_2_wrapper">
  	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Sidebar2") ) : ?>
	<?php endif; ?>
</div><!--/sidebar_2_wrapper-->

Please note that:
- The name of sidebars you registered were used here.
- Follow step 5 again to prepare your sidebars for users that don’t use widgets
- If your sidebars do not have same design/format, register them seperately (as in step 3) and make them dynamic like the example just above this.

That’s all

That is all for this tutorial. Please point to me any part that is confusing so that I can make this tutorial better.

Thank you for reading.