Adding Pages, Image Gallery, and Plugins to a WordPress Blog

by April Hodge Silver Hasin Hayder | June 2009 | MySQL Content Management Open Source PHP WordPress

WordPress offers you a lot more than simply posts, comments, and categories. In this article by Hasin Hayder and April Hodge Silver, we will explore and control all of the other content types that WordPress already has. You'll be able to create static pages that aren't a part of your ongoing blog, bookmark links that will drive visitors to your friends, and add and manage built-in image galleries to display photos and other images. You'll also learn how to add plugins, which will enhance the capabilities of your entire website.

Pages

At first glance, pages look very similar to posts. They also have a title and a content area in which we can write extended text. However, pages are handled quite differently from posts. Pages don't have a timestamp, categories, or tags. Posts belong to your blog, which is meant to be a part of an ongoing expanding section of your website, and are added regularly. Pages are more static, and the regular parts of your site that stand alone in a separate part of the site.

When you installed WordPress, a page was automatically created for you (along with the first post and first comment). You can see it by clicking on the About link under Pages in the sidebar:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

Adding a page

To add a new page, go to your WP Admin and navigate to Pages | Add New, or use the drop-down menu in the top grey menu by clicking on the arrow next to New Post and choosing New Page. This will take you to the Add New Page page:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

The minimum you need to do to create a new page is type in a title and some content. Then click on the blue Publish button, just as you would for a post, and your new page will appear linked in the sidebar of your website.

You'll recognize most of the fields on this page from the Add New Post page, and they work the same for pages as they do for posts. Let's talk about the one new section, the box called Attributes

Parent

WordPress allows you to structure your pages hierarchically. This way, you can organize your website's pages into main pages and subpages, which is useful if you're going to have a lot of pages on your site. For example, if I was writing this blog along with three other authors, we would each have one page about us on the site, but they'd be subpages of the main About page. If I was adding one of these pages, I'd choose About as the parent page for this new page.

Template

Theme designers often offer alternate templates that can be used for special pages. The default WordPress theme comes with two templates: Archives and Links. Let's try using the Archives template.

