Using WordPress Templates

As we explain on the previous posts , a static page contains content that
doesn’t appear on the blog page, but as a separate page within your site.
You can have numerous static pages on your site, and each page can have
a different design, based on the template you create. (Flip to Book VI to find out all about choosing and using templates on your site.) You can create several static-page templates and assign them to specific pages within your site by adding code to the top of the static-page templates.

Here’s the code that appears at the top of the static-page template Lisa uses
for her About Us and Our Blog Designers page at www.ewebscapes.com/
about:

<?php
/*
Template Name: About Page
*/
?>

Using a template on a static page is a two-step process: Upload the template,
and then tell WordPress to use the template by tweaking the page’s code.

In Book VI, you can discover information about Custom Menus, including
how to create different navigation menus for your Web site. You can create
a menu of links that includes all the pages you created in your WordPress
Dashboard. You can display that menu on your Web site by using the
Custom Menus feature.

Read More

Exploring Different Uses for Custom Fields

In this chapter, we use the example of adding your current mood to your
blog posts by using Custom Fields. But you can use Custom Fields to define
all sorts of different data on your posts and pages; you’re limited only by
your imagination when it comes to what kind of data you want to include.
Obviously, we can’t cover every possible use for Custom Fields, but we can give you some ideas that you may want to try out on your own site — at the very least, you can implement some of these ideas just to get yourself into the flow of using Custom Fields, and hopefully they can spark your imagination on what types of data you want to include on your site:
✦ Music: Display the music you’re currently listening to. Use the same
method we describe in this chapter for your current mood, except
create a Custom Field named Music: Use the same code template, just
define the key as: $key=”music”; and alter the wording from My
Current Mood is: to I am Currently Listening to:.
✦ Books: Same as the mood or music Custom Field, you can display what
you’re currently reading by creating a Custom Field named Book and
define the key in the code as $key=”book”;, and then alter the wording
from My Current Mood is: to I Am Currently Reading:.
✦ Weather: Let your readers know what the weather is like in your little
corner of the world by adding your current weather conditions to your
published blog posts. By using the same method that we describe in this
chapter, create a Custom Field named Weather and use the same code
for the template, just define the key as $key=”weather”; and alter the
wording from My Current Mood is: to Current Weather Conditions:.
If you want to get really fancy with your Custom Fields, you can also define an icon for the different metadata displays. For example, using the mood Custom Field, you can add little emoticons (or smiley-face icons that portray mood) after your mood statement to give a visual cue of your mood, as well as a textual one. Follow these steps to add an emoticon to the mood Custom Field that you add in theprevious sections in this chapter:

1. Visit the Posts page in the Dashboard.
2. Click the title of the post that you want to edit.
3. Add a new Custom Field by selecting Enter New from the drop-down
list and entering mood-icon in the Name text box.

4. Click the Add an Image icon above the Post text box to open the

Upload Image window.
Upload an image from your computer by clicking the Select Files button (see Book IV, Chapter 3 for information on uploading images).
5. From the Link URL text box, copy the file URL of the image you
uploaded.
You can see the Add an Image window in Figure 5-6.

6. Click the X in the top-right corner to close the Add an Image window.

7. Paste the Link URL in the Value text box for the mood-icon Name (see

Figure 5-7).
8. Click the Add Custom Field button.
The Name and Key values are saved.
9. Click the Update button.
This step saves the changes in your post and updates it on your site.
10. Update the function code in your template file to include the new
mood icon.
Follow these steps to add that code:

a. Open the Edit Themes page in your Dashboard.

b. Click the Single Page (single.php) file.
The single.php template displays in the text box on the left side of
the page.
c. Locate the code you added for the mood Custom Field.
d. Before the closing </strong> HTML tag, add the following line of
code:
<img src=”<?php $key=”mood-icon”; echo get_post_meta($post->ID, $key,
true); ?>” />
The <img src=” that precedes the Custom Field code is the HTML tag used to display an image on your site. The “ /> code that
appears after the Custom Field code is part of the HTML tag and it closes the <img src=” HTML tag. We changed the $key to indicate that we’re calling the mood-icon Custom Field.
e. Click the Update File button to save your changes.
f. Visit the post on your site to view your new mood icon.
You can see Lisa’s mood icon in Figure 5-8.

