Professional WordPress Design and Development

The Dashboard ❘ 21continue working on that post. Once a post has been published or deleted, it will no longer be displayedin the Recent Drafts widget. To view all recent drafts click the View All button.Need to blog in a hurry? The QuickPress widget is the quickest way to create a new blog post. You canfill in your title and content, just as you would on a normal post. You can even upload and insert animage, or any type of media, right from QuickPress. From here you can save the post as a draft, resetall of the fields, or publish the post for the world to see!To see who is linking to your web site, use the Incoming Links widget. This widget uses Google BlogSearch (http://blogsearch.google.com/) to find incoming links to your web site. If any incominglinks exist, they are displayed here in reverse chronological order, showing the most recent at the top.The Saying link takes you directly to the post that links to your web site so you can view the full contextof the post. Some links may not show up in this list, so don’t be alarmed if links pointed to your web siteare not displayed here. For more details on incoming links and traffic, use a more advanced analyticspackage such as Google Analytics or the WordPress stats plugin.The admin dashboard also contains two RSS widgets, one for the WordPress Development blog andthe other for the Planet WordPress RSS feed. The WordPress Development blog contains news andinformation regarding the development of WordPress. This blog is where new versions of WordPressare announced, as well as beta and release candidate information. The Planet WordPress feed is a col-lection of WordPress-related blogs featuring news and information regarding all aspects of WordPress.These two RSS widgets can be changed to display any RSS feed you like. To change an RSS widget,hover over the title and click the Edit link that appears. Change the feed to any properly formatted RSSfeed and click Save. Now you can display any RSS feed content directly on your WordPress Dashboard.You can add additional widgets to your WordPress Dashboard from plugins. Plugins can use the Dash-board Widgets API to add any custom widget to the admin dashboard. Widgets can provide any typeof custom functionality provided from a plugin. We’ll discuss installing plugins and widgets in moredetail later in this chapter.Customizing the Dashboard You can completely customize your dashboard by dragging and dropping your widgets to different positions. You can minimize any widget by hovering over the title and clicking the arrow that appears to the right of the widget title. This minimizes the widget and displays only the widget title, hiding the rest of the widget. You can also hide any widgets you don’t want visible by unchecking that widget under the Screen Options tab in the header. To edit any Dashboard Widget settings, hover over the title of the widget and an Edit link appears. Click that link to view the widget’s available settings.Screen OptionsThe Screen Options tab shown in Figure 2-2 enables you to FIGURE 2-2: Screen options tabmodify display settings on any screen of your dashboard. Each located in the header of the adminscreen shows different options under the Screen Options tab. dashboardFor example, clicking the Screen Options tab under Posts ➪ Editallows you to adjust which fields are displayed. You can alsoadjust how many posts per page are shown.

22 ❘ CHAPTER 2 FUNCTIONAL OVERVIEWUnder the Screen Options tab on the admin dashboard you can also adjust how many columns youwant displayed, choosing between two to four columns present on your dashboard. To change thisoption click the Screen Options tab. Then select two, three, or four columns for your widgets to bedisplayed in.Admin MenuThe WordPress Admin Menu is located on the left-hand side of the admin dash-board and features links to different administrator SubPanels. SubPanels are theindividual admin pages in WordPress. When you hover over any SubPanel link inthe menu a small arrow appears to the right of the menu item. Clicking this arrowexpands that menu item to show submenu items. WordPress remembers whichmenus are expanded so if you log out and then log back in you will notice the exactsame menus expanded as when you left. This helps hide certain Admin Menus thatyou don’t use as often. The Admin Menu can also be collapsed to only show icons, giving you more FIGURE 2-3: The space for your primary content. Just click the horizontal arrow located just below WordPress Admin Dashboard or Comments to collapse the Admin Menu. When the Admin Menu is menu collapsed you can hover over any icon to show all menu options below that item. Collapsing the menu gives you a larger workable area in the admin dashboard.CREATING AND MANAGING CONTENTAt the heart of any web site is content. Content is the primary reason web sites gain traffic and probablyone of the key reasons you decided to use WordPress for your web site. WordPress makes managingcontent a breeze and is easily controllable by beginners and experts alike.In this part of the chapter we cover all aspects of content in WordPress, from creating and managingposts and pages to working with the link manager. Content is one of the most important parts of yourweb site so it’s crucial to understand how to manage your content in WordPress.Creating Posts Posts are content entries that typically display in reverse chronological order on your web site. These are generally considered to be blog posts, but can be used for a variety of reasons including news, events, business data, and much more. All posts are saved with a date and time stamp making the content dated material. Posts are also categorized and can be tagged to help filter posts by either category or tag. The first step to creating a post is to click the Add New link under the Posts SubPanel. Creating a post couldn’t be easier; the only actual required fields are either the post content or title. The first box on the Add New Post screen is the title of your post. Go ahead and fill in a title of ‘‘My First Post’’. This is one of the most important parts of your post because it describes what your post is about. It is also heavily used for search engine optimization. If you have permalinks enabled the title is also used in your post permalink or URL depending on the permalink structure set. If you leave a post title blank, the permalink will be the post ID. The current post’s permalink is displayed below the post title after the initial save.

Creating and Managing Content ❘ 23The next step in creating a post is writing your post content. The post content box, located directlybelow the title, is where your post content is entered. You can use either the Visual or HTML editor tocreate your post. To switch between the two just click the tab for which editor you would like to view.The visual editor features many word-processor-like buttons across the top of the content editor. Mostof these options are standard formatting for word processing programs such as Microsoft Word. Forexample, clicking the B icon bolds any text you have selected or are about to write. Go ahead and enterin whatever content you like for your example post.You can also add images or media to your post. Images are a great way to give your post visual appeal.Let’s add an image to your example post. To add an image to your post, click the Add Image iconlocated next to the Upload/Insert text. The media overlay window appears using a lightbox effectcalled Thickbox. The Thickbox effect is a web site popup that ‘‘dims’’ the rest of the web site, puttingfocus on the popup. From here you can add new images, select images that have already been addedto the post, and select images uploaded anywhere on your web site using WordPress. Click the SelectImage button and select an image from your computer. If you are using the Flash uploader, which isthe default uploader, you can select multiple images to upload in one shot. WordPress processes anduploads each image automatically.After you have uploaded an image, you need to insert that image into your post content. Click the Insertinto Post button and your image is inserted into your post. If you are using the visual editor, the imageappears in your post content. You can now select the image to adjust alignment and image settingsor delete the image from your post. If you are using the HTML editor, the HTML IMG tag appearslinking to your newly uploaded image.Next you’ll want to select the appropriate category for your post. Categories help group similar postsmaking it easy for your readers to find additional posts under the same topic. You set the category inthe Category meta box located in the right-hand column directly below the Publish box, and you canselect multiple categories for a single post. If you want to add a new category, click the + Add NewCategory link at the bottom of the Category box and fill in your new category name. You can also viewthe Most Used categories by clicking the tab with the same name. In your example post, create a newcategory called ‘‘Examples’’ and assign the new post to that category.You can also add tags to your post. Tags are keywords that describe what your post is about. Theyshould be short and sweet, generally no more than two words per tag. The Tag meta box is locateddirectly under the Categories box by default. Add tags to your post by entering a set of tag keywordsseparated by a comma. You can easily remove tags by clicking the small X next to each tag. Removinga tag will only remove that tag from your post, not your entire tag collection. As you type in a tagWordPress automatically searches for tags using the same letters, and will prompt you with them,making it quicker to find tags you have already used on previous posts. Go ahead and add a few tagsto your example post now.Once you are satisfied with your post, you’ll want to publish it. To publish your example post,just click the blue Publish button. Your example post is now published and viewable on yourweb site. The Publish meta box also contains buttons that control the state of your post. It has threestates by default: Published, Pending Review, and Draft. Published status indicates that a post ispublicly viewable on your web site. Pending Review status is a post waiting to be reviewed andapproved by an Editor or Administrator. Any post submitted by a Contributor is set to PendingReview. Draft status is a post that you are currently working on, but hasn’t been published yet.

24 ❘ CHAPTER 2 FUNCTIONAL OVERVIEW These posts are usually posts you are still working on writing and still need some more addi- tional work. You can also modify the post date by clicking the Edit button next to the date/time. To schedule a post to automatically publish at a future date and time, simply enter that date and time and click Ok. Once the publish date has been changed, the post Publish button changes to Schedule. When you click the Schedule button your new post will automatically be scheduled to be published on the date and time you have saved. This is a great feature if you are going on vacation but don’t want a large lapse in fresh content on your web site. You can also set the post date in the past. This is useful if you have a large gap in your posts and want to fill in the blanks with older posts. Finally, you can change the visibility on a post. Public posts are publicly viewable by anyone on your web site. Password-protected posts are published to everyone, but can only be viewed if you know the correct password. Private posts are only viewable by web site Editors and Administrators and not viewable by the public. Each of the meta boxes displayed on the post add/edit screen can be dragged and dropped however you like. This can help you organize these meta boxes based on your usage, moving the boxes higher up that you use more frequently. To drag a meta box, just click the title of the box and drag to the desired new position on the page. Managing Posts You can manage all of your posts in WordPress under the Posts ➪ Edit SubPanel. Here you will see all of your posts listed, regardless of their current status. Notice that your example post ‘‘My First Post’’ is now listed at the top of the list. Multiple filter options across the top enable you to filter your posts by status, category, month, and so on. To view all posts at a Draft status, just click the Draft link at the top. You can also search all posts for specific keywords using the search box located at the top right of the Posts Edit screen. Posts are displayed in a list view by default, but you can also display them in an excerpt view. The excerpt display shows all posts listed with an excerpt of the post content. To toggle which display is used, click the icon for either list or excerpt view located directly below the search keyword box. Hovering over a post displays multiple options for managing that post, as shown in Figure 2-4. FIGURE 2-4: Edit post hover action links The Quick Edit link allows you quick access to edit the post information. The post information is loaded using AJAX, and therefore a page refresh is not necessary. Here you can quickly change the post category, edit the post title, or even change the post slug (permalink). In fact, you can change just about everything on a post except the actual post content using quick edit. Clicking the Delete link deletes the post from WordPress. Don’t get too scared of that link; WordPress confirms that you actually want to delete the post before doing so.

Creating and Managing Content ❘ 25 You’ll also notice a checkbox next to each post. Checking multiple posts allows you do to a bulk edit or bulk delete on the selected posts. Using the bulk edit enables you to change the post categories, tags, author, comments, status, pings, and sticky option. This is a great time saver if you want to change the category of more than one post or delete a handful of posts.Creating Pages Pages in WordPress differ from posts in that they are meant for static informational content. Pages are not defined by dates, categories, or tags, but rather the content that they contain. To create a new page, click the Add New link under the Pages SubPanel. The page title should be informative on what the page is about. Page titles are generally shorter than post titles (such as About or Contact) but can be as long as you like. The page content box works exactly the same as a post and features all of the same formatting options. You add images and media the exact same way. One major difference between pages and posts is the Attributes meta box located directly under the Publish box on the right-hand side. Here you can set your page hierarchy under the Parent option. This allows for pages and sub-pages to be created and assigned. For example, if you had an About page, you could create multiple sub-pages under About, such as About ➪ Me and About ➪ This Web site. If your page requires additional functionality, you can assign it to a page template. Custom page templates allow you to link a WordPress page to a physical PHP template file located in your theme directory. This makes adding custom code or a completely different design to any page extremely easy. We tell you all about this feature in Chapter 8, ‘‘Theme Development.’’ Don’t forget to set the appropriate page order for your page. Pages are ordered alphabetically by default, but you can overwrite this using the sort filter. By adding a number to the Order field and using the sort filter you can order your WordPress pages any way you like.Managing Pages You manage pages under the Pages ➪ Edit SubPanel. Managing your pages in WordPress is almost identical to managing posts. You can filter what pages are displayed using the filter options across the top. You can also do a keyword search to filter pages using the search box at the top right. Pages are listed in alphabetical order, unless the sort order has been set on each post. To set the page sort order, hover over any page and click the Quick Edit link. Enter in a number for the Order field based on what order you want your pages displayed. If you want this page displayed first, set it to 0; if you want the page displayed last, set it to a really high number, such as 99. Unless you have 99 other pages, that page will always display last.Links WordPress has a built-in link manager system located in the Links SubPanel. Links can be created, categorized, and displayed in various ways on your web site. The links don’t have to be to an external web site; they can also be internal links to your own web site. To add a new link, navigate to Links ➪ Add New SubPanel in your Admin Menu. Start by filling in the name of the link. The name is typically used for display purposes as the anchor text, and should

26 ❘ CHAPTER 2 FUNCTIONAL OVERVIEW be short and descriptive about what the web site is. Next fill in the Web Address, which is the fully qualified URL of the link you are creating. If you are adding an internal link, you can use the relative path. The link description is used to describe the new link. This is usually displayed when hovering over the link or just below the link, depending how your theme templates or widgets are configured. Categorizing your link is a great way to group similar links together. You can add links to multiple link categories. Check all of the categories that you want to assign your link to. You can also create new categories by clicking the + Add New Category link. Be sure to select the appropriate target for your link. The target determines how the new link opens when clicked. Generally a link to an external web site should open in a new window or tab, in which case you would want to select the _blank target option. Internal links should open in the same window, so the default _none option should be selected. Once you have filled in the entire link information click the Save button to save your new link in Word- Press. Your newly created link will now show in the links list under the Links SubPanel and anywhere on your web site that displays links. Trash WordPress features a Trash section, which works very similar to the Recycle Bin on a Windows com- puter. Instead of a Delete link for your posts, pages, media, and comments, there is a ‘‘Move to Trash’’ link. Moving any content to the Trash does not delete that content, but instead moves it to the Trash section in WordPress. To permanently delete this content, you must visit the Trash container for that particular type of content and click the Empty Trash button located near the header. This features reduces the issue of permanently deleting content by accident as it is now a two-step process. The Trash page is simply a filter link located with the rest of the content filters near the header of the content page. Click the Trash link to view all like content items contained in the trash section. If you hover over any content item listed you will be presented with two options: Restore and Delete permanently. Click Restore to move the content item out of the Trash section, or to erase the content completely, click the Delete permanently link. The Trash section is emptied every 30 days, so only move content to Trash if you really want to delete it. CATEGORIZING YOUR CONTENT Content categorization is one of the most important aspects of creating content. Properly categorized content makes it easier for visitors to read your web site. It also makes it easier for visitors to navigate your web site for additional content on the same topics. Correctly categorizing content also allows you to aggregate that content in different places in your theme template files. For example, you could create an ‘‘Events’’ category that shows only posts in your Events News sidebar widget assigned to that category. Categories versus Tags Categories and tags are very similar, and thus the question ‘‘What’s the difference?’’ is a very common one. Categories are a way of organizing your posts, whereas tags are a way of describing your posts.

Categorizing Your Content ❘ 27For example, a post titled ‘‘WordCamp New Jersey Recap’’ might be filed under the Conference cate-gory, but tagged with keywords like WordPress, WordCamp, New Jersey, and NJ.Another major difference between tags and categories is that categories are hierarchical. This meanscategories can have sub-categories, and sub-sub categories, whereas tags cannot.Post Categories Post categories are just that, a simple way to categorize your content. Each post you create can be assigned to multiple categories. To add your post to a category, select the appropriate category from the Cate- gories meta box, as shown in Figure 2-5. You can also view the Most Used categories by selecting that tab. To add a new category click the + Add New Category link below the Categories meta box. Categories are managed under the Posts ➪ Categories SubPanel. From here you can create, edit, and delete all post categories on your web site. You can also search all categories and view all posts assigned to each category. To delete or edit a category, hover over the category you want to work with. Multiple options will appear, including Edit, Quick FIGURE 2-5: Category select Edit, and Delete. Clicking the Delete link deletes that category from meta box WordPress. When deleting a category, posts filed under that category are not deleted, but instead are reassigned to the default Uncategorized category. A future release of WordPress will have the ability to choose which category to assign the orphaned posts to. WordPress also provides a Category to Tag Converter and a Tag to Category Converter. These tools can be used to do exactly that, convert categories to tags and vice versa. Just click the Category to Tag Converter link, select which categories you would like to convert, and click Convert Categories to Tags. Keep in mind that if you convert a category with child categories, the children become top-level orphans.Tagging PostsTags are keywords that describe your post. Think of tags as Post-it notes attached to each post, describ-ing that post. Tags are generally limited to two words per tag, but are typically a single keyword. Theydiffer from categories in that tags are descriptive keywords that describe your individual post. Forexample, a post titled ‘‘Best Cheeseburger Ever’’ might contain the tags ketchup, mustard, cheese, andburger, but you wouldn’t have a Ketchup category unless youplanned on writing more on ketchup. Tags are also used by manytag-related sites including Technorati, Delicious, and Flickr.To add tags to your post simply enter keywords separated by acomma in the Post Tags meta box, as shown in Figure 2-6.As you type in your tags, WordPress automatically suggests tags FIGURE 2-6: Tag meta boxbased on your existing tags loaded into WordPress. You can alsoview the most used tags by clicking the Choose from the Most UsedTags in Post Tags link.

28 ❘ CHAPTER 2 FUNCTIONAL OVERVIEWTags are managed under the Posts ➪ Post Tags SubPanel. From here you can create, edit, and delete allpost tags on your web site. You can also search all tags and view all posts assigned to each tag.Categorizing Links WordPress also features the ability to categorize links. Categorizing links is a great way to display different groups of links across your web site. Link categories are managed under the Links ➪ Link Categories SubPanel. By default WordPress comes with one link category called Blogroll. You can change this category name to anything you would like, but the default category will always remain. When you add a new link the link categories are listed in the Categories meta box, as shown in Figure 2-7. From here you can select which category the new link will be added to. You can also view the most used link categories, and cre- ate new link categories by clicking the + Add New Category link. Deleting a category does not delete the links in that category, but instead assigns all links to the default category.WORKING WITH MEDIA FIGURE 2-7: Category select meta box for new linksWordPress features a robust system for managing all of your web site’s media. Media refers to theimages, video, audio recordings, and files uploaded to your web site using WordPress. Media that isuploaded in WordPress can easily be inserted into any post or page for display. Media can be uploadedand attached at a post/page level or directly to the Media Library.Media Library The WordPress Media Library is where you can add, manage, and delete all media across your entire WordPress web site. The Media Library SubPanel enables you to manage all media on your web site, whether uploaded directly in the Media Library or uploaded directly to a post or page.Uploading Media You can upload media to your WordPress web site by clicking the Add New link under the Media SubPanel on your Admin Menu. Click the Select Files button to upload media using the Flash uploader. If you experience issues with the Flash uploader (it doesn’t work on every host) you can click the link for the Browser Uploader. One major feature of the Flash uploader that is often overlooked is the ability to upload multiple files at a time. Simply select a group of files in the dialog box that appears and click Open. All files selected are listed showing an upload status bar while the images are uploaded to your web site. The browser uploader can upload only a single file at a time. If you experience problems uploading media, the first thing to check is the permissions set on your uploads folder. By default WordPress folders should be set to 755 for security reasons, but some hosts

Working with Media ❘ 29 require the uploads folder to be set to 777. These numbers represent the chmod access level assigned to each directory and file on your web server. If you are running WordPress on a Windows server you should give the IUSER account write permissions to the uploads folder. This allows WordPress to upload any media files directly to your web site. WordPress does not filter by file type; therefore all file types are technically supported for uploading. This can also create a security vulnerability and should be locked down if you allow your members to upload media files. Plugins are available that can restrict the media upload to specific file types, such as only images.Inserting Media Media is inserted on the Post/Page Edit screen. From here you can select any media that has been uploaded across your web site and insert it directly into your post or page. You can also upload any new media that you would like for use in your post or page. To insert media, start by clicking one of the four icons located next to the Upload/Insert text link below the post title. The icons represent image, video, sound, and media. Clicking any one of these icons brings up the Thickbox overlay to upload and insert media into your post or page. From here you will notice multiple tabs across the top of the Thickbox, but the two we are focused on are the Gallery and Media Library tabs. The Gallery tab, which only shows up after you upload an image to your post, houses all images uploaded to that particular post. The Media Library tab houses all images uploaded across your entire WordPress web site. Clicking either tab displays images in a list format. To insert an image into your post, click the Show link located to the right of the image you want to embed. This expands the box and shows you all of the properties associated with that image. Here you can set the image title, caption, and also a short image description. You can also set the link URL for the image, so if the image should link to another web page this is where you would enter it. Be sure to select the correct alignment and size then click the Insert into Post button. Upon clicking this button the Thickbox overlay disappears and the image is embedded into the post content box. If you are using the visual editor you should see your image displayed. WordPress also has a built in Gallery feature. This feature allows you to upload multiple images to a single post or page and display all of those images in a nicely formatted gallery. To use the gallery, start by uploading multiple images to a post. After you have a couple images uploaded, close the Thickbox overlay by clicking anywhere outside of the popup, or just click the X in the upper right hand corner. Next we’ll use a shortcode in our post content to represent the gallery. A shortcode is a specific piece of code, usually wrapped in brackets, that is recognized by WordPress or a plugin. When editing a post or page you will see the actual shortcode, but when viewing the post or page on your web site the shortcode will be replaced by the functionality attached to that shortcode, in this case an image gallery. Drop this shortcode in your post content: [gallery] and save your post. An image gallery will now be displayed in your post! The gallery shortcode also supports different options that you can use. To specify the number of columns in your gallery (the default is 3) use this option: [gallery columns=\"4\"]. You can also display a gallery from a different post by specifying the post id: [gallery id=\"5\"]. WordPress does not have a built-in video or audio player, therefore any video or audio uploaded to WordPress cannot be automatically embedded in your post or page. To embed video or sound you will need a plugin that supports the proper video format you would like to embed. Many video player