A Basic add_shortcode() Example

In the example below I have used the short code [go] (square brackets are always included as part of a WordPress shortcode) to enter a linked button that could, for example, be used as a link on multiple pages throughout the site.

[realgo]

The advantages in this case are in:

• speed
• ease-of-use
• consistency

You can be assured that the button & link will be consistent whenever the short code is used and the process will be altogether more efficient (provided you remember the short code!).

To set up this short code the following lines were added to functions.php in the theme folder:

function add_go_button() {
return ‘<a href=”http://www.junowebdesign.com/contact”><img src=”http://www.junowebdesign.com/wp-content/themes/juno/images/go-button.png” alt=”go” /></a>’;
}
add_shortcode(‘go’, ‘add_go_button’);

The parameters used by add_shortcode() are firstly the short code (here ‘go’ corresponding to ‘[go]‘ when entering post/page content) and secondly the function that you want to be called when the short code is processed.

Using add_shortcode() To Format Content Easily

The next example shows how short codes can be wrapped around content, in this case to format a section of text. The content in the admin section is input as:

[box]This content is wrapped in a fancy box.[/box]

This content is then processed to appear as:

[realbox]This content is wrapped in a fancy box.[/realbox]

A key advantage here is that the theme can be set up to allow an editor who is unfamiliar with XHTML & CSS enhanced options for formatting their content – and this is all possible while remaining in ‘Visual’ (rather than ‘HTML’) mode in the admin.

The code added to functions.php to enable this short code is:

function fancy_box( $atts, $content = null ) {
return ‘<div class=”fancy”>’ . $content . ‘</div>’;
}
add_shortcode(‘box’, ‘fancy_box’);

This post only begins to look at the options available using the WordPress Shortcode API. This functionality can be extended with attributes and nested short codes.

Using add_theme_support() to Manage Post & Page Thumbnail Images

Available with WordPress 2.9

To take advantage of this functionality, all that is required is one line in functions.php of your theme folder:

add_theme_support( ‘post-thumbnails’ );

Once this line has been added you may notice two differences in the admin section. Firstly, when you are uploading an image, you will now have a link reading ‘Use as thumbnail’. Secondly, there will be a ‘Post Thumbnail’ box when you are editing a post or page.

add_theme_support( ‘post-thumbnails’ ) is especially useful in combination with a function that sets the thumbnail size:

set_post_thumbnail_size( 150, 90 );

which in this case would set the thumbnail size to a width of 150 and height of 90. Additional sizes can be added if you need to use multiple thumbnail sizes within the theme. This is possible through e.g.

add_image_size( ‘mega-thumbnail’, 600, 800 );

You can output these thumbnails on the frontend of your site using the_post_thumbnail() (or e.g. the_post_thumbnail(‘mega-thumbnail’) when there are multiple sizes enabled) within the WordPress loop.

Using add_theme_support() to Manage Navigation Menus

Available with WordPress 3.0

To set up support for managing site navigation menus in the admin (in WordPress 3) you will be able to add the following line to the functions.php file in your theme folder:

add_theme_support( ‘nav-menus’ );

You can then set up a new menu under Appearance > Menus in the WordPress admin and add pages from your site or even from other sites to this menu. There is a convenient drag-and-drop interface for setting the order and hierarchy of the menu items.

The menus you set up here can be added to the front end of your site using the wp_nav_menu() function in your template files.

Finding a WordPress Post ID

To find the ID of a particular post or page in the admin area, you will first need to navigate to Posts > Edit or Pages > Edit as applicable. If you then roll over the link to edit the corresponding page or post, your browser’s status bar will display the url for editing that page. This url will include ‘post=’ and then the ID (e.g. in the image below the post ID is 218).

Finding a WordPress Category ID

To find the ID of a category in the admin area, you can will first need to navigate to Posts > Categories. From the list of categories that will then be visible on the right, you can then roll over the Edit link for the category corresponding to the ID that you need. In your browser’s status bar the url for editing that category will then be visible. This url will include ‘cat_ID=’ and then the category ID (e.g. the category ID for the ‘Business’ category in the example below is 4).

Finding a link category ID is a very similar process – the ids in this case are available via Link > Link Categories.

When you are editing a page or post in the WordPress admin, there are a group of four options above the main edit window labelled ‘Upload/Insert’. The first is for uploading and managing images, the second for video, the third for audio and the fourth for other media (text files, pdfs etc.). If you select the fourth option (named ‘Add Media’) you will then open a pop up window where you can upload the pdf. Once the file has finished uploading, you will have a choice of options. Selecting ‘Insert into Post’ (as you would with an image) will not work here – it only inserts the document’s title into the body content of the page or post. To insert a link to the pdf, rather, you can first select the ‘File URL’ option. Doing so will cause the file’s link location to be displayed in the ‘Link URL’ field. You can then copy this url to your clipboard and exit the pop up box.

Next enter the text that you will use as the selectable link text in the content of the page or post. Click and drag over this text to select it. Once you have selected the text, the link button will become accessible. You can click this to bring up another pop up box where you are able to paste the url for the pdf that you had previously copied. You will finally need to click ‘Insert’ to add the link.