The entire snippet of code you add in the preceding steps should look like this, when put all together (be sure to double-check your work!):

<?php if ( get_post_meta($post->ID, ‘mood’, true) ) : ?>
<p><strong>My Current Mood is: <?php $key=”mood”; echo get_post_
meta($post->ID, $key, true); ?> <img src=”<?php $key=”mood-icon”;
echo get_post_meta($post->ID, $key, true); ?>” /></strong></p> <?php endif; ?>

Read More

Getting WordPress to check for your Custom Field

The previous sections show you how to add the necessary code to your
template file to display your Custom Field; however, what if you want to
publish a post on which you don’t want the mood Custom Field to appear?
If you leave your template file as you set it up by following the steps in the
previous sections, even if you don’t add the mood Custom Field, your blog
post displays My Current Mood is: — without a mood because you didn’t
define one.

But you can easily make WordPress check first to see whether the Custom
Field is added. If it finds the Custom Field, WordPress displays your mood; if
it doesn’t find the Custom Field, then WordPress doesn’t display anything.
If you followed along in the previous sections, the code in your template looks like this:

<p><strong>My Current Mood is: <?php $key=”mood”; echo get_post_meta($post->ID,
$key, true); ?></strong></p>

To make WordPress check to see whether the mood Custom Field exists, add this code to the line above your existing code:

<?php if ( get_post_meta($post->ID, ‘mood’, true) ) : ?>

Then add this line of code to the line below your existing code:

<?php endif; ?>

Put together, the lines of code in your template should look like this:

<?php if ( get_post_meta($post->ID, ‘mood’, true) ) : ?>
<p><strong>My Current Mood is: <?php $key=”mood”; echo get_post_meta($post->ID,
$key, true); ?></strong></p>
<?php endif; ?>

The first line is an IF statement and, basically, asks the question: Does the
mood metadata exist for this post? If it does, the data gets displayed. If it
doesn’t, then WordPress skips over the code, ignoring it completely so that
nothing gets displayed for the mood Custom Field. The final line of code
simply puts an end to the IF question. Refer to the “IF, ELSE” sidebar, in this chapter, to see some everyday situations that explain the IF question. Apply this statement to the code you just added to your template and you get:
IF the mood Custom Field exists, then WordPress will display it, or ELSE it won’t.

Read More

Entering the code in the template file

So that you can see how to enter the code in your template file, we use
the default WordPress theme called Twenty Ten. If you’re using a different
theme (and you can find thousands of different WordPress themes avail-
able), then you need to adapt these instructions to your particular theme.
If you really want to follow along in this chapter, activate the Twenty Ten
theme on your site, for now, just so that you can follow along and know that
you’re seeing the same code in the places we describe (you can find informa-
tion on the Twenty Ten theme and how to activate it in Book VI).
We use Lisa’s mood Custom Field as the example here. When you’re done
with these steps, WordPress displays your current mood at the bottom of
the posts to which you’ve added the mood Custom Field. Keep in mind that
this example is just one type of Custom Field that you can add to your posts
(and it’s an easy one for the purposes of introducing you to the concept).

If you’re ready to give it a go, then you’re in luck because you can follow
these steps to add the template tag, along with a little HTML code to make it
look nice, to your theme (these steps assume that you’ve already added the
mood Custom Field to your blog post and have assigned a Value to it):

1. Log in to your WordPress Dashboard.

2. Click Editor in the Appearances drop-down list.
The Edit Themes page loads in the Dashboard, as shown in Figure 5-5.
3. Locate the template files for the Twenty Ten theme.
The available templates are listed on the right side of the Edit Themes page, as shown in Figure 5-5.

4. Click Single Post in the list of templates.

