Talk In Code

WordPress is a pretty neat blogging platform, but it falls over quite spectacularly when trying to write code in posts. I write a lot of code for Talk In Code and so I have understand what needs to be encoded to make code examples work.

For code example on Talk In Code I use the <code> tag and I encode the following characters.

• < into &lt;
• > into &gt;
• " into &quot;
• ' into &#39;

Note: You must be in HTML mode in your WordPress editor or everything will be double encoded.

If these characters are left in then WordPress will either keep them "as is" (ie, a <br /> will cause a line break) or it will convert them into non standard characters. For example, typing a ' (single quote) is straightforward, but when your users come to copy and paste the code to try it for themselves they find that the characters WordPress gives them cause the examples to fail. So every time you type a ' you have to encode it using &#39;. The following example shows why typing a single quote will break your code examples.

echo ‘Hello World’;

The same thing applies to double quotes, as in the following example.

echo “Hello World”;

WordPress will also try to guess what you are doing and add in tags where you don’t want them. The effect of this is to break your code tags if you leave any space in them. Take the following example of a 4 line snippet of code, with a blank line between line 2 and line 4.

line 1
line 2

line 4

This is because WordPress will see the blank line and try to add some tags in to make it look like it thought you wanted it. In order to stop this you need to put in a &nbsp; (non breaking space) character on any blank lines that you have. The following example fixes the previous example.

line 1
line 2
 
line 4

One neat thing about WordPress is the ability to add images to your posts in a quick and easy manner. You can also create thumbnails of larger images and link to them using a captioned image. The only problem is that when you have sorted out how your images look in your post in the admin section they just don’t appear the same in your template once you have published it.

This is because WordPress creates a set of styles that are used in the admin section and the default WordPress templates. However, these styles are usually left out of custom template stylesheets. If you want to use the same sort of formatting that the WordPress admin section has then open up your stylesheet file in your template and put the following stylesheet rules in at the bottom.

.alignleft {
float:left;
margin:20px 20px 20px 0pt;
}
 
.alignright {
float:right;
margin:20px 0pt 20px 20px;
}
 
.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}
 
.wp-caption {
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
background-color:#F3F3F3;
border:1px solid #DDDDDD;
margin:10px;
padding-top:4px;
text-align:center;
color:#000000;
}
 
.wp-caption img {
border:0pt none;
margin:0pt;
padding:0pt;
}
 
.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
margin:0pt;
padding:0pt 4px 5px;
}

With this simple fix you will now have much better looking image styles.

One note for blog writers out there is that if you want to float an image left or right then you need to place it before the text you need to wrap it around. When you align things to the center the text will not wrap around it.

A widget is a little program that fits into the side menu of your site. These widgets can be moved around using the admin section of your WordPress blog and there are quite a few to chose from with a default install.

To create a theme that supports widgets you can follow the instructions in the post creating a widget proof WordPress theme.

You can create a widget in one of two places, either within your functions.php file of your template, or in a plugin. To get a widget to display you need to call a function called register_sidebar_widget(). This function takes two parameters, the name of the widget in the admin section, and a callback function that controls what the widget contains.

register_sidebar_widget(__('My Widget'), 'myWidgetFunction');

The callback function takes a single parameter called $args, which is used to pass in all of the parameters that are set in the register_sidebar() function call. The first thing you have to do is use the extract() function to convert the $args variable into separate variables. After this function you will have access to such variables as $before_widget, $after_widget, $before_title and $after_title.

The following is an example of a very simple widget callback function that produces a widget with a single bit of text.

function myWidgetFunction($args) {
 extract($args);
 echo $before_widget;
 echo $before_title . __('My Widget') . $after_title;
 echo '<ul><li>The contents of my widget go right here.</li></ul>';
 echo $after_widget;
}

Of course if you wanted the widget to do something more interesting, which is probably your intent, then you can replace this line of text with a loop, or function call or whatever you need.

When you visit the widgets page in the Design section of your blog admin you will now see a widget called My Widget, which you can add to the current widgets on your blog.

Finally, you might have noticed that there is no descriptive text for the widget in your admin section. To add this you have to use the wp_registered_widgets variable, which contains an array of the registered widgets. You need to reference your widget and set an option called description to set the description in your admin section.

$wp_registered_widgets[sanitize_title('My Widget')]['description'] = 'A description of your widget.';

This took me quite a while to track down, and doesn’t seem to be in any of the WordPress codex.

Drag and drop is a useful mechanism to do stuff and can turn a complicated set of buttons or drop down lists into a simple elegant solution.

WordPress has lots of scripts built in, which do a lot of useful functions. However, they are not enabled by default, which means that in order to get your script to work you need to enable them.

The drag and drop functionality in WordPress is provided by the Scriptaculous framework. To get WordPress to include this in your page header just use the function wp_enqueue_script() with the parameter "scriptaculous-dragdrop".

wp_enqueue_script("scriptaculous-dragdrop");

I have had limited success running this code from within functions, so your best bet is to add it to the bottom of your plugin file, outside the scope of any functions.

If you only want to enable them in the admin section the enclose this function call in an if statement that uses the is_admin() function to see if the script is being run in the admin section.

if ( is_admin() ) {
  wp_enqueue_script("scriptaculous-dragdrop");
}

You can now create your sortable list.

<div id="container_sortable">
<div id="item_1">Item 1</div>
<div id="item_2">Item 2</div>
<div id="item_3">Item 3</div>
</div>

And add the JavaScript to get it working. The following code converts

Position.includeScrollOffsets = true;
Sortable.create('container_sortable',{
  tag: 'div',
  scroll: window,
  onChange: doSomething
});
 
function doSomething(){
 // on change code here
}


Note that the id format of "item_itemNumber" as in "item_1" is important to get Sortable class functions like sequence() working. If the items are not in this format then sequence() will return null for that item.

The line Position.includeScrollOffsets = true; is added before the call to Sortable.create() in order to get window scrolling working. If you have a large list, and you want items dragged to the top of the window to scroll upwards then use this and the option "scroll: window" to create a browser compatible mechanism of scrolling the window.

For a full list of the sort of scripts that can include see the bottom of the WordPress page on wp_enqueue_script.

WordPress has an options table that developers can use when creating templates and plugins to store information that would otherwise have to be kept in a separate table or written to a file. Assuming the default table prefix of wp_ the options table is called wp_options.

Rather than allow developers to access this table directly, WordPress has some functions that you can use to create and change options in that table.

To create an option and assign a null value to it use the add_option() function. The parameters are as follows:

• name: The name of the option to be created.
• value: The initial value of the option.
• depcrecated: Optional. Not used (just add a '' to your code)
• autoload: Optional. Should the option be automatically loaded on every page load? Valid values are yes or no, but the default is yes.

add_option( 'my_option' , '' );

If you want to create an option that does auto load then add a no at the end of the parameters.

add_option( 'my_option' , '' , '' , 'no');

To retrieve the value of an option you can use the get_option() function. This takes the name of the option and returns the value contained within the options table. Note that if you have set the option to auto load then this value will be generated from the option cache, otherwise it is generated via a database call.
get_option( 'my_option' );

To update an option you can use the update_option() function. The first parameter is the name of the function and the second is the new value of the option.
update_option( 'my_option' , 'my_value' );

To delete an option (for example, when you are deleting a plugin) use the delete_option() function. This takes the name of the option and deletes the option from the options table.
delete_option( 'my_option' );
One note to add is that you should be careful what you delete from this table as WordPress uses a lot of it to generate pages and things. You can destroy your WordPress install by deleting some of these values.