The site has achieved great success already in terms of visits and newsletter subscribers. We’re confident that this success will continue due to their commitment to high quality content. The site offers audio and pdf downloads, videos and frequent blog posts about their course and broader issues relating to teaching and learning English as a foreign language. The blog section features the writing of well-respected contributors such as David Crystal and Linsay Clandfield.

We are proud of the web design and our contribution to presenting their content in an effective, visually-appealing manner and we hope to see the site continue to achieve Macmillan’s goals in award-winning style.

The example displayed below shows the post content in the admin (4 urls entered as plain text on a separate line – one from Flickr, one from Scribd, one from YouTube and one from PollDaddy) and the next two screenshots display the output on the front end of the site (a Flickr image, a Scribd article, a YouTube video and a PollDaddy poll).

This is all possible in WordPress 2.9 through it’s support of the oEmbed protocol. This protocol enables your site to query another site for the code needed to embed parts of its content.

By default you are only able to embed content from a list of sites approved by WordPress. This can be extended by using the oEmbed Discovery plugin or, for developers, using the template tags wp_oembed_add_provider() (for allowing embedded content from an oEmbed-enabled site) and wp_embed_register_handler() (to enable embedded content from a non-oEmbed site).

If you would, however, prefer to prevent links from being converted to embedded content, this feature can be turned off under Settings > Media. There you will need to deselect the options labelled ‘Attempt to automatically embed all plain text URLs’ and ‘Attempt to embed content from unknown URLs using oEmbed’.

When you are editing a page or post, a row of tools for uploading additional files is available just above the main content entry box. These tools are labelled ‘Upload/Insert’ and the first is used to handle image files. Click on this tool to open the media file pop up window.

From the pop up window, click on ‘Select Files’ and choose the image you want to upload.

Once this file has uploaded select the ‘Edit Image’ button.

To crop the image, click, hold and drag to select the area that you want to keep. Select the crop tool from the row of options at the top and then click ‘Save’ to apply the changes.

The additional buttons along the top can be clicked to rotate clockwise, rotate anticlockwise, flip vertically and flip horizontally. Remember to select ‘Save’ to apply the changes.

In addition to the original image file uploaded, WordPress generates versions in 3 other sizes: thumbnail, medium and large (the default sizes for these can be specified under Settings > Media). When you are editing images using the new options in WordPress 2.9 and above, you can choose to apply these alterations to all sizes, only the thumbnail versions or all sizes except the thumbnail versions.

We are very pleased to see this functionality added to the WordPress core as it means that simple editing tasks can be handled without the need for external software which can be expensive and cumbersome. While the options may appear quite limited compared to what external software and plugins can offer, they are nonetheless very useful.

It’s likely that you have been frustrated several times by losing unsaved work when your computer or one of it’s applications has crashed unexpectedly. Just imagine, then, the all-consuming sorrow of losing weeks, months or even years of blog posts or other site content. Your hosting company may provide a responsible backup service (or you may have a well-considered system in place if your site is self-hosted) but some extra insurance can be crucial if the unexpected happens (as it did for one of our client sites today).

The WordPress Database Backup plugin makes backing up WordPress content a painless process. Once the plugin has been added and activated through the WordPress admin section, it is then possible to specify an email address for the database backups to be sent to. Regular automatic backups can be set up to be received at your email address at a chosen interval. This interval can range from every hour (suitable for a very active site)  to every week (for a site where content is changed less frequently). Once these few options have been set, the latest content backup will be emailed to you regularly and potential catastrophes avoided with no further effort required.

• Simplify the addition and management of content on your site (so that this will all be possible without technical knowledge).
• Allow many people to edit and contribute to your site and allow control over which contributors have particular permissions.
• Set a template or theme for the site so that new content can be easily set to display with a consistent style.
• Incorporate security features, SEO features and other functionality and keep up to date with upgrades.
• Provide options to backup and export site content.

Around 5% of sites currently online use some form of web CMS technology – this means that roughly 95% of current websites can only be edited with specialist technical knowledge. This is unfortunate for the vast majority of people who are unlikely to have the familiarity with HTML, CSS, PHP, JavaScript or other languages that would be needed to fully control the content and appearance of their site without a CMS.

Fortunately the web CMS options continue to improve and be used more widely, allowing more people to take control of their site. Our preferred content management system at Juno tends to be WordPress. We find WordPress to be excellent in providing all the advantages listed above. We have been very pleased to see non-technical users managing text and images on their site and, in some cases, adding entirely new features to their site using WordPress plugins.

We’d be interested to hear about your experiences of using content management systems so please do add a comment if you have anything you feel compelled to share.

The next post in this series will feature more information about how WordPress compares with other popular web content management systems.

I will be posting regularly on this blog about what WordPress has to offer as a Content Management System and ways to take advantage of this functionality. Subjects that will be covered include:

• What a Content Management System (CMS) is and how it could benefit your site
• How WordPress compares with other content management solutions
• Recommended WordPress plugins
• New features in WordPress 3 (when it is released)
• WordPress tips & tricks
• How to improve the search engine performance of WordPress sites
• WordPress security features & options
• How to turn your web design into a site theme

We will also be very pleased to hear any suggestions for topics relating to WordPress that you would be interested to find out more about.