The Single Post (single.php) file opens in the text editor on the left side of the screen, where you can edit the template file.
5. Scroll down and locate the template tag that looks like this: <?php
the_content() ?>.
6. On the new line underneath the preceding one, type: <p><strong>My
Current Mood is:.

<p> and <strong> open the HTML tags for paragraph and bold text, respectively; followed by the words to display in your template (My Current Mood is:).

7. Type the code that we discuss in the preceding section.
<?php $key=”mood”; echo get_post_meta($post->ID, $key, true); ?>
8. Type </strong></p>.
This code closes the HTML tags you opened in Step 6.
9. Click the Update File button.
Located at the bottom of the Edit Themes page, this step saves the
changes you made to the Single Post (single.php) file and reloads
the page with a message that says your changes have been successfully
saved.
10. View your post on your site to see your Custom Field data displayed.
The data should look just like the “My Current Mood is: Happy” shown in Figure 5-3.

The entire code, put together, should look like this in your template:

<p><strong>My Current Mood is: <?php $key=”mood”; echo get_post_meta($post->ID,
$key, true); ?></strong></p>

The code is case sensitive, which means that the words you input for the
Key in your Custom Field need to match case with the $key in the code. For example, if you input mood in the Key field, then the code needs to be lowercase, as well: $key=”mood”, if you attempt to change the case like this: $key=”Mood”, the code will not work.
You have to add this code for the mood Custom Field only one time; after you add the template function code to your template for the mood Custom Field, you can define your current mood in every post you publish to your site by using the Custom Fields interface.

Read More

Adding Custom Fields to Your Template File

If you followed along in theprevious sections and added the mood Custom
Field to your own site, notice that the data doesn’t appear on your site the
way it does on Lisa’s. To get the data to display properly, you must open the
template files and dig into the code a little bit. If the idea of digging into the
code of your template files intimidates you, you can put this section aside
and read up on WordPress themes, template files, and template tags in
Book VI.

You can add Custom Fields, in several ways, to your templates in order to
display the output of the fields you’ve set; we think the easiest way involves
using the get_post_meta(); template tag function, which looks like this:

<?php $key=”NAME”; echo get_post_meta($post->ID, $key, true); ?>

Here’s how that function breaks down:

✦ <?php: Part of the functions begins PHP. (Every template tag or function
needs to first start PHP with <?php. You can read more about basic PHP
in Book II, Chapter 3.)
✦ $key=”NAME”;: Defines the name of the key that you want to appear.
You define the Name when you add the Custom Field to your post.
✦ echo get_post_meta: Grabs the Custom Field data and displays it on
your site.

Book IV
Chapter 5

324 Adding Custom Fields to Your Template File
✦ $post->ID,: A parameter of the get_post_meta function that
dynamically defines the specific ID of the post being displayed so that WordPress knows which metadata to display.
✦ $key,: A parameter of the get_post_meta function that gets the
value of the Custom Field based on the name, as defined in the
$key=”NAME”; setting earlier in the code string.
✦ true);: A parameter of the get_post_meta function that tells
WordPress to return a single result, rather than multiple results. (By
default, this parameter is set to true; typically, don’t change it unless
you’re using multiple definitions in the Value setting of your Custom
Field.)
✦ ?>: Ends the PHP function.

Based on the preceding code, to make our mood Custom Field example, you define the key name as mood (replace the NAME in the preceding code with the word mood); it looks like this:

<?php $key=”mood”; echo get_post_meta($post->ID, $key, true); ?>

The part of the functions that says $key=”mood”; tells WordPress to return the Value for the Custom Field with the Name field of mood.

Read More

Exploring the Custom Fields Interface

The Custom Fields module appears on both the Write Post and Write Page (See Book IV, Chapters 2 and 3) pages in the WordPress Dashboard, below the Post text box.

The Custom Fields module has two different text boxes:

