WordPress News, Tutorials, Opionions and How-Tos

Using Rokbox in Wordpress

Rokbox is a popular plugin made by Rockettheme for Joomla. It allows you to display images inside a stylish pop-up. You can see the Joomla version of this tutorial by clicking here.

However, there is also a WordPress version available and here's how to use it:

Download Rokbox and Upload to Your Site

Click here to download the Rokbox plugin for WordPress. You'll then need to extract the folder onto your desktop. Upload it to the /wp-content/plugins/ folder on your site

Activate Rokbox

In your WordPress site admin area, go to the Plugins and click "Activate" next to RokBox Gallery

Add an Image to a Post

Go to one of your WordPress posts and click the "Add an image" button. Insert an image into your post. It end result should look like it does below:

View the HTML

Click the "HTML" tab in the top-right of your post.

Insert the RokBox Code

Insert rel="rokbox" into the HTML. The best place to do this is right after the opening

View the Pop-up

Visit your post and click on the image. You should see it appear inside a pop-up.

You can control the size of the pop-up by modifying the code you added to the link. For example, this will make the pop-up 500 pixels wide and 200 pixels high: rel="rokbox[500 200]"

Finding and Installing Wordpress Themes

This tutorial will show you how to find, install and activate free themes for your WordPress site.

Video on Installing WordPress Themes

Go to the Themes Area

In the admin area of your Wordpress website, click on the "Appearance" tab and then click on "Themes".

Go the the Install Themes Area

Click "Install Themes" in the top of the themes area.

Choose a Keyword or Set of Features

One way to search for a theme is to enter a keyword and click "Search".

Alternatively you can choose the features you'd like and click "Find Themes". Be careful not to check too many boxes or you'll end up with few results when you search.

Theme Search Results

WordPress will return all the themes that match your search. Click on either "Install" if you know you want the theme or click "Preview" to see what it will look like. We're going to click on "Install" next to "Desk Mess Mirrored"

Install the Theme

You'll see a screenshot of the theme and a few details. Click "Install Now" to complete the installation or "Cancel" to go back.

Installation Complete

You'll hopefully get a message saying "Successfully installed the theme [THEME NAME]". Click on "Activate" to make the theme live.

Current Theme

You should now see your theme under the "Current Theme" heading. Voila! Your theme will now be live on your site.

Using the Flutter Plugin for Wordpress

Flutter is a Wordpress plugin that allows you to move beyond simple posts and pages in Wordpress. You can create different types of pages with different types of content. In this example we're going to emulate IMDB.com and list movies together with details about the movie.

Install Flutter

Go to Plugins >> Add New and search for "Flutter". Click "Install" on the right hand side of the page, click "Install" again and then "Activate Plugin".

Browse to Flutter

Flutter adds two areas to your Wordpress admin screen. Under "Settings" you'll find "Flutter" which is the main configuration for the plugin. There will also be a whole new area called "Flutter" which is where you will add content.

Create a Write Panel

Click on "Write Panels" and then "Create Write Panel". You can choose different options for your panel. For example, to simplify things for your users you can unpublish custom fields, password, excerpt and other features that are confusing for beginners. Click "Finish" when you're done.

Add Fields to Your New Write Panel

If you'd like to you can group your fields into different areas. For Movies, you might have a group of fields called "People" and inside that fields called "Director", "Cinematographer" and so on. You might also have a group of fields called "Details" and inside that fields called "Release Date", "Genre" and so on. We're going to set that up and click on "Create a Group".

Name Your Group

Create Fields

Enter the Field Details

Flutter will offer you all sorts of options for the field. A "Textbox" is a simple one-line text field but you can also allow people to write in a larger area (Multiline textbox) multiple choices (Checkbox List, Radiobutton List) or even to upload files or images (useful in example to upload movies posters for example). Choose your options then click "Continue" and "Finish".

Add More Fields

See if you can go ahead and create extra fields and one extra group so that your "Movies" Write Panel looks like the image above.