Just give your new page a title (for example, Blog Archives) and some content (for example, Let's experiment with the archives template). Then choose Archives from the Template pull-down menu and publish your page. When you go to your site and click on the Blog Archives link in the sidebar, you'll see this:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

As you can see, your title and content both do not appear, which makes this different from pages that use the default template (such as the About page). The sidebar is also missing. What does appear are the search box, a list of blog archives organized by month, and a list of archives organized by subject, that is, Categories.

This particular template doesn't appear useful because all of its information is currently in the sidebar of the rest of the site. However, this shows you the power of a template. If you're designing a theme for your own website, you can create any number of templates that have special content.

The Links template creates a similar page, but it lists all of your links.

Order

By default, the pages in your page list on the sidebar of your blog will be in alphabetical order. If you want them in some other order, you can specify it by entering numbers in the Order box for all of your pages. Pages with lower numbers (0) will be listed before pages with higher numbers (5).

As the WordPress developers acknowledge right on this page, this method of ordering pages is quite clunky. Luckily, there is a plugin that makes ordering pages much easier.

You can download this from http://wordpress.org/extend/plugins/pagemash/.

Managing pages 

To see a list of all the pages on your website in the WP Admin, navigate to Pages | Edit in the main menu. You'll see the Edit Pages page:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

By now this list format should begin to look familiar to you. You've got your list of pages, and in each row are a number of useful links allowing you to Edit, Quick Edit, Delete, or View the page. You can click on an author's name to filter the list by that author. You can use the two links at the top, All and Published, to filter the pages by status. And you can check boxes and mass-edit pages by using the Bulk Actions menu at the top and bottom of the list. You can also search your pages with the search box at the top.

Links

Word Press gives you a very powerful way of organizing external links or bookmarks on your site. This is a way to link other related blogs—websites you like, websites that you think your visitors will find useful, or just any category of link you want—to your blog. Speaking of categories, you can create and manage link categories that are separate from your blog categories.

When you installed WordPress, it created the link category Blogroll along with a number of links in that category. You can see them in your blog's sidebar as follows:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

Adding a new link

Let's add a new link to the Blogroll category. In your WP Admin, navigate to Links | Add New. This will take you to the Add New Link page, which has a number of boxes in which you can add information about your new link. Let's look at the first three here:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

Of all the fields on this page, it's the top two that are the most important. You need to give your link a Name, which is the text people will see and can click on. You also need to give a Web Address, which is the URL of the website that is linked to your blog. You can add a description, which will show up when visitors hover over the link. (Alternatively, you can also choose to have the description show up on the page below the link.)

Now let's look at the next two boxes in the following screenshot:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

The first box in the screenshot above should look familiar because it's very similar to the Categories selection box for posts. Keep in mind that link categories are separate from post categories. On this page, you will only see link categories. You can assign a category to the new link that you're adding or create a brand new category by clicking on the + Add New Category link. Your links will be organized by the categories on your website. The second box lets you choose whether your visitors will be taken to a new window, or a new tab, when they click on the link. I generally recommend always using _blank when sending people to an external website. The other boxes on this page are used less commonly. You can use the two new boxes to specify XFN (XHTML Friends Network) relationships between you and any individuals you link to.

Learning more
If you want to learn more about XFN, take a look at this website:
http://gmpg.org/xfn/.

The final box at the bottom of this page will allow you to specify:

  • An image that belongs with this link (for example, the logo of the company whose site you are linking to)
  • The RSS feed for the website you're linking to
  • Any notes you have about the site, beyond what you entered into the Description box
  • A rating for the site from 0 to 9

To make use of any of these pieces of information, you need to have a theme that recognizes and makes use of them.

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

At the top right of the page is a Save box with a checkbox that you can check if you want to keep the link private, that is, if you don't want it to show up on your site to anyone but you. Click on the Add Link button in that box to save your new link.

I added a link for a recipe and food website using this form. I filled in only the first three boxes as seen in this screenshot:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

Now when I save and then re-load my website, I see my new link here:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

Managing links and categories

You can manage your links just as you manage posts and pages. Navigate to Links and you will see this:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

From here, you can click on the name of a link to edit it, click on the URL to visit it, and see which categories you've chosen for it. Using the View all Categories pull-down menu, you can filter links by categories, change the order, and do bulk deletes.

Just as with post categories, you can manage and add new link categories on the Link Categories page. You can access this page by navigating to Links | Link Categories:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

From this page, you can both add a new category using the form at the left and also manage your existing categories using the table at the right.

Media library

The media library is where WordPress stores all of your uploaded files—images, PDFs, music, video, and so on. To see your media library, navigate to Media in the main menu:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

This is the now-familiar management table. My media library has only one photo that I uploaded when I posted about the butternut squash soup recipe. As you can see from this table, it shows me the following:

  • A thumbnail of the image. If this were another type of media, I'd see an icon representing the type of media.
  • The title that I gave the file when I uploaded it, along with the format extension.
  • The author.
  • Information about which post or page the file is attached to. This will be important when it comes to making an image gallery. The uploaded file will be attached to the post or page that you are editing while uploading a file.
  • The number of comments waiting on the attached post or page.
  • The date when the file was uploaded.

If you hover over the row with your mouse, links for Edit, Delete, and View will appear. You can click on the file's title or the Edit link to edit the Title, Caption, and Description. You cannot edit anything else about uploaded files.

You can also add a new file to your media library. Navigate to Media | Add New to get a page similar to the upload media page that you got while uploading a file for a post. When you click on the Select Files button and select the file to be uploaded, it will upload it and then give you the options shown in this screenshot:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

Enter a title, caption, and description if you want, and click on the Save all changes button. Your new item will appear in the media library, which will be unattached to any post or page. However, you'll still be able to use what you just uploaded in any post or page.

To do that, click on the Upload/Insert button as you did before. But instead of choosing a file From Computer, click on the Media Library tab on the top of the box:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

When you click on the Show link that is next to the image you want to use, you'll get the same set of options you got after uploading an image. Now you can click on the Insert into Post button.

Adding an image gallery 

You can add an image gallery to any page or post in your website without needing any kind of plugin for WordPress. The following are the simple steps to do this:

  1. Choose a post or page for your image gallery.
  2. Upload the images you want in that gallery.
  3. Add the special code to the page or post, and save it.

Let's get started.

Choosing a post or page 

For my food blog, I'm going to create a new page called My Food Photos for my image gallery. You can always do this on an existing page or post as well. Here's my new page:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

Note where I have left my cursor. I made sure to leave it in a spot on the page where I want my gallery to show up, that is, underneath my introductory text.

Uploading images 

Now click on the Upload/Insert image icon and upload some photos. Each time you upload a photo, enter the title and then click on the Save All Changes button. You'll be taken to the Gallery tab, which will show all of the photos you've uploaded to be attached to this page:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

If you want to upload more photos at this point, just click on the From Computer tab at the top and upload another photo.

When you've uploaded all the photos you want (you can add more later), click on the Insert gallery button. This overlay box will disappear and you'll see your post again. The page will have the gallery icon placeholder in the spot where you left the cursor, as seen in this screenshot:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

If you're in the H TML view, you'll see the gallery shortcode in that spot:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

Note that because I 'm uploading these photos while adding/editing this particular page, all of these photos will be "attached" to this page. That's how I know they'll be in the gallery on this page. Any other photos that I've uploaded at other times will not be included. For example, even though I uploaded the Breakfast Shake photo once already, I had to upload it a second time so that it would be attached to this page's gallery.

Now publish or save your page. Now when you view the page, there's a gallery of your images as follows:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

Tweaking your gallery

There are a number o f tweaks you may want to apply to your gallery.

Adding captions to thumbnails

You may want the captions to show up underneath your thumbnails on the gallery page. To do that, just add captions to the images—go to your media library, edit each image, and give it a caption. The titles that you give the images will show up in the page title.

Changing the size of the images in the gallery

By default, the gallery shows thumbnail versions of your images. If you want, you can change that to be a medium or large version. You just have to edit the gallery shortcode. In your WP Admin, navigate to Edit Page for this page (in which we have placed the gallery) and use the HTML editing mode instead of Visual. Change your gallery shortcode from [gallery] to [gallery size="medium"]. These will be too wide to fit into three columns, so you should change the number of columns to 1. To do this, change your gallery shortcode to this: [gallery size="medium" columns="1"]. Update the page and take another look:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

Changing the image page

When you click on one of your thumbnails on the gallery page, you'll be taken to the image page, which shows the medium version of the image along with next and previous thumbnails as follows:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

I find this page to be quite unsatisfactory. The main image is too small and the thumbnails are too large. In fact, instead of thumbnails, I'd prefer to use text—that is, just the image titles. Unfortunately, the gallery feature in WordPress is still relatively new, and they haven't made these things easy to change. You can change this page to be better, but it requires you to roll up your sleeves and dig into the code a bit.

To change the image size on this page, you have to change the dimensions of your medium images on the Media Settings page. (You can access this page by navigating to Settings | Media). This change will be applied only to the images you upload after the change. So any images that you've already uploaded will keep their current size unless you delete and re-upload them.

You can find a great explanation for replacing thumbnail navigation links with text links on Michael Fields' blog: http://mfields.org/2008/04/26/adding-text-links-to-wordpress-gallery/.

Adding plugins 

Plugins are little packages of code that you can add to WordPress to increase its functionality. Developers all over the world create plugins, some of which you can use for free, whereas some others are available for purchase.

The steps for installing a plugin are simple:

  1. Find your plugin.
  2. Download it.
  3. Upload and activate it.
  4. Configure and/or implement it (if necessary).

Finding your plugin 

The best place to find plugins is the WordPress Plugin Directory at http://wordpress.org/extend/plugins/. There are more plugins every day (as of this writing, there are nearly 4,245) and millions of downloads (22,152,788 and counting). You can search plugins by topic and by tag, as well as see a list of the most popular, newest, and recently updated plugins. This is the best available plugin resource and you should always go here first when looking for a plugin.

You can also do Google searches. I recommend searching for the problem you're trying to solve and see what plugins other users recommend and why. Often, there are multiple plugins that perform similar functions, and you will find the feedback of other WordPress users valuable in choosing between them.

Downloading the plugin 

Let's install a plugin that I think everyone should have. It's called WP-DB-Backup and it adds the ability to easily create a complete database export of your blog. This offers a more thorough backup than the built-in Export function.

You can download the plugin from this page: http://wordpress.org/extend/plugins/wp-db-backup/.

Before downloading any plugin, check to see which versions of WordPress the plugin is supposed to work with. If you're downloading a plugin from the Wordpress.org website, you'll see everything you need to know on the right side of the page:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

This plugin requires Version 2.0.3 or higher and will work with all versions up to 2.7, so we are safe. Now just click on the orange Download button and save the resulting ZIP file on your computer where you can find it again.

Uploading and activating the plugin

Unlike with themes, you don't have to unzip the ZIP file. Just go to your WP Admin and navigate to Plugins | Add New. There are a lot of things on this page, but just look for the Install a plugin in .zip format section:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

Browse to your plugin and then click on the Install Now button.

If the installation is successful, you'll get a page telling you that the installation was successful and giving you the option to activate the plugin right from this page:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

Click on the Activate Plugin link and you're done activating your plugin.

If this automatic uploader doesn't work for you, you can do this the old-fashioned way:

First extract the ZIP file you downloaded so that it's a folder, probably called wp-db-backup.

Using your FTP client, upload this folder inside the wp-content/plugins/ folder of your WordPress installation. You'll also see the two plugins that WordPress came with in that folder—akismet and hello.php.

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

Now go to your WP Admin and navigate to Plugins | Installed. You'll see the three plugins on this page. Just click on the Activate link in the WordPress Database Backup row:

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

Now you are ready for the final step, which is to actually make use of this plugin.

Configuring and/or implementing—if necessary 

In the case of this plugin, all you have to do is use it. You'll have a new link in your menu that you can navigate to. It's Tools | Backup. When you go to this page, you'll be able to choose which tables to back up. If you've installed any plugins that add additional tables, you'll have the option to choose them as well; I always do. I also always check the two boxes to exclude spam comments and post revisions.

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

You can now decide if you want to save the backup to your server, download it, or have it emailed to you. I suggest downloading it every time.

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

There is also an option to schedule regular backups. This is not 100% reliable, so you should probably set up a reminder to check if your backup has been emailed to you or not. The frequency you choose should depend on how often you edit your site—once a week is probably often enough for most people.

Adding Pages, Image Gallery, and Plugins to a WordPress Blog

For other plugins, the configure and/or implementation step may be different.

  • You may not have to do anything. Some plugins simply change the way WordPress does some things, and activating them is all you need to do.
  • You may have to configure a plugin's details before it begins to work. Some plugins need you to make choices and set new settings.
  • There may not be a configuration page, but you may have to add some code to one of your theme's template files.

If you're unsure of what to do after you've uploaded and activated your plugin, be sure to read the readme file that came with your plugin, or look at the Faq on the plugin's website.

Many plugin authors accept donations. I strongly recommend giving donations to the authors of plugins that you find useful. It helps to encourage everyone in the community to continue writing great plugins that everyone can use.

Auto-installation

The newest version of WordPress, as of 2.7, offers a way for you to search for, choose, and install new plugins directly through your WP Admin interface. You can do this by using the Search area on the Plugins | Add New page. If you already know what plugin you want, you can type it in and follow the onscreen instructions. I still recommend that you do your research carefully to be sure that you find the plugin that you want and that it's compatible with your version of WordPress. Also, although most of the great plugins are on Wordpress.org , there are still more that can be found elsewhere on the Web. So be sure to do a thorough search.

Summary

This article explored all of the content WordPress can manage that's not directly about blogging. You learned about static pages, bookmark links, the media library, image galleries, plugins, and more.

You are now fully equipped to use the WordPress Admin panel to control all of your website's content.

About the Author :


April Hodge Silver

April has been designing and developing new web sites from scratch since 1999, just before her graduation from Columbia University. Early in her career, she worked for several web companies and startups, including DoubleClick and About.com. Since 2004, she has been self-employed through her company Springthistle Design and has worked with a staggering variety of companies, non-profits, and individuals to realize their web site dreams. In her professional work, April's focus is always on usability, efficiency, flexibility, clean design, and client happiness. WordPress is the best solution for many of Springthistle's Clients, though April also develops custom web applications using PHP and MySQL. More about April's professional work at http://springthistle.com

In her free time, April enjoys developing recipes in the kitchen, bicycling, and relaxing with her daughter, dog, and darlin wife.

Hasin Hayder

Hasin Hayder graduated in Civil Engineering from the Rajshahi University of Engineering and Technology (RUET) in Bangladesh. He is a Zend-certified Engineer and expert in developing localized applications. He is currently working as a Technical Director in Trippert Labs and managing the local branch in Bangladesh. Beside his full time job, Hasin writes his blog at http://hasin.wordpress.com, writes article in different websites and maintains his open source framework Orchid at http://orchid.phpxperts.net. Hasin lives in Bangladesh with his wife Ayesha and his son, Afif.

Books From Packt

WordPress 2.7 Cookbook
WordPress 2.7 Cookbook

Choosing an Open Source CMS: Beginner's Guide
Choosing an Open Source CMS: Beginner's Guide

WordPress Theme Design
WordPress Theme Design

Plone 3 Theming
Plone 3 Theming

Drupal 5 Views Recipes
Drupal 5 Views Recipes

WordPress Plugin Development: Beginner's Guide
WordPress Plugin Development: Beginner's Guide

Blogger: Beyond the Basics
Blogger: Beyond the Basics

WordPress for Business Bloggers
WordPress for Business Bloggers

 


 

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
s
f
d
L
V
X
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software