✦ Name: Also known as the Key, you give this name to the Custom Field
you’re planning to use. The Name needs to be unique: It’s used in the
template tag that you can read about in the section “Adding Custom
Fields to Your Template File,” later in this chapter. In Figure 5-2, you can
see that Lisa’s Custom Field has the name mood.
✦ Value: Assigned to the Custom Field name and displayed in your blog
post on your site if you use the template tag that you can also read
about in the section “Adding Custom Fields to Your Template File,”
later in this chapter. In Figure 5-2, the Value assigned to the mood (the
Custom Field name) is Happy.

 

Simply fill out the Name and Value text boxes, and then click the Add
Custom Field button to add the data to your post or page. Figure 5-2 shows
a Custom Field that Lisa added to her post with the Name of mood and with
the assigned Value Happy. In the section “Adding Custom Fields to Your
Template File,” later in this chapter, we show you the template tag you need
to add to your WordPress theme template in order to display this Custom
Field, which appears in her post like this: My Current Mood is: Happy,
shown in Figure 5-3, where the Custom Field appears at the end of Lisa’s post.
You can add multiple Custom Fields to one post. To do so, simply add the

Name and the Value of the Custom Field in the appropriate text boxes on
the Write Post page, and then click the Add Custom Field button in order to
assign the data to your post. You will do this for each Custom Field you want
to add to your post.
After you add a particular Custom Field (such as the mood Custom Field Lisa
added in Figure 5-2), you can always add it to future posts. So, you can make
a post tomorrow and use the mood Custom Field but assign a different value
to it. If tomorrow you assign the value Sad, your post displays My Current
Mood is: Sad. You can easily use just that one Custom Field on subsequent
posts. After you create a Custom Field (such as the mood Custom Field),
you can access it in a drop-down list below the Name field,
so you can easily select it again and assign a new Value to it
in the future.
Custom Fields are considered extra data, separate from the post content itself, for your blog posts, and WordPress refers to them as metadata. The Custom Field Name and Value get stored in the database in the wp_postmetadata table, which keeps track of which Names and Values are assigned to each post. See Book II, Chapter 7 for more information about the
WordPress database structure and organization of data.

Read More

Understanding Custom Fields

A WordPress template contains static pieces of data that you can count on
to appear on your site. These static items include elements such as the title,
the content, the date, and so on. But what if you want more? Say you write a
weekly book-review post on your site and want to include a listing of recent
reviews and accompanying thumbnails of the books; you can, through the
use of Custom Fields, without having to retype the list each time you do a

review. You can add literally thousands of auto-formatted pieces of data like this (such as book reviews or movie reviews, for example) by adding Custom Fields on your WordPress blog.
You create Custom Fields on a per-post or per-page basis, which means that
you can create an unlimited amount of them and add them only to certain
posts. They help you create extra data for your posts and pages by using the
Custom Fields interface, which is covered in the following section.

So, what can you do with Custom Fields? Really, the only right answer is:
Anything you want. Your imagination is your only limit when it comes to the
different types of data you can add to your posts by using Custom Fields.
Custom Fields allow the site owner the flexibility of defining certain pieces of
data for each post.
To use Custom Fields, you do need a bit of knowledge about how to navi-
gate through WordPress theme templates because you have to insert a
WordPress function tag, with specific parameters, in the body of the tem-
plate file. Book VI takes you through all the information you need to know in
order to understand WordPress themes, templates, and template tags — so
you may want to hit that minibook before you attempt to apply what we
discuss in the rest of this chapter. If you’re already comfortable and famil-
iar with WordPress templates and tags, then you probably won’t have any
trouble with this chapter at all.

Read More

Keeping Media Files Organized

If you’ve been running your blog for any length of time, you can easily forget
what files you’ve uploaded by using the WordPress uploader. Lisa used to
have to log in to her Web server via FTP and view the Uploads folder to see
what she had in there.
Now, the WordPress Media Library allows you to conveniently and easily discover which files are in your Uploads folder.
To find an image, video, or audio file you’ve already uploaded by using the file uploader and to use that file in a new post, follow these steps:

1. Click the Upload Media icon to open the File Uploader window.
2. Click the Media Library link at the top of the window.
All the files you’ve ever uploaded to your blog appear because of the
File Uploader feature (see Figure 4-3). Files you uploaded through other methods, such as FTP, don’t appear in the Media Library.
3. Select the file that you want to reuse and click the Show link.
4. In the settings menu that appears, set the options for that file: Title,
Caption, Description, Link URL, Order, Alignment, and Size.
5. Click the Insert into Post button.
The correct HTML code is inserted into the Post text box.

✦ Search media files by using a specific keyword. If you want to search
your Media Library for all files that reference kittens, then you type
the word kittens in the Search box in the upper-right side of the Media
Library page. Then click the Search Media button; the page reloads and
displays only media files that contain the keyword or tag kittens.
✦ Delete media files. To delete files, click the small white box that
appears to the left of the file’s thumbnail on the Manage Media page;
then click the Delete button, which appears at the top left of the page.
The page reloads, and the media file you just deleted is now gone.
✦ View media files. On the Manage Media page, click the thumbnail of the
file you want to view. The actual file opens in your Web browser. If you
need the URL of the file, you can copy the permalink of the file from your
browser’s address bar.

 

Read More

Podcasting with WordPress

As we explain in the introduction to this chapter, to podcast, the Web site owner provides regular episodes of an audio show that visitors can download to their computer and listen to on their favorite audio player. Think of podcasting as a weekly radio show that you tune into, except that it’s hosted on the Internet, rather than on a radio station.
In the sidebar “WordPress video and audio plugins” in this chapter, we mention

a few plugins that allow you to more easily insert audio files in your WordPress
posts and pages — however, a few plugins are dedicated to podcasting, and
they provide features to podcasters that go beyond just embedding audio files
in a Web site. Some of the more important of these features include
✦ Archives: Create an archive of your audio podcast files so that your lis-
teners can catch up on your show by listening to past episodes.
✦ RSS Feed: An RSS feed of your podcast show gives visitors the opportu-
nity to subscribe to your syndicated content so that they can be notified
when you publish future episodes.
✦ Promotion: A podcast isn’t successful without listeners, right?
Podcasters like to promote their shows by including their audio files
in the iTunes (www.apple.com/itunes) library so that when people
search iTunes for podcasts by subject, they find the podcasters’ podcasts and subscribe to them.
These three plugins go beyond just audio-file management, they’re dedicated to podcasting and all the features a podcaster is looking for:

✦ PowerPress (http://wordpress.org/extend/plugins/
powerpress): PowerPress has many of the features podcasters are
looking for, including full iTunes support; audio players; multiple file-
format support (.mp3, .m4a, .ogg, .wma, .ra, .mp4a, .m4v, .mp4v,
.mpg, .asf, .avi, .wmv, .flv, .swf, .mov, .divx, .3gp, .midi, .wav,
.aa, .pdf, .torrent, .m4b, .m4r); statistics to track the popularity of
your different podcast offerings; and tagging, categorizing, and archiving
of podcast files.
✦ Podcast Channels (http://wordpress.org/extend/plugins/
podcast-channels): WordPress provides some of the basic stuff
needed for podcasting, such as media-file embedding, archiving, and RSS feed handling. The Podcast Channels plugin gives you iTunes metadata that enables you to specify channels for your podcast files and include them in the iTunes library.
✦ Podcasting Plugin (http://wordpress.org/extend/plugins/
podcasting): Enhances the built-in WordPress audio-management
features by adding iTunes support, compatible RSS feeds, and media
players. This plugin also allows you to have multiple podcasting feeds,
in case you have different podcast shows that cover a range of different
topics.
We discuss Web hosting requirements in Book II. If you’re a podcaster and
intend to store audio files on your Web hosting account, you may need to
add increased storage and bandwidth to your account so that you don’t run
out of space or incur higher fees from your Web hosting provider. Discuss
these issues with your Web hosting provider to find out upfront what you
have to pay for increased disk space and bandwidth needs.