Go and Start Writing

You'll see that Flutter has added a new option called "Movies" at the top left, underneath "Posts". Click "New" to start writing.

Enter Information Into Your Fields

The post page will look just as it does normally with just one exception ... your Flutter fields will show at the bottom of the page. View your post on the front of your site and your fields should be visible.

Hiding a Wordpress Site from Search Engines

This tutorial shows an easy way to work on a Wordpress site without taking it live. There is a setting that makes the search engines ignore the site until you are ready. Be careful to turn this back on when you're ready to launch. I've seen some big sites for big companies launch with this enabled ... everyone was sitting around wondering why they had no traffic.

Login to Your Wordpress Site

Go to Settings >> Privacy

Finally set Blog Visibility to "I would like to block search engines, but allow normal visitors" and your site will be hidden from Google, Bing and Yahoo.

Importing RSS Feeds Into Wordpress Posts

This tutorial will show you how to take an RSS feed and import it into your Wordpress site. Each item on the RSS feed will become a separate Wordpress post. We use this technique for a couple purposes:

Distributing our content to other Wordpress sites.
Importing blogs and news on a particular topic from other sites. This way people can read them all in one place.

We're going to use a plugin called FeedWordPress.

Installing and Configuring FeedWordPress

Step 1: Go to the FeedWordPress page on Wordpress.org and download the file.
Step 2: Extract the files into a folder on your desktop. The folder will be called, unsurprisingly "feedwordpress"
Step 3: Login to your site's files via FTP and navigate to /wp-content/plugins/.
Step 4: Upload the "feedwordpress" folder to /wp-content/plugins/.
Step 5: Go to wp-admin >> Plugins and click "Activate" under "FeedWordPress".
Step 6: Once you've enabled it, you'll see a new tab on the sidebar called "Syndication". Click the first link called "Syndication". You'll see a screen like below:
Step 7: Enter your RSS feed into the box called "Add new source" and click "Syndicate"
Step 8: FeedWordPress will check the feed and if it's valid, you can click "Use this Feed" to import the posts.

Importing the RSS Feeds

Now that you're set up, there are two ways to import feeds:

Manually: If you'd like to manually import feeds, go the "Syndication" link, check the feeds and click "Update Checked".
Automatically: If you'd like to manually import feeds, go the "Feed and Updates" link and FeedWordPress will show you how to give you instructions to set-up a cron job.

How to Change the Logo on Any Wordpress Theme

Perhaps the #1 most common question we get from beginners is: "How do I change the logo on a Wordpress theme?" This tutorial is the answer:

Step 1: Go and download the Firefox browser, if you haven't done so yet: http://www.mozilla.com/en-US/firefox/personal.html. Firefox is much better than Internet Explorer or Safari for working on websites.
Step 2: Start Firefox so that you're browing the web with it. We're now going to install an extra toolbar for Firefox. It is called the "Web Developer" toolbar. Visit this page: https://addons.mozilla.org/en-US/firefox/addon/60
Step 3: Click "Add to Firefox" and follow the instructions, including restarting Firefox.
Step 4: The next time you open Firefox, you will see a list of links that starts with "Disable", "Cookies", "CSS" and ends in "Options":

Step 5: Browse to the website where you want to change the logo. We're going to use http://wordpress.org for this example.
Step 6: In the toolbar, click on "Images" which is the 5th link from the left. Then click "View Image Information" from the dropdown.
Step 7: You will now see a list of all the images on the site.
Step 8: Scroll down until you see the logo. You will see two pieces of information about it: Location ( http://s.wordpress.org/style/images/wordpress-logo.png ) and Size ( Width = 301 pixels, Height = 52 pixels ).

Step 9: You need to make a new logo that is the same width and height as the old.
Step 10: Use your favorite file manager to upload the new logo to the location you found in Step 8. It is better to rename rather than delete the old logo. You could call it logo-backup.png for example.