Read More

Inserting Audio Files into Your Blog Posts

Audio files can be music files or voice recordings, such as recordings of you speaking to your readers. These files add a nice personal touch to your blog. You can easily share audio files on your blog by using the Upload Audio feature in WordPress. After you insert an audio file in a blog post, your readers can listen to it on their computers, or download it onto an MP3 player and listen to it on their drives to work, if they want.
Click the Add Audio icon on the Edit Post or Add New Post page, and then follow these steps to upload an audio file to your blog post:

1. Click the Select Files button.
An Open dialog box appears, as shown in Figure 4-2.
2. Select the file that you want to upload and click Open (or simply
double-click the filename).
The file uploader window reappears in WordPress, which shows a progress bar while your audio file uploads. When the upload is complete, a dialog box that contains several options opens.

 

3. Type a title for the file in the Title text box.

4. Type a caption for the file in the Caption text box.
5. Type a description of the file in the Description text box.
6. Click the File URL button.
Clicking this button provides a direct link in your post to the video file
itself.
7. Click Insert into Post.
A link to the audio file is inserted into your post. WordPress doesn’t
embed an actual audio player in the post; it only inserts a link to the
audio file. Visitors click the link to open another page, where they can
play the audio file.
Some great WordPress plugins for audio-handling can enhance the function-
ality of the file uploader and help you manage audio files in your blog posts.
Check out Book VII for information on how to install and use WordPress Book IV
plugins in your blog.

Read More

Adding video from your computer

To upload and post to your blog a video from your computer, click the Add
Video icon on the Edit Post or Add New Post page. Then follow these steps:

1. Click the Choose Files to Upload button.

An Open dialog box appears.
2. Select the video file that you want to upload and click Open (or simply
double-click the filename).
The file uploader window in WordPress appears, which shows a progress bar while your video uploads. When the upload is complete, a dialog box that contains several options opens.
3. Type a title for the file in the Title text box.
4. Type a caption for the file in the Caption text box.
5. Type a description of the file in the Description text box.
6. Click the File URL button.
Clicking this button provides a direct link in your post to the video file
itself.
7. Click Insert into Post.
WordPress doesn’t embed a video player in the post, it inserts only
a link to the video; however, if you have the Auto-Embed feature acti-
vated, WordPress attempts to embed the video within a video player. If
WordPress cannot embed a video player, it displays the link that your
visitors will have to click in order to open the video in a new window to
view it.

Read More

Adding video from the Web

To add video from the Web, click the Add Video icon, then click the From
URL tab, shown in Figure 4-1, on the Add Video pop-up window and follow
these steps:

1. Type the URL (Internet address) of the video in the Video URL text box.

Type the full URL, including the http:// and www portion of the
address. Video providers, such as YouTube, usually list the direct links for the video files on their sites; you can copy and paste one of those links into the Video URL text box.
2. (Optional) Type the title of the video in the Title text box.
Giving a title to the video allows you to provide a bit of a description of
the video. Provide a title if you can so that your readers know what the
video is about.

3. Click the Insert into Post button.

A link to the video is inserted into your post. WordPress doesn’t embed
the actual video in the post; it inserts only a link to the video. Your blog
visitors click the link to load another page in which the video plays.

The preceding steps give you the ability to insert a hyperlink that your
readers can click to view the video on another Web site (such as YouTube).
However, if you activate WordPress’s nifty Auto-Embed feature, WordPress
can automatically embed many of these videos within your posts and pages.
With this feature, WordPress automatically detects that a URL you typed in your post is a video (from YouTube, for example) and wraps the correct HTML embed code around that URL to make sure that the video player appears in your post (in a standards, XHTML-compliant way).
Before WordPress can embed a video, however, you must enable the AutoEmbed feature on the Media Settings page by following these steps:
1. Click Media in the Settings drop-down list on your WordPress
Dashboard.
The Media Settings page loads in the Dashboard.
2. Select the Auto-Embed check box.
The Auto-Embed feature is now enabled and WordPress will attempt to embed a video player from a video URL from third-party video services like YouTube or Flickr within your post.
3. Set the dimensions of the video in which you want the (video) to
appear on your site in the Maximum Embed Size field.
Enter size (width and height) that you want the videos to appear in your posts and pages.
4. Click the Save Changes button.
You’re ready to automatically embed links into your WordPress posts. Book IV
Chapter 4
Currently, WordPress automatically embeds videos from YouTube,
Vimeo, DailyMotion, blip.tv, Flickr, Hulu, Viddler, Qik, Revision3, Scibd, PhotoBucket, PollDaddy, and Google Videom, as well as VideoPress-type videos from WordPress.tv.

Read More

Inserting Video Files into Your Blog Posts

Whether you’re producing your own videos for publication or embedding other people’s videos, placing a video file in a blog post has never been easier with WordPress.

Check out a good example of a video blog at http://1938media.com.

Loren Feldman and his team produce video for the Web and for mobile
devices.

Several video galleries on the Web today allow you to add videos to blog

posts — Google’s YouTube service (www.youtube.com) is a good example
of a third-party video service that allows you to share their videos.

Read More

Inserting Images into Your Blog Posts

 
• Link URL: If you want the image linked to a URL, type that URL in
this text box. Alternately, select the appropriate option button to
determine where your readers go when they click the image you
uploaded: Selecting None means the image isn’t clickable, File URL
directs readers through to the image itself, and Post URL directs
readers through to the post in which the image appears.
• Alignment: Select None, Left, Center, or Right. (See Table 3-1, later in
this chapter, for styling information regarding image alignment.)
• Size: Select Thumbnail, Medium, Large, or Full Size.
WordPress automatically creates small- and medium-sized versions of
the images you upload through the built-in image uploader. A thumb-
nail is a smaller version of the original file. You can edit the size of the
thumbnail by clicking the Settings link and then clicking the Media
menu link. In the Image Sizes section of the Media Settings page, desig-
nate your desired height and width of the small and medium thumbnail
images generated by WordPress.

 

If you’re uploading more than one image, skip to the “Inserting a Photo Gallery” section, later in this chapter.

Click the Edit Image button (shown in Figure 3-2) to edit the appear-

ance of the image.
The image editor (see Figure 3-3) options are represented by icons
shown across the top of the image editor window and include
• Crop: Cut the image down to a smaller size.
• Rotate Counter-Clockwise: Rotate the image to the left.
• Rotate Clockwise: Rotate the image to the right.
• Flip Vertically: Flip the image upside down and back again
• Flip Horizontally: Flip the image from right to left and back again.
• Undo: Undo any changes you made.
• Redo: Redo images edits that you’ve undone.
• Scale Image: The option drop-down list appears, giving you the abil-
ity to set a specific width and height for the image.
Click the Insert into Post button.

The Add an Image window closes, and the Add New Post page (or the

Add New Page page, if you’re writing a page) reappears. WordPress has inserted the HTML to display the image in your post, as shown in Figure 3-4; you can continue editing your post, save it, or publish it.

 

Read More

Adding an image from your computer

To add an image from your own hard drive after you click the Add an Image icon, follow these steps:

1. Click the From Computer tab, and then click the Select Files button.
A dialog box, from which you can select an image (or multiple images) from your hard drive, opens.
2. Select your image(s), and then click Open.
The image is uploaded from your computer to your Web server.
WordPress displays a progress bar on the upload and displays an Image

Options window when the upload is finished.
3. Edit the details for the image(s) by clicking the Show link that appears
to the right of the image thumbnail (the Show link appears for each
image if you uploaded multiple images at once — if you uploaded only one image, the Image options automatically appear).
When you click Show, the Add an Image window appears (see Figure 3-2), which contains several image options:
• Title: Type a title for the image.
• Alternate Text: Type the alternate text (see preceding section) for the
image.
• Caption: Type a caption for the image (such as This is a flower from
my garden).
• Description: Type a description of the image.

Read More