A Free WordPress User`s Guide

 HTTP://EDUCHALK.ORG Figaro’s WordPress User’s Guide Version 2: 30 Nov 09 Author: Figaro Website:
http://educhalk.org License:
GPL – Have Fun! This user’s guide is a derivative work based heavily on documentation made available under GPL from http://codex.wordpress.org. The content, format, and organization have been edited some from its original form. This guide is being made available under the same GPL licenses as the original work. There is no guarantee this information is accurate…use at your own risk. Neither this product, nor its author, is affiliated with, or endorsed by, WordPress. WordPress is a trademark owned by Automattic, Inc. [HTTP://EDUCHALK.ORG] [2009] HTTP://EDUCHALK.ORG
Table of Contents Table of Contents ................................................................................................................................... 2 About this Book .................................................................................................................................... 15 ABOUT WORDPRESS .................................................................................................................................................... 15 Chapter 1: Introduction to Blogging .................................................................................................... 16 WHAT IS A "BLOG"? ..................................................................................................................................................... 16 THE BLOG CONTENT .................................................................................................................................................. 16 COMMENTS .................................................................................................................................................................... 16 THE DIFFERENCE BETWEEN A BLOG AND CMS?................................................................................................. 17 THINGS BLOGGERS NEED TO KNOW...................................................................................................................... 17 TRACKBACKS ................................................................................................................................................................. 19 PINGBACKS .................................................................................................................................................................... 19 VERIFYING PINGBACKS AND TRACKBACKS ........................................................................................................... 20 COMMENT MODERATION .......................................................................................................................................... 20 COMMENT SPAM ........................................................................................................................................................... 20 PRETTY PERMALINKS .................................................................................................................................................. 21 BLOG BY EMAIL ............................................................................................................................................................ 21 POST SLUGS ................................................................................................................................................................... 22 EXCERPT ........................................................................................................................................................................ 22 PLUGINS ......................................................................................................................................................................... 22 BASICS-A FEW BLOGGING TIPS ................................................................................................................................ 22 Chapter 2: WordPress Semantics ......................................................................................................... 23 INTRODUCTION TO WORDPRESS TERMINOLOGY ................................................................................................ 23 TERMINOLOGY RELATED TO CONTENT................................................................................................................. 23 TERMINOLOGY RELATED TO DESIGN .................................................................................................................... 24 HTTP://EDUCHALK.ORG: 2
HTTP://EDUCHALK.ORG
TERMINOLOGY FOR THE ADMINISTRATOR ............................................................................................................ 25 THE TERMINOLOGY OF HELP ................................................................................................................................... 25 HISTORY OF THE WORDPRESS NAME ..................................................................................................................... 25 Chapter 3: Installing WordPress .......................................................................................................... 26 SYSTEM RECOMMENDATIONS ................................................................................................................................... 26 5-MINUTE INSTALL ...................................................................................................................................................... 26 Chapter 4: Getting Started .................................................................................................................... 28 OVERVIEW OF THE ADMINISTRATION PANEL....................................................................................................... 28 GENERAL STRUCTURE ................................................................................................................................................ 28 NAVIGATION................................................................................................................................................................. 28 SHORTCUTS MENU ....................................................................................................................................................... 30 CUSTOMIZATION .......................................................................................................................................................... 31 DASHBOARD.................................................................................................................................................................. 32 DEFINING YOUR SETTINGS ....................................................................................................................................... 33 GENERAL SETTINGS .................................................................................................................................................... 33 WRITING SETTINGS ..................................................................................................................................................... 35 ADMINISTRATION DEFAULTS .................................................................................................................................... 36 NOTE .............................................................................................................................................................................. 37 REMOTE PUBLISHING ................................................................................................................................................. 37 POST VIA E-MAIL .......................................................................................................................................................... 37 PRESS THIS..................................................................................................................................................................... 38 UPDATE SERVICES ....................................................................................................................................................... 38 READING SETTINGS .................................................................................................................................................... 38 FRONT PAGE DISPLAYS ............................................................................................................................................... 39 BLOG PAGES SHOW AT MOST ..................................................................................................................................... 40 FOR EACH ARTICLE IN A FEED, SHOW...................................................................................................................... 40 HTTP://EDUCHALK.ORG: 3
HTTP://EDUCHALK.ORG
ENCODING FOR PAGES AND FEEDS ......................................................................................................................... 40 DISCUSSION SETTINGS ................................................................................................................................................ 40 DEFAULT ARTICLE SETTING ...................................................................................................................................... 41 OTHER COMMENT SETTINGS ..................................................................................................................................... 41 E-MAIL ME WHENEVER ............................................................................................................................................... 42 BEFORE A COMMENT APPEARS .................................................................................................................................. 43 COMMENT MODERATION .......................................................................................................................................... 43 COMMENT BLACKLIST ................................................................................................................................................ 43 AVATARS ........................................................................................................................................................................ 44 AVATAR DISPLAY .......................................................................................................................................................... 44 MAXIMUM RATING ...................................................................................................................................................... 44 DEFAULT AVATAR ....................................................................................................................................................... 44 MEDIA SETTINGS ......................................................................................................................................................... 45 IMAGE SIZES .................................................................................................................................................................. 45 PRIVACY SETTINGS ...................................................................................................................................................... 46 PERMALINK SETTINGS ................................................................................................................................................ 46 TIP ................................................................................................................................................................................... 48 MISCELLANEOUS SETTINGS ....................................................................................................................................... 48 UPLOADING FILES ....................................................................................................................................................... 48 NOTE .............................................................................................................................................................................. 49 TRACK LINKS’ UPDATE TIMES .................................................................................................................................. 49 DEFINING YOUR USERS ............................................................................................................................................. 49 SUMMARY OF ROLES .................................................................................................................................................... 50 NOTE .............................................................................................................................................................................. 51 ADDING A NEW USER ................................................................................................................................................. 51 EDITING YOUR PROFILE ............................................................................................................................................ 51 HTTP://EDUCHALK.ORG: 4
HTTP://EDUCHALK.ORG
NOTE .............................................................................................................................................................................. 52 PERSONAL OPTIONS .................................................................................................................................................... 52 NAME .............................................................................................................................................................................. 53 CONTACT INFO............................................................................................................................................................. 53 ABOUT YOURSELF ........................................................................................................................................................ 54 BEFORE YOU LEAVE ................................................................................................................................................... 54 MANAGING USERS ....................................................................................................................................................... 54 SEARCH USERS .............................................................................................................................................................. 56 FILTER USERS................................................................................................................................................................ 56 DELETE USERS ............................................................................................................................................................. 56 CHANGE USER ROLE ................................................................................................................................................... 57 Chapter 5: Creating Content................................................................................................................. 58 POSTS .............................................................................................................................................................................. 58 CREATING A NEW POST ............................................................................................................................................. 58 TAGS ............................................................................................................................................................................... 60 CATEGORIES ................................................................................................................................................................. 60 EXCERPT ........................................................................................................................................................................ 61 TRACKBACKS ................................................................................................................................................................. 61 DISCUSSION ................................................................................................................................................................... 62 CUSTOM FIELDS ........................................................................................................................................................... 62 POST AUTHOR............................................................................................................................................................... 63 POST REVISIONS ........................................................................................................................................................... 63 PUBLISH .......................................................................................................................................................................... 63 OTHER WAYS TO CREATE POSTS.............................................................................................................................. 64 PRESS THIS..................................................................................................................................................................... 64 BY E-MAIL...................................................................................................................................................................... 64 HTTP://EDUCHALK.ORG: 5
HTTP://EDUCHALK.ORG
XML-RPC AND ATOM INTERFACE .......................................................................................................................... 64 MANAGING EXISTING POSTS .................................................................................................................................... 65 MANAGING CATEGORIES ........................................................................................................................................... 65 MANAGING TAGS......................................................................................................................................................... 65 MEDIA ............................................................................................................................................................................ 66 UPLOADING MEDIA FILES ......................................................................................................................................... 66 FLASH UPLOADER ........................................................................................................................................................ 67 BROWSER UPLOADER .................................................................................................................................................. 68 MEDIA LIBRARY ........................................................................................................................................................... 68 PAGES ............................................................................................................................................................................. 70 CREATING PAGES ........................................................................................................................................................ 70 PAGE ORDER ................................................................................................................................................................ 71 PAGE PARENT ............................................................................................................................................................... 71 PAGE TEMPLATES ........................................................................................................................................................ 71 CHANGING THE URL (OR “SLUG”) OF YOUR PAGES ........................................................................................... 72 LISTING YOUR PAGES ON YOUR SITE ..................................................................................................................... 72 MANAGING EXISTING PAGES ................................................................................................................................... 73 LINKS .............................................................................................................................................................................. 75 ADDING NEW LINKS ................................................................................................................................................... 75 NAME .............................................................................................................................................................................. 76 WEB ADDRESS .............................................................................................................................................................. 76 DESCRIPTION ................................................................................................................................................................ 76 CATEGORIES ................................................................................................................................................................. 76 NOTE .............................................................................................................................................................................. 77 TARGET .......................................................................................................................................................................... 77 LINK RELATIONSHIP (XFN) ...................................................................................................................................... 78 HTTP://EDUCHALK.ORG: 6
HTTP://EDUCHALK.ORG
ADVANCED.................................................................................................................................................................... 78 SAVE................................................................................................................................................................................ 79 MANAGING EXISTING LINKS .................................................................................................................................... 80 LINK CATEGORIES ....................................................................................................................................................... 81 ADDING A NEW LINK CATEGORY ........................................................................................................................... 81 MANAGING EXISTING LINK CATEGORIES ............................................................................................................. 82 NOTE .............................................................................................................................................................................. 83 Chapter 6: Comments and Pings.......................................................................................................... 84 COMMENTS, PINGBACKS AND TRACKBACKS: TERMINOLOGY ........................................................................... 84 USING THE COMMENTS SCREEN .............................................................................................................................. 84 COMMENT MODERATION .......................................................................................................................................... 87 COMMENT SPAM ........................................................................................................................................................... 89 FIGHTING COMMENT SPAM ....................................................................................................................................... 89 STEALTH SPAM.............................................................................................................................................................. 89 Chapter 7: Design and Layout ............................................................................................................. 91 ABOUT THEMES............................................................................................................................................................ 91 TEMPLATE FILES .......................................................................................................................................................... 91 TEMPLATE TAGS .......................................................................................................................................................... 91 CSS STYLE SHEETS....................................................................................................................................................... 91 SELECTING THE ACTIVE THEME .............................................................................................................................. 91 CUSTOM HEADERS ....................................................................................................................................................... 92 UPLOADING A NEW THEME ...................................................................................................................................... 93 ADDING THEMES VIA THE WORDPRESS INTERFACE ........................................................................................... 93 ADDING THEMES VIA FTP......................................................................................................................................... 95 ADDING NEW THEMES IN CPANEL.......................................................................................................................... 95 NOTE .............................................................................................................................................................................. 95 HTTP://EDUCHALK.ORG: 7
HTTP://EDUCHALK.ORG
MODIFYING THEMES .................................................................................................................................................. 96 CSS .................................................................................................................................................................................. 97 TEMPLATE TAGS .......................................................................................................................................................... 97 CREATING YOUR OWN THEME ................................................................................................................................ 97 SIDEBAR WIDGETS....................................................................................................................................................... 98 ADDING WIDGETS ....................................................................................................................................................... 98 CONFIGURING WIDGETS............................................................................................................................................ 99 REMOVING A WIDGET ................................................................................................................................................ 99 Chapter 8: Plugins .............................................................................................................................. 100 ABOUT PLUGINS ......................................................................................................................................................... 100 DEFAULT PLUGINS .................................................................................................................................................... 100 AKISMET ...................................................................................................................................................................... 100 HELLO DOLLY ............................................................................................................................................................ 100 FINDING AND INSTALLING PLUGINS..................................................................................................................... 101 BUILT-IN PLUGIN BROWSER .................................................................................................................................... 101 OTHER WAYS TO FIND PLUGINS ............................................................................................................................ 102 COMPATIBILITY ISSUES ............................................................................................................................................. 102 PLUGIN UPDATES....................................................................................................................................................... 102 MANAGING YOUR PLUGINS .................................................................................................................................... 102 CREATING A PLUGIN ................................................................................................................................................. 102 Chapter 9: System Administration ..................................................................................................... 104 IMPORTING FILES....................................................................................................................................................... 104 EXPORTING FILES ...................................................................................................................................................... 104 FILE PERMISSIONS...................................................................................................................................................... 105 NOTE ............................................................................................................................................................................ 105 BACKING UP YOUR DATABASE AND FILES .......................................................................................................... 106 HTTP://EDUCHALK.ORG: 8
HTTP://EDUCHALK.ORG
UPGRADING WORDPRESS ........................................................................................................................................ 106 DOING A MANUAL UPGRADE ................................................................................................................................. 107 WARNING .................................................................................................................................................................... 107 STEP 1: PREPARE ........................................................................................................................................................ 107 STEP 2: REPLACE WORDPRESS FILES ..................................................................................................................... 107 NOTE ............................................................................................................................................................................ 108 STEP 3: UPGRADE YOUR INSTALLATION ............................................................................................................... 108 MOVING WORDPRESS ............................................................................................................................................... 108 Chapter 10: Working with WordPress Templates ............................................................................... 110 STEPPING INTO TEMPLATES .................................................................................................................................... 110 THE WORDPRESS PAGE STRUCTURE ..................................................................................................................... 110 BASIC TEMPLATE FILES ............................................................................................................................................ 110 MORE COMPLEX PAGE STRUCTURES ..................................................................................................................... 111 WHERE'S THE BEEF?.................................................................................................................................................. 111 TEMPLATE FILES WITHIN TEMPLATE FILES ........................................................................................................ 111 SPECIAL TEMPLATE FILES ........................................................................................................................................ 112 TEMPLATE FILE TIPS ................................................................................................................................................. 112 TRACKING OPENING AND CLOSING TAGS .......................................................................................................... 112 TEST TEMPLATE FILES UNDER DIFFERENT VIEWS............................................................................................ 113 COMMENT DEVIATIONS ........................................................................................................................................... 113 CLOSE THE TAG DOOR BEHIND YOU ................................................................................................................... 113 CSS STYLES IN TEMPLATES ...................................................................................................................................... 113 TEMPLATE HIERARCHY ............................................................................................................................................ 113 INTRODUCTION .......................................................................................................................................................... 113 USING CONDITIONAL TAGS .................................................................................................................................... 113 THE GENERAL IDEA ................................................................................................................................................. 114 HTTP://EDUCHALK.ORG: 9
HTTP://EDUCHALK.ORG
EXAMPLES.................................................................................................................................................................... 114 THE TEMPLATE HIERARCHY IN DETAIL ............................................................................................................... 114 TEMPLATE TAGS/ANATOMY OF A TEMPLATE TAG ........................................................................................... 116 INTRODUCTION .......................................................................................................................................................... 116 PHP CODE TAG .......................................................................................................................................................... 116 WORDPRESS FUNCTION ............................................................................................................................................ 117 OPTIONAL PARAMETERS........................................................................................................................................... 117 TEMPLATE TAGS ........................................................................................................................................................ 118 Chapter 11: Working with Images ...................................................................................................... 124 A PICTURE SAYS MORE THAN A THOUSAND WORDS. .......................................................................................... 124 STYLING IMAGES IN WORDPRESS .......................................................................................................................... 124 USING IMAGES IN POSTS .......................................................................................................................................... 124 INSERTING IMAGES INTO POSTS ............................................................................................................................. 125 IMAGE SIZE AND QUALITY ...................................................................................................................................... 126 RESIZING IMAGES ...................................................................................................................................................... 128 STYLING IMAGES ........................................................................................................................................................ 128 STYLING ALL IMAGES ............................................................................................................................................... 128 STYLING SOME IMAGES ............................................................................................................................................ 129 WRAPPING TEXT AROUND IMAGES ....................................................................................................................... 130 GIVING THE IMAGE STYLE...................................................................................................................................... 130 BORDERS ...................................................................................................................................................................... 131 PADDING AND IMAGE WIDTH ................................................................................................................................ 131 IMAGE LEFT, RIGHT, AND CENTER ....................................................................................................................... 132 LEFT, RIGHT, AND CENTERED EXAMPLES ........................................................................................................... 132 ALTERNATIVE TEXT SIZE ........................................................................................................................................ 133 CAPTIONING THE IMAGE......................................................................................................................................... 133 HTTP://EDUCHALK.ORG: 10
HTTP://EDUCHALK.ORG
CLEAR THE DISPLAY ................................................................................................................................................. 134 Chapter 12: Designing Headers ......................................................................................................... 135 THE WORDPRESS HEADER ...................................................................................................................................... 135 STYLING THE HEADER ............................................................................................................................................. 136 CHANGING THE HEADER IMAGE ........................................................................................................................... 137 HEADER IMAGE SPECIFICATIONS........................................................................................................................... 138 HEADER ART .............................................................................................................................................................. 139 HEADER ART COPYRIGHTS...................................................................................................................................... 139 DESIGNING YOUR OWN HEADER ART ................................................................................................................. 139 HIDING THE HEADER TEXT .................................................................................................................................... 140 MAKING THE WHOLE HEADER CLICKABLE ........................................................................................................ 140 ROTATING HEADER IMAGES ................................................................................................................................... 142 ADDING NAVIGATION TO YOUR HEADER .......................................................................................................... 142 HEADER TIPS .............................................................................................................................................................. 143 Glossary of Terms and Concepts ....................................................................................................... 146 ABSOLUTE PATH ........................................................................................................................................................ 146 APACHE ........................................................................................................................................................................ 146 ASCII ............................................................................................................................................................................ 146 ATOM ............................................................................................................................................................................ 146 AVATAR ........................................................................................................................................................................ 146 BINARIES ...................................................................................................................................................................... 146 BLOG............................................................................................................................................................................. 147 BLOGGING................................................................................................................................................................... 147 BLOGOSPHERE............................................................................................................................................................ 147 BLOGROLL ................................................................................................................................................................... 147 BOOKMARKLET .......................................................................................................................................................... 147 HTTP://EDUCHALK.ORG: 11
HTTP://EDUCHALK.ORG
CATEGORY .................................................................................................................................................................. 147 CAPABILITIES .............................................................................................................................................................. 147 CGI ............................................................................................................................................................................... 147 CHARACTER ENTITY ................................................................................................................................................. 148 CHARACTER SET ......................................................................................................................................................... 148 CHMOD ......................................................................................................................................................................... 148 COLLATION ................................................................................................................................................................. 148 COMMENTS .................................................................................................................................................................. 148 CONTENT MANAGEMENT SYSTEM ........................................................................................................................ 149 CPANEL ........................................................................................................................................................................ 149 CSS ................................................................................................................................................................................ 149 DATABASE ................................................................................................................................................................... 149 DEPRECATED .............................................................................................................................................................. 149 DIV ............................................................................................................................................................................... 149 EXCERPT ...................................................................................................................................................................... 149 FEED ............................................................................................................................................................................. 150 FTP ............................................................................................................................................................................... 150 GALLERY ...................................................................................................................................................................... 150 GMT ............................................................................................................................................................................. 150 GRAVATAR................................................................................................................................................................... 150 HACK ............................................................................................................................................................................ 150 HACKING ..................................................................................................................................................................... 151 .HTACCESS .................................................................................................................................................................... 151 HTML........................................................................................................................................................................... 151 IP ADDRESS ................................................................................................................................................................. 151 JAVASCRIPT.................................................................................................................................................................. 152 HTTP://EDUCHALK.ORG: 12
HTTP://EDUCHALK.ORG
LINUX ........................................................................................................................................................................... 152 META ............................................................................................................................................................................ 152 MOD_REWRITE............................................................................................................................................................ 152 MYSQL ......................................................................................................................................................................... 152 NEWS READER ............................................................................................................................................................ 152 OPEN SOURCE ............................................................................................................................................................ 153 PAGE ............................................................................................................................................................................. 153 PERMALINK ................................................................................................................................................................. 153 PERMISSIONS ............................................................................................................................................................... 153 PHP ............................................................................................................................................................................... 153 PHPMYADMIN ............................................................................................................................................................. 154 PING.............................................................................................................................................................................. 154 PINGBACK.................................................................................................................................................................... 154 PLUGIN ......................................................................................................................................................................... 154 PORT ............................................................................................................................................................................. 154 POST SLUG ................................................................................................................................................................... 154 POST STATUS ............................................................................................................................................................... 155 QUICKTAG .................................................................................................................................................................. 155 RELATIVE PATH ......................................................................................................................................................... 155 RELATIVE URI ............................................................................................................................................................ 155 RSS ................................................................................................................................................................................ 155 ROBOTS.TXT ................................................................................................................................................................ 156 SIDEBAR ....................................................................................................................................................................... 156 SLUG ............................................................................................................................................................................. 156 SMILEYS ........................................................................................................................................................................ 156 SPAM ............................................................................................................................................................................. 156 HTTP://EDUCHALK.ORG: 13
HTTP://EDUCHALK.ORG
SSH ............................................................................................................................................................................... 157 SSL ................................................................................................................................................................................ 157 TAG ............................................................................................................................................................................... 157 TAGLINE ...................................................................................................................................................................... 157 TEXT EDITOR .............................................................................................................................................................. 157 THEME.......................................................................................................................................................................... 158 TRACKBACK ................................................................................................................................................................ 158 UNICODE ..................................................................................................................................................................... 158 WEB SERVER................................................................................................................................................................ 159 XFN .............................................................................................................................................................................. 159 XML .............................................................................................................................................................................. 159 XML-RPC .................................................................................................................................................................... 159 HTTP://EDUCHALK.ORG: 14
HTTP://EDUCHALK.ORG
About this Book This user’s guide is a derivative work based heavily on documentation made available under GPL from http://codex.wordpress.org. The content, format, and organization have been edited some from its original form. This guide is being made available under the same GPL licenses as the original work. This book comes without warranty or guarantee…use at your own risk. A free digital version of this text is available for download at: http://educhalk.org Neither this product, nor its author, is affiliated with, or endorsed by, WordPress. WordPress is a trademark owned by Automattic, Inc. About WordPress WordPress is a powerful personal publishing platform, and it comes with a great set of features designed to make your experience as a publisher on the Internet as easy, pleasant and appealing as possible. We are proud to offer you a freely distributed, standards‐compliant, fast, light and free personal publishing platform, with sensible default settings and features, and an extremely customizable core. WordPress is designed to be installed on your own web server or shared hosting account, which gives you complete control over the weblog. Unlike third‐party hosted services, you can be sure of being able to access and modify everything related to your weblog, in case you need to. This also means that you can install WordPress on your desktop or home computer, or even on an Intranet. Open Source WordPress is open source software, licensed under the GPL. HTTP://EDUCHALK.ORG: 15
HTTP://EDUCHALK.ORG
Chapter 1: Introduction to Blogging What is a "blog"? "Blog" is an abbreviated version of "weblog," which is a term used to describe web sites that maintain an ongoing chronicle of information. A blog is a frequently updated, personal website featuring diary‐
type commentary and links to articles on other Web sites. Blogs range from the personal to the political, and can focus on one narrow subject or a whole range of subjects. Many blogs focus on a particular topic, such as web design, home staging, sports, or mobile technology. Some are more eclectic, presenting links to all types of other sites. And others are more like personal journals, presenting the author's daily life and thoughts. Generally speaking (although there are exceptions), blogs tend to have a few things in common: A main content area with articles listed chronologically, newest on top. Often, the articles are organized into categories. •
An archive of older articles. •
A way for people to leave comments about the articles. •
A list of links to other related sites, sometimes called a "blogroll". •
One or more "feeds" like RSS, Atom or RDF files. Some blogs may have additional features beyond these. Watch this short video for a simple explanation for what a blog is. The Blog Content Content is the raison d'être for any web site. Retail sites feature a catalog of products. University sites contain information about their campuses, curriculum, and faculty. News sites show the latest news stories. For a personal blog, you might have a bunch of observations, or reviews. Without some sort of updated content, there is little reason to visit a web site more than once. On a blog, the content consists of articles (also sometimes called "posts" or "entries") that the author(s) writes. Yes, some blogs have multiple authors, each writing his/her own articles. Typically, blog authors compose their articles in a web‐based interface, built into the blogging system itself. Some blogging systems also support the ability to use stand‐alone "weblog client" software, which allows authors to write articles offline and upload them at a later time. Comments Want an interactive website? Wouldn't it be nice if the readers of a website could leave comments, tips or impressions about the site or a specific article? With blogs, they can! Posting comments is one of the most exciting features of blogs. HTTP://EDUCHALK.ORG: 16
HTTP://EDUCHALK.ORG
Most blogs have a method to allow visitors to leave comments. There are also nifty ways for authors of other blogs to leave comments without even visiting the blog! Called "pingbacks" or "trackbacks", they can inform other bloggers whenever they cite an article from another site in their own articles. All this ensures that online conversations can be maintained painlessly among various site users and websites. The Difference Between a Blog and CMS? Software that provides a method of managing your website is commonly called a CMS or "Content Management System". Many blogging software programs are considered a specific type of CMS. They provide the features required to create and maintain a blog, and can make publishing on the internet as simple as writing an article, giving it a title, and organizing it under (one or more) categories. While some CMS programs offer vast and sophisticated features, a basic blogging tool provides an interface where you can work in an easy and, to some degree, intuitive manner while it handles the logistics involved in making your composition presentable and publicly available. In other words, you get to focus on what you want to write, and the blogging tool takes care of the rest of the site management. WordPress is one such advanced blogging tool and it provides a rich set of features. Through its Administration Panels, you can set options for the behavior and presentation of your weblog. Via these Administration Panels, you can easily compose a blog post, push a button, and be published on the internet, instantly! WordPress goes to great pains to see that your blog posts look good, the text looks beautiful, and the html code it generates conforms to web standards. If you're just starting out, read Getting Started with WordPress, which contains information on how to get WordPress set up quickly and effectively, as well as information on performing basic tasks within WordPress, like creating new posts or editing existing ones. Things Bloggers Need to Know In addition to understanding how your specific blogging software works, such as WordPress, there are some terms and concepts you need to know. Archives A blog is also a good way to keep track of articles on a site. A lot of blogs feature an archive based on dates (like a monthly or yearly archive). The front page of a blog may feature a calendar of dates linked to daily archives. Archives can also be based on categories featuring all the articles related to a specific category. It does not stop there; you can also archive your posts by author or alphabetically. The possibilities are endless. This ability to organize and present articles in a composed fashion is much of what makes blogging a popular personal publishing tool. Feeds A Feed is a function of special software that allows "Feedreaders" to access a site automatically looking for new content and then post updates about that new content to another site. This provides a way for users to keep up with the latest and hottest information posted on different blogging sites. Some HTTP://EDUCHALK.ORG: 17
HTTP://EDUCHALK.ORG
Feeds include RSS (alternately defined as "Rich Site Summary" or "Really Simple Syndication"), Atom or RDF files. Dave Shea, author of the web design weblog Mezzoblue has written a comprehensive summary of feeds. Blogrolls A blogroll is a list, sometimes categorized, of links to webpages the author of a blog finds worthwhile or interesting. The links in a blogroll are usually to other blogs with similar interests. The blogroll is often in a "sidebar" on the page or featured as a dedicated separate web page. BlogRolling and blo.gs are two websites that provide some interesting functions or help related to blogrolls. These sites provide methods for users to maintain these rolls effortlessly and integrate them into weblogs. WordPress has a built‐in Link Manager so users do not have to depend on a third party for creating and managing their blogroll. Syndication A feed is a machine readable (usually XML) content publication that is updated regularly. Many weblogs publish a feed (usually RSS, but also possibly Atom and RDF and so on, as described above). There are tools out there that call themselves "feedreaders". What they do is they keep checking specified blogs to see if they have been updated, and when the blogs are updated, they display the new post, and a link to it, with an excerpt (or the whole contents) of the post. Each feed contains items that are published over time. When checking a feed, the feedreader is actually looking for new items. New items are automatically discovered and downloaded for you to read. Just so you don't have to visit all the blogs you are interested in. All you have to do with these feedreaders is to add the link to the RSS feed of all the blogs you are interested in. The feedreader will then inform you when any of the blogs have new posts in them. Most blogs have these "Syndication" feeds available for the readers to use. Managing Comments One of the most exciting features of blogging tools are the comments. This highly interactive feature allows users to comment upon article posts and link to your posts and comment on and recommend them. These are known as trackbacks and pingbacks. We'll also discuss how to moderate and manage comments and how to deal with the annoying trend in "comment spam", when unwanted comments are posted to your blog. •
Trackbacks •
Pingbacks •
Verifying Pingbacks and Trackbacks •
Comment Moderation •
Comment Spam HTTP://EDUCHALK.ORG: 18
HTTP://EDUCHALK.ORG
Trackbacks Trackbacks were originally developed by SixApart, creators of the MovableType blog package. SixApart has a good introduction to trackbacks: In a nutshell, TrackBack was designed to provide a method of notification between websites: it is a method of person A saying to person B, "This is something you may be interested in." To do that, person A sends a TrackBack ping to person B. A better explanation is this: •
Person A writes something on their blog. •
Person B wants to comment on Person A's blog, but wants her own readers to see what she had to say, and be able to comment on her own blog •
Person B posts on her own blog and sends a trackback to Person A's blog •
Person A's blog receives the trackback, and displays it as a comment to the original post. This comment contains a link to Person B's post The idea here is that more people are introduced to the conversation (both Person A's and Person B's readers can follow links to the other's post), and that there is a level of authenticity to the trackback comments because they originated from another weblog. Unfortunately, there is no actual verification performed on the incoming trackback, and indeed they can even be faked. Most trackbacks send to Person A only a small portion (called an "excerpt") of what Person B had to say. This is meant to act as a "teaser", letting Person A (and his readers) see some of what Person B had to say, and encouraging them all to click over to Person B's site to read the rest (and possibly comment). Person B's trackback to Person A's blog generally gets posted along with all the comments. This means that Person A can edit the contents of the trackback on his own server, which means that the whole idea of "authenticity" isn't really solved. (Note: Person A can only edit the contents of the trackback on his own site. He cannot edit the post on Person B's site that sent the trackback.) Pingbacks Pingbacks were designed to solve some of the problems that people saw with trackbacks. The official pingback documentation makes pingbacks sound an awful lot like trackbacks: For example, Yvonne writes an interesting article on her Web log. Kathleen reads Yvonne's article and comments about it, linking back to Yvonne's original post. Using pingback, Kathleen's software can automatically notify Yvonne that her post has been linked to, and Yvonne's software can then include this information on her site. There are three significant differences between pingbacks and trackbacks, though. HTTP://EDUCHALK.ORG: 19
HTTP://EDUCHALK.ORG
•
Pingbacks and trackbacks use drastically different communication technologies (XML‐RPC and HTTP POST, respectively). •
Pingbacks support auto‐discovery where the software automatically finds out the links in a post, and automatically tries to pingback those URLs, while trackbacks must be done manually by entering the trackback URL that the trackback should be sent to. •
Pingbacks do not send any content. The best way to think about pingbacks is as remote comments: •
Person A posts something on his blog. •
Person B posts on her own blog, linking to Person A's post. This automatically sends a pingback to Person A when both have pingback enabled blogs. •
Person A's blog receives the pingback, then automatically goes to Person B's post to confirm that the pingback did, in fact, originate there. The pingback is generally displayed on Person A's blog as simply a link to Person B's post. In this way, all editorial control over posts rests exclusively with the individual authors (unlike the trackback excerpt, which can be edited by the trackback recipient). The automatic verification process introduces a level of authenticity, making it harder to fake a pingback. Some feel that trackbacks are superior because readers of Person A's blog can at least see some of what Person B has to say, and then decide if they want to read more (and therefore click over to Person B's blog). Others feel that pingbacks are superior because they create a verifiable connection between posts. Verifying Pingbacks and Trackbacks Comments on blogs are often criticized as lacking authority, since anyone can post anything using any name they like: there's no verification process to ensure that the person is who they claim to be. Trackbacks and Pingbacks both aim to provide some verification to blog commenting. Comment Moderation Comment Moderation is a feature which allows the website owner and author to monitor and control the comments on the different article posts, and can help in tackling comment spam. It lets you moderate comments, & you can delete unwanted comments, approve cool comments and make other decisions about the comments. Comment Spam Comment Spam refers to useless comments (or trackbacks, or pingbacks) to posts on a blog. These are often irrelevant to the context value of the post. They can contain one or more links to other websites or domains. Spammers use Comment Spam as a medium to get higher page rank for their domains in HTTP://EDUCHALK.ORG: 20
HTTP://EDUCHALK.ORG
Google, so that they can sell those domains at a higher price sometime in future or to obtain a high ranking in search results for an existing website. Spammers are relentless; because there can be substantial money involved, they work hard at their "job." They even build automated tools (robots) to rapidly submit their spam to the same or multiple weblogs. Many webloggers, especially beginners, sometimes feel overwhelmed by Comment Spam. There are solutions, though, to avoiding Comment Spam. WordPress includes many tools for combating Comment Spam. With a little up front effort, Comment Spam can be manageable, and certainly no reason to give up weblogging. Pretty Permalinks Permalinks are the permanent URLs to your individual weblog posts, as well as categories and other lists of weblog postings. A permalink is what another weblogger will use to refer to your article (or section), or how you might send a link to your story in an e‐mail message. Because others may link to your individual postings, the URL to that article shouldn't change. Permalinks are intended to be permanent (valid for a long time). "Pretty" Permalinks is the idea that URLs are frequently visible to the people who click them, and should therefore be crafted in such a way that they make sense, and not be filled with incomprehensible parameters. The best Permalinks are "hackable," meaning a user might modify the link text in their browser to navigate to another section or listing of the weblog. For example, this is how the default Permalink to a story might look in a default WordPress installation: /index.php?p=423 How is a user to know what "p" represents? Where did the number 423 come from? In contrast, here is a well‐structured, "Pretty" Permalink which could link to the same article, once the installation is configured to modify permalinks: /archives/2003/05/23/my‐cheese‐sandwich/ One can easily guess that the Permalink includes the date of the posting, and the title, just by looking at the URL. One might also guess that hacking the URL to be /archives/2003/05/ would get a list of all the postings from May of 2003. Pretty (cool). For more information on possible Permalink patterns in WordPress, see Using Permalinks. Blog by email Some blogging tools offer the ability to email your posts directly to your blog, all without direct interaction through the blogging tool interface. WordPress offers this cool feature. Using email, you can now send in your post content to a pre‐determined email address & voila! Your post is published! HTTP://EDUCHALK.ORG: 21
HTTP://EDUCHALK.ORG
Post Slugs If you're using Pretty Permalinks, the Post Slug is the title of your article post within the link. The blogging tool software may simplify or truncate your title into a more appropriate form for using as a link. A title such as "I'll Make A Wish" might be truncated to "ill‐make‐a‐wish". In WordPress, you can change the Post Slug to something else, like "make‐a‐wish", which sounds better than a wish made when sick. Excerpt Excerpts are condensed summaries of your blog posts, with blogging tools being able to handle these in various ways. In WordPress, Excerpts can be specifically written to summarize the post, or generated automatically by using the first few paragraphs of a post or using the post up to a specific point, assigned by you. Plugins Plugins are cool bits of programming scripts that add additional functionality to your blog. These are often features which either enhance already available features or add them to your site. WordPress offers simple and easy ways of adding Plugins to your blog. From the Administration Panel, there is a Plugin Page. Once you have uploaded a Plugin to your WordPress plugin directory, activate it from the Plugins Management SubPanel, and sit back and watch your Plugin work. Not all Plugins are so easily installed, but WordPress Plugin authors and developers make the process as easy as possible. Basics‐A Few Blogging Tips Starting a new blog is difficult and this can put many people off, there are then other people who have blogs with no comments or visits. You want to stand out from this crowd of millions of bloggers, you want to be one of the few hundred thousand blogs that are actually visited. So here are some simple tips to help you on your way to blogging mastery: •
Post regularly, but don't post if you have nothing worth posting about. •
Stick with only a few specific genres to talk about. •
Don't put 'subscribe' and 'vote me' links all over the front page until you have people that like your blog enough to ignore them (they're usually just in the way). •
Use a clean and simple theme if at all possible. •
Enjoy, blog for fun, comment on other peoples' blogs (as they normally visit back). HTTP://EDUCHALK.ORG: 22
HTTP://EDUCHALK.ORG
Chapter 2: WordPress Semantics Introduction to WordPress Terminology WordPress was created by the developers as weblogging or blogging software. A blog, as defined in the Codex Glossary, is an online journal, diary, or serial, published by a person or group of people. Many blogs are personal in nature, reflecting the opinions and interests of the owner. But, blogs are now important tools in the world of business, politics, and entertainment. Blogs are a form of a Content Management System (CMS) which Wikipedia calls "a system used to organize and facilitate collaborative content creation." Both blogs and Content Management Systems can perform the role of a website (site for short). A website can be thought of as a collection of articles and information about a specific subject, service, or product, which may not be a personal reflection of the owner. Terminology Related to Content The term Word in WordPress refers to the words used to compose posts. Posts are the principal element (or content) of a blog. The posts are the writings, compositions, discussions, discourses, musings, and, yes, the ratings of the blog's owner and guest authors. Posts, in most cases, are the reason a blog exists; without posts, there is no blog! To facilitate the post writing process, WordPress provides a full featured authoring tool with modules that can be moved, via drag‐and‐drop, to fit the needs of all authors. The Dashboard QuickPress module makes it easy to quickly write and publish a post. There's no excuse for not writing. Integral to a blog are the pictures, images, sounds, and movies, otherwise known as media. Media enhances, and gives life to a blog's content. WordPress provides an easy to use method of inserting Media directly into posts, and a method to upload Media that can be later attached to posts, and a Media Manager to manage those various Media. An important part of the posting process is the act of assigning those posts to categories. Each post in WordPress is filed under one or more categories. Categories can be hierarchical in nature, where one category acts as a parent to several child, or grandchild, categories. Thoughtful categorization allows posts of similar content to be grouped, thereby aiding viewers in the navigation, and use of a site. In addition to categories, terms or keywords called tags can be assigned to each post. Tags act as another navigation tool, but are not hierarchical in nature. In turn, post categories and tags are two of the elements of what's called post meta data. Post meta data refers to the information associated with each post and includes the author's name and the date posted as well as the post categories. Post meta data also refers to Custom Fields where you assign specific words, or keys, that can describe posts. But, you can't mention post meta data without discussing the term meta. Generally, meta means "information about"; in WordPress, meta usually refers to administrative‐type information. So, besides post meta data, Meta is the HTML tag used to describe and define a web page HTTP://EDUCHALK.ORG: 23
HTTP://EDUCHALK.ORG
to the outside world, like meta tag keywords for search engines. Also, many WordPress‐based sites offer a Meta section, usually found in the sidebar, with links to login or register at that site. And, don't forget Meta Rules: The rules defining the general protocol to follow in using this Codex, or Meta, as in the MediaWiki namespace that refers to administrative functions within Codex. That's a lot of Meta! After a post is made public, a blog's readers will respond, via comments, to that post, and in turn, authors will reply. Comments enable the communication process, that give‐and‐take, between author and reader. Comments are the life‐blood of most blogs. Finally, WordPress also offers a content management tool called a Page. Pages often present static information, such as "About Me", or "Contact Us", Pages. Typically "timeless" in nature, Pages should not be confused with the time‐oriented objects called posts. Interestingly, a Page is allowed to be commented upon, but a Page cannot be categorized. Terminology Related to Design The flexibility of WordPress is apparent when discussing terminology related to the design of a WordPress blog. At the core of WordPress, developers created a programming structure named The Loop to handle the processing of posts. The Loop is the critical PHP program code used to display posts. Anyone wanting to enhance and customize WordPress will need to understand the mechanics of The Loop. Along with The Loop, WordPress developers have created Template Tags which are a group of PHP functions that can be invoked by designers to perform an action or display specific information. It is the Template Tags that form the basis of the Template Files. Templates (files) contain the programming pieces, such as Template Tags, that control the structure and flow of a WordPress site. These files draw information from your WordPress MySQL database and generate the HTML code which is sent to the web browser. A Template Hierarchy, in essence the order of processing, dictates how Templates control almost all aspects of the output, including Headers, Sidebars, and Archives. Archives are a dynamically generated list of posts, and are typically grouped by date, category, tag, or author. Templates and Template Tags are two of the pieces used in the composition of a WordPress Theme. A Theme is the overall design of a site and encompasses color, graphics, and text. A Theme is sometimes called the skin. With the recent advances in WordPress, Theme Development has become a hot topic. WordPress‐site owners have available a long list of Themes to choose from in deciding what to present to their sites' viewers. In fact, with the use of a Theme Switcher Revisited Plugin, WordPress designers can allow their visitors to select their own Theme. Plugins are custom functions created to extend the core functionality of WordPress. The WordPress developers have maximized flexibility and minimized code bloat by allowing outside developers the opportunity to create their own useful add‐on features. As evidenced by the Plugin Directory, there's a Plugin to enhance virtually every aspect of WordPress. A Plugin management tool makes it extremely easy to find and install Plugins. HTTP://EDUCHALK.ORG: 24
HTTP://EDUCHALK.ORG
Terminology for the Administrator Another set of terms to examine are those involving the Administration of a WordPress site. A comprehensive set of Administration Panels enables users to easily administer and monitor their blog. A WordPress administrator has a number of powers which include requiring a visitor to register in order to participate in the blog, who can create new posts, whether comments can be left, and if files can be uploaded to the blog. An Administrator also defines Links and the associated Link Categories which are an important part of a blog's connection to the outside world. Some of the main administrative responsibilities of a WordPress blog involve adding, deleting, and managing Registered Users. Administering users means controlling Roles and Capabilities, or permissions. Roles control what functions a registered user can perform as those functions can range from just being able to login at a blog to performing the role administrator. Another chief concern for the blog administrator is Comment Moderation. Comments, also called discussions, are responses to posts left for the post author by the visitor and represent an important part of "the give and take" of a blog. But Comments must be patrolled for Spam and other malicious intentions. The WordPress Administration Comments SubPanel simplifies that process with easy‐to‐
use screens which add, change, and delete Comments. And not to be forgotten is the obligation for an administrator to keep their WordPress current to insure that the latest features, bugs, and security fixes are in effect. To accommodate administrators, WordPress has a simple Upgrade Tool to download and install the latest version of WordPress. There's no excuse to not upgrade! The Terminology of Help The final set of jargon relates to helping you with WordPress. There are many help resources available to WordPress users; Getting More Help, Finding WordPress Help, Troubleshooting, and WordPress FAQ (frequently asked questions) are good starting points. Also Getting Started with WordPress will jump‐start readers into the world of WordPress and the excellent WordPress Lessons provide in‐depth tutorials on many of the aspects of using WordPress. Among the most important resources is the WordPress Support Forum where knowledgeable volunteers answer your questions and help solve any problems related to WordPress. And, of course, this Codex which is filled with hundreds of articles designed to make your WordPress experience a success! History of the WordPress Name Besides the technical terminology of WordPress, it's also interesting to know the history of the name, WordPress. The name "WordPress" was originally coined by Christine Selleck (see related post) in response to developer Matthew Mullenweg's desire to associate his new software project with printing presses. In this sense, press refers to the world of reporters, journalists, columnists, and photographers. An aptly chosen name, because WordPress serves as the printing press that enables its users to publish their words. It's a good name, don't you think so? HTTP://EDUCHALK.ORG: 25
HTTP://EDUCHALK.ORG
Chapter 3: Installing WordPress System Recommendations PHP (version 4.3 or newer) and MySQL(version 4.0 or newer) are required. Apache mod_rewrite module is optional, but necessary to create clean URIs known as Permalinks. We recommend Linux with either the Apache or nginx web‐servers as the most robust platforms for running WordPress, but any server that supports PHP and MySQL will do. If your host doesn’t support one of these platforms, and mod_rewrite, you will probably be better off switching to one of the many hosting providers that do offer those choices. It is also essential that your host allows making remote connections. You will need access to your site and its directory, and software to proceed with the installation. These are: •
An access to your web server (via shell or FTP) •
A text editor •
An FTP Client (if you need to install WordPress on a remote server) •
Your web browser of choice (Recommended: most recent versions of Firefox or Chrome) Prerequisite for Uploading Files: In order to use all the media upload tools to store media files in your WordPress installation, you will have to change the chmod of wp‐content folder to 777. If you have not changed permissions in order to write in wp‐content folder, you will not be able to use the uploader. Instructions for this can be found in the Codex. 5‐Minute Install The Famous 5‐minute Install consists of the following steps: 1. Download and unzip the WordPress package, if you haven’t already. 2. Create a database for WordPress on your web server, as well as a MySQL user who has all privileges for accessing and modifying it. 3. Rename the wp‐config‐sample.php file to wp‐config.php. 4. Open wp‐config.php in your favorite text editor and fill in your database details. 5. Place the WordPress files in the desired location on your web server: •
If you want to integrate WordPress into the root of your domain (e.g. http://example.com/), move or upload all contents of the unzipped WordPress directory (but excluding the directory itself) into the root directory of your web server. HTTP://EDUCHALK.ORG: 26
HTTP://EDUCHALK.ORG
•
If you want to have your WordPress installation in its own subdirectory on your web site (e.g. http://example.com/blog/), rename the directory WordPress to the name you’d like the subdirectory to have and move or upload it to your web server. For example if you want the WordPress installation in a subdirectory called blog, you should rename the directory called WordPress to blog and upload it to the root directory of your web server. 6. Run the WordPress installation script by accessing wp‐admin/install.php in your favorite web browser. •
If you installed WordPress in the root directory, you should visit: http://example.com/wp‐admin/install.php •
If you installed WordPress in its own subdirectory called blog, for example, you should visit: http://example.com/blog/wp‐admin/install.php That’s it! WordPress should now be installed. For Step‐by‐Step video install directions see: http://educhalk.org/blog/?p=1 To Upgrade from a previous version of WordPress, see: http://educhalk.org/blog/?tag=upgrade HTTP://EDUCHALK.ORG: 27
HTTP://EDUCHALK.ORG
Chapter 4: Getting Started Overview of the Administration Panel Once you’ve installed WordPress, you’ll log in to your Administration Panel. This is the application you will use to create content, manage your blog’s design, moderate comments, and generally oversee your blog. The Administration Panel has been completely redesigned in WordPress 2.8 to provide a faster, easier experience when managing your blog. If you have used similar software before, you should have no trouble getting around, but even new users will have an easy time getting up to speed. Individual screens will be covered in more depth in the handbook sections related to their use, but before you get started, an overview of how the Administration Panel is structured may be useful, especially if you’re used to using an older version of WordPress. General Structure The Administration Panel is divided into several main areas. The header is the dark bar across the top of your screen that contains the name of the blog you’re administering. On the left is the main menu. The bulk of the screen provides the working area, in which individual screen content will appear. At the bottom of the screen is another dark bar called the footer. This structure is consistent throughout the application. Navigation Menu Groups WordPress 2.8 has a multi‐modal navigation system to allow fast access to every screen in the application. The main menu column on the left is the primary method of navigation, and is divided into three groups of navigation sections. HTTP://EDUCHALK.ORG: 28
HTTP://EDUCHALK.ORG
The Overview group by default contains only the Dashboard section, though plugins may add additional sections to this group (and WordPress MU uses this group for its Site Admin section). The Overview group is divided from the group below by a thin gray line with an arrowhead on its left side. The Content Objects group consists of Posts, Media, Links, Pages and Comments by default, though again, plugins may add additional objects to this group. This group contains the sections where site content is created and managed, and is divided from the group below by another thing gray line. The third group is the Utilities group, which contains sections related to overall site administration rather than content creation. Sections included here by default are Appearance, Plugins, Users, Tools, and Settings. Main Menu Functions The main menu is designed to work in three different ways, so that every user can choose the style of menu interaction they prefer. From the simplest to more advanced, the three options are: Basic Click on the text links or their corresponding icons in the main menu (Dashboard, Posts, Media, Links, Pages, etc.) to go to the first screen in that section. This is usually an overview screen that allows management of that section. When you have arrived at this screen, the main menu will have expanded to show the screens that comprise that section, and will have highlighted your current screen. The icon will also be repeated in the screen heading that is displayed in the working area. You can click on the text links in the menu to go to other screens in that section or to choose a different section altogether. HTTP://EDUCHALK.ORG: 29
HTTP://EDUCHALK.ORG
Expand/Collapse You don’t need to go to a section’s default screen in order to access other screens in a section. When your mouse hovers over a navigation item in the main menu, a small arrow appears to the right of the text link. Clicking this arrow will cause that section’s menu to appear below the section header. Clicking the arrow again will hide the section menu. Section menus will still expand automatically when you visit a specific section, and close when you leave it, but if you have opened a section by clicking the arrow, it will stay open until you click to close it, even if you leave that section. This allows you to keep open the sections that you use the most. A browser cookie will remember your menu state between sessions. Bear in mind that the more sections you have open, the longer the menu will be, which may require scrolling to get to some menu sections. Because of this, you may find it most convenient to keep most sections closed by default. Minimized If your screen is not very wide or is running at a low resolution, you may wish to increase your horizontal working area. To support this, the minimized menu mode allows you to collapse the left menu column into a thin row of icons. The thin gray lines that divide the navigation groups act as a toggle for this menu state. Click on either of the small gray arrows, and the menu will minimize to the icon row. In this state, hovering over an icon will cause the section menu to popup to the right of the cursor, allowing you continued access to virtually every screen in the application. To return the menu to its normal state, just click on one of the small gray arrows (now pointing to the right). You don’t need to adjust a setting to turn these options on or off. You can use the menu in any one or all of these ways as it suits you. Shortcuts Menu In the header of the application there is an additional menu of shortcuts, located toward the right side of the screen. This menu has a dual function. The default menu state of New Post acts as a button providing single‐click access to the post creation screen. If you hover over the arrow on the right side of the button, a shortcuts menu will appear with links to frequently accessed screens. The default screens available from this menu are New Post, Drafts, Comments, Upload (Media Files), and New Page. Plugins may also add items to this menu. Clicking on any of these links will load the appropriate screen. Other Navigation Additional navigation links in the header area include: WordPress W mark HTTP://EDUCHALK.ORG: 30
HTTP://EDUCHALK.ORG
Provides links to wordpress.org, the Codex, and the Support Forums Blog Title Links to your blog’s home page Username Right after “Howdy,” your name links to your profile in the administration panel (the default username is admin) Log Out Logs you out of your administration panel and takes you to a login screen Screen Options Hanging tab below the header slides opens to reveal customization options that vary by screen Help Hanging tab below the header slides open to reveal contextual help for each screen as well as links to the Codex (links to appropriate section of the Codex based on current screen) and the Support Forums Customization Many screens in the WordPress 2.8 administration panel can be customized to suit your use of the application. On screens made up of modules, the modules can often be expanded or collapsed by clicking on the title bar of the module, and modules can often be rearranged using drag and drop. In the upper right is a tab labeled Screen Options, which appears on screens that allow customization. These include screens made up of modules as well as screens that provide tables of information. Clicking the Screen Options tab reveals a layer that lists modules or table columns that can be hidden from view. Uncheck the box next to the element you wish to remove from your screen, and it will disappear instantly. Check the box and the element will reappear on the screen. Screens that are customized with these methods will retain their states between sessions. HTTP://EDUCHALK.ORG: 31
HTTP://EDUCHALK.ORG
Dashboard The Dashboard is the first screen you will see when you log in to http://example.com/wp‐admin/. This screen provides you an overview of the state of your site as well as certain functionality. This screen is completely customizable. The modules on the Dashboard include: Right Now This module gives you a listing of how much content exists in your blog as well as status messages for your version of WordPress, your theme and the number of widgets you are using. Some plugins may also insert information here, such as Akismet. QuickPress This module allows you to create a draft or publish a post right from the Dashboard. You can enter a title, text, media and tags. If you save as draft, the title will appear in the Recent Drafts module Recent Drafts This module provides single‐click access to your most recent drafts, as well as to a listing of all your drafts. Recent Comments This module shows the last 5 comments on your site, and allows you to moderate them right from the Dashboard. You can approve/unapprove, edit, delete or reply, just as when you’re in the full Comments section. Your Stuff This module provides an overview of recent content and activity on your site. Incoming Links This module displays new incoming links to your site, powered by Google. WordPress Development Blog and Other WordPress News These modules are for feeds, and are pre‐populated with feeds for the wordpress.org/development blog and for the Planet WordPress aggregator blog. You can configure how these feeds display by clicking the link that appears when you hover over the module title bar. You can also replace these feeds with other RSS feeds by replacing the feed URLs in the configuration view. HTTP://EDUCHALK.ORG: 32
HTTP://EDUCHALK.ORG
Plugins This module displays three plugins pulled from the official plugin repository with links to install each one. Defining Your Settings There are a number of settings that define how your blog will be displayed and/or how the administration panel will display information to you. Before you begin creating content, you will want to change some of these settings. Each of the Settings screens is described below, but you only need to adjust those settings that you care about. For each screen, make sure you click the Save Changes button before exiting the screen, or your changes will not be saved. Once you click the button, a confirmation text box will appear at the top of the page telling you your settings have been saved. Remember, the button must be clicked on every Settings screen. General Settings This is the default screen in the Settings section and controls some of the most basic configuration settings for your site: your site’s title and location, who may register an account at your blog, and how dates and times are calculated and displayed. You should definitely edit these settings. Go to Settings → General. Blog title Enter the name of your blog here. Most themes will display this title, at the top of every page, and in the reader’s browser title bar. WordPress also uses this title as the identifying name for your Syndication feeds. Tagline In a few words, explain what your blog is about. Your blog’s slogan, or tagline, might be entered here. A tagline is short phrase, or sentence, used to convey the essence of the blog and is often funny or eye‐catching. HTTP://EDUCHALK.ORG: 33
HTTP://EDUCHALK.ORG
WordPress address (URL) Enter the full URL of the directory containing your WordPress core application files (e.g., wp‐
config.php, wp‐admin/, wp‐content/, and wp‐includes/). For example, if you installed WordPress into a directory called blog, then the WordPress address would be http://example.com/blog (where example.com is your domain). If you installed WordPress into your web root, this address will be the root URL http://example.com. WordPress will trim a slash (/) from the end. E‐mail address Enter the e‐mail address to which you want WordPress to send messages regarding the administration and maintenance of your WordPress blog. For example, if you allow new users to register as a member of your blog (see Membership below), then a notification will be sent through e‐mail to this address. Please note this is different than the address you supplied for the admin user account; the admin account e‐mail address is sent an e‐mail only when someone submits a comment to a post by admin. The address you enter here will never be displayed on the blog. Membership Anyone can register — check this checkbox if you want anyone to be able to register an account on your blog. New User Default Role HTTP://EDUCHALK.ORG: 34
HTTP://EDUCHALK.ORG
This pull‐down box allows you to select the default Role that is assigned to new users. This Default Role will be assigned to newly registered members or users added via the Users → Authors & Users panel. Valid choices are Administrator, Editor, Author, Contributor, or Subscriber. Time zone Select your UTC (Controlled Universal Time) time zone from the drop‐down box. Unfortunately, you have to manually update this for Daylight Savings Time. Lame, we know, but it will be fixed in the future. Time zone represents the number of hours by which your time differs from the displayed UTC time. This will ensure that your articles and blog maintain and display the correct time. This is useful when you and your server are in different time zones. For example, if you were living in Tahiti (Lucky you :) ), then you would select “UTC ‐10” in the pulldown box. Use UTC ‐5:30 if your time zone differs by 5 hours and 30 minutes. You can use Time and Date to look up your offset from UTC. Date Format The format in which to display dates on your blog. The Date Format setting is intended to be used by theme designers in displaying dates on your blog, but does not control how the date is displayed in the Administrative panels (e.g. Edit Posts). Some common choices are available as radio buttons, or a custom date format can be constructed using template tags. Time Format The format in which to display times on your blog. The Time Format setting is intended to be used by theme designers in displaying time on your blog, but does not control how the time is displayed in the Administrative panels (e.g. Add New Post edit of timestamp). Some common choices are available as radio buttons, or a custom time format can be constructed using template tags. Week Starts On Select your preferred start date for WordPress calendars from the drop‐down box. Monday is the default setting for this drop‐down, meaning a monthly calendar will show Monday in the first column. If you want your calendar to show Sunday as the first column, then select Sunday from the drop‐down. Writing Settings The Writing Settings control the interface you use when writing new posts. These settings control WordPress’s features in the Add Posts/Edit Posts SubPanels, as well as the optional functions like Remote Publishing, Post via e‐mail, and Update Services. Go to Settings → Writing to edit these settings. HTTP://EDUCHALK.ORG: 35
HTTP://EDUCHALK.ORG
Administration Defaults Size of the post box Choose how large, in number of lines, you want for the post content textbox. Selecting a size does NOT limit the size of the actual post; if you write a post that is longer than the size of the textbox, the textbox will generate a scrollbar. A small textbox means everything will fit nicely on your screen, a large textbox means you won’t have to scroll as much when writing longer posts. Formatting You can use these checkboxes to control some of your blog’s formatting: •
Convert emoticons such as :‐) and :‐P to graphics on display — checking this tells WordPress to convert all of the emoticons in your posts into graphical smilies. •
WordPress should correct invalidly nested XHTML automatically — checking this helps make sure that what you write in your posts is valid XHTML code. You should probably check this box since invalid code sometimes causes problems with web browsers. HTTP://EDUCHALK.ORG: 36
HTTP://EDUCHALK.ORG
Note Some Plugins may not work correctly when this feature is turned on. Default Post Category The Category you select from this drop‐down is called the default post Category. The default post Category is Category assigned to a post if you fail to assign any other Categories with writing your posts. If you have several Categories, but use one of those Categories more frequently, select that Category here to make your life a little easier. Default Link Category The Category you select from this dropdown will be the default Link Category checked when you create new Links. If you have several Categories, but assign one Category more frequently to Links, select that Category. Remote Publishing To post to WordPress from a desktop blogging client or remote website that uses the Atom Publishing Protocol or one of the XML‐RPC publishing interfaces you must enable them. Atom Publishing Protocol Checking this enables the Atom Publishing Protocol. XML‐RPC When checked, enables the WordPress, Movable Type, MetaWeblog and Blogger XML‐RPC publishing protocols. Post via e‐mail With this option, you can set up your blog to publish e‐mails as blog posts. To do this, you would send an e‐mail to a specific address you’ve established for the purpose. More than likely, you will need the help of your web host and/or your e‐mail provider. This feature is 100% optional; you can still publish posts from the Write Post SubPanel if you don’t want to post via e‐mail. The Blog by e‐mail article in the Codex describes this feature in greater detail. This message is displayed at the beginning of this section: “To post to WordPress by e‐mail you must set up a secret e‐mail account with POP3 access. Any e‐mail received at this address will be posted, so it’s a good idea to keep this address very secret.” Complete the following fields to post by e‐mail: Mail Server A mail server receives e‐mails on your behalf and stores them for retrieval. Your mail server will have a URI address, such as mail.example.com, which you should enter here. HTTP://EDUCHALK.ORG: 37
HTTP://EDUCHALK.ORG
Port Servers usually use port 110 to receive requests related to e‐mails. If your mail server uses a different port, enter that port number here. Login Name If, for example, the e‐mail address that you will be using for the writing by e‐mail feature is <[email protected]>, then WordPress is the Login name. Password Enter the password for the above e‐mail address here. Three possible passwords are displayed by WordPress in the introduction section of this panel. Default Mail Category WordPress will assign this Category to all of the posts published via the Post by e‐mail feature. Note: You can create new Categories in Posts → Categories. Press This Press This is a bookmarklet that allows easy blogging of Web content. It provides the ability to excerpt text from an online article, embed photos and other media files, and publish to you blog with links back to the source material. To use Press This, drag the link to your browser’s bookmarks toolbar. Then, when you want to blog about a particular site you’re on, click the link in your toolbar and the Press This popup window will appear. Update Services When you publish a new post, WordPress automatically notifies the update services of the sites listed in the box. For more about this, see Update Services on the Codex. When entering services, separate multiple URIs with line breaks. If your Blog Visibility (in Settings → Privacy) is set to “I would like to block search engines, but allow normal visitors”, the message “WordPress is not notifying any Update Services because of your blog’s privacy settings” is displayed. Reading Settings These options are few in number, but still important. You can decide if you want your chronological posts or a “static” Page displayed as your blog’s front (main) page. You can also adjust how many posts are displayed on that main page. In addition, you can adjust syndication feed features to determine how the information from your site is sent to a reader’s web browser or other applications. Go to Settings → Reading to edit these settings. HTTP://EDUCHALK.ORG: 38
HTTP://EDUCHALK.ORG
Front page displays Use this setting to determine if your posts or a “static” Page displays as your blog’s front (main) page. This setting displays only if you have one or more Pages defined. Please note static front page plugins and other “posts display” control/restriction plugins may affect how these features work! Your latest posts Check to radio button so your latest posts are displayed on the blog’s front page. Remember, the number of posts you display is controlled by the “Blog pages show at most” setting. A static page (select below) Check this radio button to cause a “static” Page to be displayed as your blog’s front page. At the same time, choose the Page that will display your actual Posts. The Front page and Posts page cannot be the same value. Front page Select in the drop‐down box the actual Page that you want displayed as your front page. If you do not select a choice here, then effectively your blog will show your posts on both the blog’s front page and on the Posts page you specify. If you would like to create a static home page template file, do not name it home.php, otherwise you will encounter problems when you try to view the “blog”/“posts” section of your site. To get around this, just name it anything but home.php, for example, myhome.php Posts page HTTP://EDUCHALK.ORG: 39
HTTP://EDUCHALK.ORG
Select in the drop‐down box the name of the Page that will now contain your Posts. If you do not select a Page here, your Posts will only be accessible via other navigation features such as category, calendar, or archive links. Blog pages show at most X posts Enter the number the number of posts people will see when they download one of your site’s feeds. For each article in a feed, show Determines whether or not the feed will include the full article or just a summary. Full text Click this radio button to include the full content of each post. Summary Click this radio button to include a summary of the post. This could save bandwidth. Encoding for pages and feeds Enter the character encoding to set the choice of languages in which you, the other authors, and your commenters, can write. The default (and safe choice) is “UTF‐8”, as that encoding supports a wide variety of languages. If you wish to use some other character encoding (for example you have imported or will import articles written using a different character encoding) then specify that here. Caution should be used when changing this field as it may change the way information is displayed on your blog. For a more in depth article on character encoding see Character encoding at Wikipedia. Discussion Settings These settings allow you to set the options concerning comments, pingbacks and trackbacks (also called discussion). It is here the administrator decides if comments are allowed and/or require moderation, if pingbacks and trackbacks are acceptable, and what constitutes Comment Spam. On this screen you also control the circumstances under which your blog sends you e‐mail notification of certain events at your site. HTTP://EDUCHALK.ORG: 40
HTTP://EDUCHALK.ORG
Default article setting These settings may be overridden for individual articles. Attempt to notify any blogs linked to from the article (slows down posting) If you check this box, WordPress will send out a ping to a site or article you have linked to in your post. Your mention of their site or article will show up in the comment section of their site, if that site allows pingbacks. The notification occurs during the process of publishing your article to the internet. An article with many hyperlinks will slow the posting process as WordPress contacts all of the sites before the post is published. Allow link notifications from other blogs (pingbacks and trackbacks) Check this box so WordPress accepts or declines the pings from other sites which may reference your site or an article on your site. If this box is checked, pingbacks and trackbacks will appear in the comments section of your posts. Allow people to post comments on the article Check this box if you wish to allow comments to your posts. Remember that this can be overridden for individual articles. Comments can also be controlled by making an article PRIVATE, which requires the appropriate password before a comment is allowed. If you don’t wish to allow comments uncheck this setting. Other comment settings Comment author must fill out name and e‐mail HTTP://EDUCHALK.ORG: 41
HTTP://EDUCHALK.ORG
Check this box as a way to force spammers to do a bit of extra work. In reality, the name and e‐mail address are not verified in any way prior to the comment being submitted. Most legitimate commenters are more than willing to fill out a name and e‐mail address. Users must be registered and logged in to comment If this checkbox is checked, only logged in registered users will be able to write comments on your site. Automatically close comments on articles older than X days Check the box and enter the number of days (e.g. 14 days) after which WordPress will automatically flag eligible posts so that no more comments are accepted. Enable threaded (nested) comments X levels deep Check this box to enable threaded comments, then from the drop‐down box, select the number of levels deep (maximum of 10 levels) you will allow for nested comments. Note that themes need to be specially coded to properly display threaded comments. Break comments into pages with X comments per page and the [last/first] page displayed by default. Comments should be displayed with the [older/newer] comments at the top of each page Check this box to cause comments to display in a paginated format with the specified number of comments per page. In addition, specify if the pages should be ordered “first to last” or “last to first”, and within each page, whether the oldest, or newest, comment is to be displayed first. E‐mail me whenever These two settings give you control of when you (or your authors) receive an e‐mail in regards to comments about articles. Anyone posts a comment Check this box so that every single comment posted will generate an e‐mail to the author of that post. Be warned that if your posts receive a large number of comments, you (or your authors) may find a very full e‐mail Inbox. If you wish to micromanage comments, then by all means, activate this setting by checking the box. A comment is held for moderation Check this box if you want WordPress to send notification that a comment is being held for moderation. The e‐mail notification is sent to the E‐mail address listed in the Settings → General SubPanel. This is useful if your blog has multiple authors and each author is authorized to allow or decline comments. That way, you, the owner of the site, can review what comments are being allowed or denied. HTTP://EDUCHALK.ORG: 42
HTTP://EDUCHALK.ORG
Before a comment appears These settings provide you even more control over the instances of when and how comments are posted. An administrator must always approve the comment Select this option to force comments to be approved by a blog user or owner having the proper Role to approve comments, even if the comments appear to be spam. See the section called “Comment Moderation” below regarding spam. Comment author must have a previously approved comment Check the box to insure comments are only posted if the comment author’s e‐mail address matches the address of a previously approved comment, otherwise, the comment is held for moderation. Comments from blacklisted e‐mail addresses (those listed in the Local Spam Words Text Box) are held for moderation regardless of whitelist status. Comment Moderation In the Comment Moderation section you specify these options to help you deal with Comment Spam. Hold a comment in the queue if it contains X or more links (A common characteristic of comment spam is a large number of hyperlinks.) Not too long ago, comment spammers would have five, ten, or more hyperlinks in their comment spam. This made it very easy for bloggers to quickly screen comments but spammers recognized that and commonly use only one or two hyperlinks. You can enter a number in this box to tell WordPress how many links you allow in a comment before holding it for moderation. When a comment contains any of these words in its content, name, URL, e‐mail, or IP, it will be held in the moderation queue. One word or IP per line. It will match inside words, so “press” will match “WordPress” In this text box you can add your own spam words which will filter the comments when posted. For an extensive and updated list of frequently used spam words and phrases click the link to the article on Spam Words; consider adding these to your own list. Comment Blacklist When a comment contains any of these words in its content, name, URL, e‐mail, or IP, it will be marked as spam One word or IP per line. It will match inside words, so “press” will match “WordPress”. This text box acts the same as “When a comment contains any of these words…” except comments which match these words will be deleted without warning. You may want to use this as a last resort, as genuine comments can end up being deleted. HTTP://EDUCHALK.ORG: 43
HTTP://EDUCHALK.ORG
Avatars An avatar is an image that follows you from weblog to weblog appearing beside your name when you comment on avatar enabled sites. Here you can enable the display of avatars for people who comment on your blog. By default WordPress uses Gravatars (short for Globally Recognized Avatars) for the pictures that show up next to comments. Plugins may override this. Avatar display Don’t show Avatars Check this radio button to suppress avatar display in comments. Show Avatars Check this so comment author avatars are displayed along with the comments. Maximum Rating This setting controls (or limits) the “highest” level or rating of gravatar you allow to be displayed. G Suitable for all audiences PG Possibly offensive, usually for audiences 13 and above R Intended for adult audiences above 17 X Even more mature than above Default Avatar For users without a custom avatar of their own, you can either display a generic logo or a generated one based on their e‐mail address. •
Mystery Man •
Blank •
Gravatar Logo •
Identicon (generated) HTTP://EDUCHALK.ORG: 44
HTTP://EDUCHALK.ORG
•
Wavatar (generated) •
MonsterID (generated) Media Settings These settings control basic aspects of media display. Go to Settings → Media to adjust these settings. File links Default media links This setting determines where images, documents, and other media files will be linked to when inserted into the body of a post. Check the appropriate radio button for None, Post URL, or File. Image sizes The sizes listed determine the maximum dimensions in pixels to use when inserting an image into the body of a post. You can enter specific dimensions according to your preferences. Thumbnail size Enter the Width and Height Crop thumbnail to exact dimensions (normally thumbnails are proportional) Medium size Enter the Max Width and Max Height Large size Enter the Max Width and Max Height HTTP://EDUCHALK.ORG: 45
HTTP://EDUCHALK.ORG
Privacy Settings The Privacy Settings control your blog’s visibility to search engines, such as Google and Technorati. You can decide if you would like your blog to be visible to everyone, including search engines (like Google, Sphere, Technorati) and archivers, or not. If you don’t want your blog available to the search engines you can block search engines, but allow normal visitors to see your site. Go to Settings → Privacy to adjust these settings. I would like my blog to be visible to everyone, including search engines (like Google, Sphere, Technorati) and archivers Check this radio button so WordPress does not restrict search engines. I would like to block search engines, but allow normal visitors Check this to cause search engine spiders to ignore your site and to stop pings to ping‐o‐matic and any other RPC ping services specified in the Update Services area of Settings → Writing. Checking this option will Hide the Update Services option entirely on the Settings → Writing screen with the message “WordPress is not notifying any Update Services because of your blog’s privacy settings.” Permalink Settings By default WordPress uses web URLs which have question marks and lots of numbers in them, however WordPress offers you the ability to create a custom URL structure for your permalinks and archives. This can improve the aesthetics, usability, and forward‐compatibility of your links. Go to Settings → Permalinks in the main menu to edit the default permalink format. HTTP://EDUCHALK.ORG: 46
HTTP://EDUCHALK.ORG
Check one of the radio buttons corresponding to choose from some common permalink structures for your blog: Default An example of the default structure is http://example.com/?p=123 Day and name An example of the day and name based structure is http://example.com/2008/03/31/sample‐post/ Month and name An example of the month and name based structure is http://example.com/2008/03/sample‐post/ Numeric An example of the numeric structure is http://example.com/archives/123 Custom structure In the box specify the custom structure you desire to use. One example is /archives/%year%/%monthnum%/%day%/%postname%/ Look at the Using Permalinks article in the Codex for further discussion of Permalink Structure Tags. HTTP://EDUCHALK.ORG: 47
HTTP://EDUCHALK.ORG
Tip You may enter custom bases for your category and tag URLs here. For example, using /topics/ as your category base would make your category links like http://example.com/topics/uncategorized/. If you leave these blank the defaults will be used. Again, see the Using Permalinks article for further discussion of Permalink Structure Tags. Category base Enter a custom prefix for your category URLs here. Tag base Enter a custom prefix for your tag URLs here. Miscellaneous Settings WordPress has so many features, that some of them defy categorization. The file upload, links update tracking, and support for custom “hacks” features can be controlled from this screen. Go to Settings → Miscellaneous to edit these settings. Uploading Files Default settings used for during the media upload process when writing a post. Store uploads in this folder HTTP://EDUCHALK.ORG: 48
HTTP://EDUCHALK.ORG
Enter the folder (directory) to where you want to upload files with the Write → Write Post Upload function. You must enter a folder relative to your WordPress address (URI) folder. WordPress suggests an upload directory of wp‐content/uploads. Use the suggestion, or modify it to a relative path of your choice. If your wp‐content folder is writeable, WordPress will automatically create this folder when you do the first upload using the Posts → Add New media uploader function. Full URL path to files (optional) Enter a URL path to your uploaded files. This is optional only if the setting “Store uploads in this folder” remains at its default value of wp‐content/uploads. Otherwise it must include the full path to the upload file directory that a browser would see. Organize my uploads into month‐ and year‐based folders Check this box if you wish to organize your uploads into folders based on the year and the month of the upload. Assuming that you have specified wp‐content/uploads as your upload storage folder, if you check this box, a file uploaded in February of 2009 would be placed into the wp‐
content/uploads/2009/02 folder. Note At the time of the actual upload, WordPress will automatically create the folders, such as wp‐
content/uploads/2009 and wp‐content/uploads/2009/02, as long as your wp‐content folder is writeable. Track Links’ Update Times Check this checkbox to activate WordPress’ link tracking feature. Blogs owners can report to some central location when they have updated their site. WordPress can do this automatically for you (see the section called “Update Services”). WordPress can then compare your links, (Links → Edit) with this central location to determine if any of your links have been recently updated. Defining Your Users If you set up this blog, then when you logged in, you were greeted with, “Howdy, Admin!” The admin is the default user name as well as the role. WordPress has five pre‐defined Roles: Administrator, Editor, Author, Contributor, and Subscriber. Each Role is allowed to perform a set of tasks called Capabilities. There are thirty Capabilities including publish_posts, moderate_comments, and edit_users. The Capabilities are pre‐assigned to each Role. HTTP://EDUCHALK.ORG: 49
HTTP://EDUCHALK.ORG
The Administrator Role is allowed to perform all possible Capabilities, including managing other users. Each of the other Roles has a decreasing number of allowed Capabilities. If you are going to be the only person using your blog, then you don’t need to create any additional users, and can just edit your profile. If you will have multiple authors, though, you’ll need to set up your additional users. As the blog owner, you should be an Administrator. You may choose to give the admin role to others who will help you maintain the blog, but be aware that once you do, they have equal power and can even delete you as a user. Be very cautious about giving someone admin access to your blog, and take advantage of the other roles that are available. If someone has added you to an existing blog, that person will have defined your role. Summary of Roles Administrator Somebody who has access to all the administration features Editor Somebody who can publish posts, manage posts as well as manage other people’s posts, etc. Author Somebody who can publish and manage their own posts Contributor Somebody who can write and manage their posts but not publish posts or upload media files Subscriber Somebody who can read comments/comment/receive newsletters, etc. HTTP://EDUCHALK.ORG: 50
HTTP://EDUCHALK.ORG
Note Users will see diminished menu options when they are logged in based on their capabilities. For example, an Administrator will see the same menu you do, but an Author will not see the menu sections for functions they are unable to use, such as changing the blog appearance or adding new users. Adding a New User Adding a new user to your blog is very easy. Go to Users → Add New in the main menu. Enter a username for the person, his/her name, email address and the role you want to assign. You will also enter a password, which can be changed when the new user logs in. The new user will receive an email announcing the creation of the account, but you will need to provide the username and password. Editing Your Profile You should take a moment to edit your profile, where you can specify your name and how it will be displayed on your site, your e‐mail address (for administrative purposes), other personal information, and personal options. You can access your profile several ways. 1. Your name, linked in the upper right of the screen. 2. Users → Your Profile in the main menu. 3. Users → Authors & Users then click on your name in the table. Each of these ways takes you to your profile screen. The only pieces of information WordPress requires you to include in your Profile are your e‐mail address and a nickname. It should be noted that WordPress requires your email address only for your HTTP://EDUCHALK.ORG: 51
HTTP://EDUCHALK.ORG
blog’s administration purposes. The e‐mail address is never sent to any other site (not even to the people at WordPress headquarters), and it is never displayed on your site (unless you put it there manually). Only the other registered users of your blog have access to the e‐mail address you provide. Note It is possible for a theme to display your e‐mail address (and the e‐mail addresses of your other registered users) on your site, since the the_author_email template tag can be used for such purposes. This would be a poorly conceived theme, however, if it didn’t inform you of that before you downloaded it. Neither of the themes included with WordPress display any e‐mail address anywhere on your site by default. All of the other fields for personal information in your profile are optional, and, again, it is never sent to any other site or person. It may be displayed on your site, however, depending on the theme you use, so you should test things out with your particular theme if you’re at all nervous. Typically, themes only display publicly the information you enter in the Display name field. Personal Options Visual Editor Checking this box Disables the visual editor when writing, and uses the plain HTML editor. Note that this checkbox changed at Version 2.7, as before you checked the box to enable the visual (WYSYWIG) editor. HTTP://EDUCHALK.ORG: 52
HTTP://EDUCHALK.ORG
Admin Color Scheme Check the radio button next to the color scheme you’d like to use in the administrative panels. The choices in WordPress 2.7 are Blue and Gray, with Gray being the default palette. Each color scheme comes with its own set of unique icons. Keyboard Shortcuts Checking this box Enables keyboard shortcuts for comment moderation. Keyboard shortcuts are designed to allow you to rapidly navigate and perform actions on comments, which are described in the Comments chapter. Name Username You cannot edit your Username because it is used as your Username during the login process. Even an Administrator cannot change your Username. Usually, no one else ever needs to see your Username. First name Enter your first name in this text box. Last name Enter your last name in this text box. Nickname Enter the nickname as it is a required for every user. It may be the same as your User Name or it can be different. If you don’t supply a Nickname, then the User Name will be placed in this field. Display name publicly as Select from the drop‐down, how your name should be cited on your blog. You can choose from several of the above pieces of information: Nickname, Login name, First Name, Last Name, “First Last”, or “Last First”. If you prefer “Last, First,” insert a comma after your last name in the Last Name text box above and choose the last option from this dropdown. Contact Info E‐mail All users are required to list an e‐mail address in their respective Profiles. Your blog will use this address to notify you of new comments to your posts and for other administrative purposes. To reiterate what was said above, only other registered users of your blog will have access to this e‐mail address. It is never sent anywhere. Website HTTP://EDUCHALK.ORG: 53
HTTP://EDUCHALK.ORG
Enter your website address. If you supply nothing, then the field will default to just http://. AIM Enter your AIM screen name here. Yahoo IM Enter your Yahoo Messenger ID here. Jabber / Google Talk Enter your Jabber / Google Talk name here. About Yourself Biographical Info Enter a short description or profile of yourself here. This optional information is not displayed by either the default (Kubrick) Theme or the classic Theme included with WordPress. However, these themes could be customized to display this description. Also, other themes available for download may automatically display this information. New Password Enter your password twice, once in each of the two text boxes. Leaving these text boxes blank will keep the password you are currently using. Strength Indicator This indicates if the password you entered is Very Weak, Weak, Medium, or Strong (displayed in green). The stronger the password the more secure your login. Hint: Your password should be at least seven characters long. To make it stronger, use upper and lower case letters, numbers and symbols like !"?$%^&). Before You Leave Remember to click the Update Profile button to save the changes you have made to your Profile and Personal Options. After clicking this button you should see a splash message at the top of the screen saying “User Updated”. If you don’t see that message, then your changes are not saved! Managing Users When you’ve been using your blog for a while, you may want to perform additional user management tasks. Go to Users → Authors & Users in the main menu and you will come to a screen that lists all the blog’s current users in a table. The table of Users contains the following columns: HTTP://EDUCHALK.ORG: 54
HTTP://EDUCHALK.ORG
[ ] check box Check this box if this user is to be affected by the Bulk Delete or Change User Role functions. There is also a checkbox in the column header to the left of the text Username—click that checkbox to cause all Users to be checked. User Image Avatar for this particular user. Username The login of the User. To edit a User, click on the Username link, the User’s Profile will then display for you to make the necessary changes. Also note that if you hover the mouse anywhere over the whole row for a particular user, the Edit and Delete links will appear. The current logged in user will not see the Delete link appear when hovering over his/her own username (i.e., you can’t delete yourself). Name The first and last names of the User. E‐mail The User’s e‐mail address. Role The Role assigned to that User. Posts The number of Posts written by that User. Click on that number to be directed to the Edit Posts screen to view or edit the Posts written by this User. All users have a unique identification number which WordPress uses to identify users internally. To determine that User ID, hover the mouse over the Posts number link, and the User ID (author=X) will be revealed as part of the URL in the browser status bar. HTTP://EDUCHALK.ORG: 55
HTTP://EDUCHALK.ORG
Search Users At the top right of the User Table is a search box to help find users. Enter a string in the box and click the "Search users" box. Any User that contains the search string in the Username, Name, E‐mail, or Website fields will be displayed, by Role. You can then add, change, or delete those users. A “No matching users were found!” message will be displayed if no Users can be found that match the search string you entered. Filter Users Just above the User Table, are filter links to All Users, and to links to Users belonging to the each of the various Roles. Clicking on one of those links, say Subscribers, will display all the Users assigned the Subscriber Role. Click on All Users to again display all the Users in the table. Delete Users At the top and bottom, of the table is the Bulk Actions dropdown menu. In this particular screen, only the Delete action is allowed. Any User that has the checkbox (left of User Image/Username) checked will be deleted when the Delete button is clicked. On clicking the Delete button, a Delete Users panel will display with a message “You have specified these users for deletion:” with a list of the Users you are deleting with the following question: What should be done with posts and links owned by this user? Delete all posts and links Check this radio button and click the Confirm Deletion button to delete the User(s) as well as any posts and links attributed to those User(s). Attribute all posts and links to HTTP://EDUCHALK.ORG: 56
HTTP://EDUCHALK.ORG
Check this radio button, select a User from the adjacent drop‐down box, and click the Confirm Deletion button to attribute all the posts and links for the Deleted User(s) to the User you selected in the pulldown box. Upon successful completion of the deletion process, a splash message box near the top of the panel will display “x user(s) deleted”. Change User Role To the right of the Action dropdown menu is the “Change role to” dropdown menu . Select a Role, and all the Users that have the checkbox (left of Username) checked will be changed to that Role upon clicking the Change button. Upon successful completion of the changes, a splash box with the message “Changed roles.” will display. HTTP://EDUCHALK.ORG: 57
HTTP://EDUCHALK.ORG
Chapter 5: Creating Content Once your blog is set up, it’s time to start creating your own original content. With WordPress 2.8 you can create Posts (what most people think of when they think of blog content), Pages (for static content, such as an “About Me” page), Media (you can upload images, videos, audio files and documents and create galleries), and Links (blogrolls or lists of relevant sites to show in your sidebar). In addition, Comments are content that is attached to a particular post, page or media file and is created by either your readers or you (often in reply to a reader comment). You can use all of these content types or only some of them; it’s up to you. This section will outline how to create and manage your content using WordPress. Posts Creating a New Post Creating a new post is very simple, though there are more advanced options available should you want to use them. At its simplest, creating a post requires you to go to Posts → Add New from the main menu (or click New Post button in the dark header area of the screen), enter a title and some text, and click Publish. Each of the modules available on the post creation/editing screen is described below. Title The title of your post. You can use any words or phrases. Avoid using the same title twice as that will cause problems. You can use commas, apostrophes, quotes, hypens/dashes, and other typical symbols in the post like “My Site ‐ Here’s Lookin’ at You, Kid.” WordPress will clean it up for the link to the post, called the post‐slug. HTTP://EDUCHALK.ORG: 58
HTTP://EDUCHALK.ORG
Permalink After you save your post, the Permalink below the title shows the potential URL for the post, as long as you have permalinks enabled. (To enable permalinks, go to Settings → Permalinks.) The URL is generated from your title. In previous versions of WordPress, this was referred to as the “page‐slug.” The commas, quotes, apostrophes, and other non‐HTML favorable characters are changed and a dash is put between each word. If your title is “My Site ‐ Here’s Lookin’ at You, Kid”, it will be cleaned up to be “my‐site‐heres‐lookin‐at‐you‐kid” as the title. You can manually change this, maybe shortening it to “my‐site‐lookin‐at‐you‐kid,” by clicking the Edit link that appears to the right of the permalink. Post Editing Area The big blank box where you enter your writing, links, links to images, and any information you want to display on your site. You can use either the Visual (WYSIWYG) or the HTML view to compose your posts and enter text. If you are not experienced with HTML, you may want to start by using the Visual Editor, which uses the familiar icons common to word‐processing software to format your post. In addition, WordPress is smart enough to convert character smileys like “:)” into the graphical image counterparts. A small row of icons to the left of the Visual/HTML tabs launch the media uploader, which allows you to upload media into your post or embed it from a third‐party site such as YouTube. If you have inserted media into the post, you can click on the image in the Visual editor to get additional editing options such as resizing and aligning the image, or to delete the image. For more information on the media uploader, skip ahead to the section called “Uploading Media Files”. At the bottom of the Visual editor, the word count of the post is displayed, as is the last time the post was saved (including autosaves). The above elements are in a fixed position on the screen and cannot be moved. Other modules on the screen, however, can be rearranged, collapsed/expanded or hidden using the Screen Options tab as HTTP://EDUCHALK.ORG: 59
HTTP://EDUCHALK.ORG
you see fit. If you drag all the modules from the right column into the center, the center column will expand to take up the width of both columns. Tags Enter tags by typing them into the empty field. You can enter multiple tags at once using commas to separate individual tags. Click the Add button for tags to be added to the post. When tags are attached to the post, they will appear beneath the text input field, with a small gray X to one side. Click the X to remove a tag from a post. Categories The general topic the post can be classified in. Generally, bloggers have 7‐10 categories for their content. Readers can browse specific categories to see all posts in the category. To select a category/categories for the new post, just check the box(es) next to the category in your list. To add a new category, click the +Add New Category link in this section. You can view all categories or your most used categories in this module. If you have not specified a default category, the post will be marked as “uncategorized.” HTTP://EDUCHALK.ORG: 60
HTTP://EDUCHALK.ORG
Excerpt A summary or brief teaser of your posts featured on the front page of your site as well as on the category, archives, and search non‐single post pages. Note that the Excerpt does not usually appear by default. It only appears in your post if you have changed the index.php template file to display the Excerpt instead of the full Content of a post. If so, WordPress will automatically use the first 55 words of your post as the Excerpt or up until the use of the More Quicktag mark. If you use an Explicit Excerpt, this will be used no matter what. Just type the text you want to use as an excerpt into the text box. Trackbacks A way to notify legacy blog systems that you’ve linked to them. If you link other WordPress blogs, they’ll be notified automatically using pingbacks. No other action is necessary. For those blogs that don’t recognize pingbacks, you can send a trackback to the blog by entering the website address(es) in this box, separating each one by a space. HTTP://EDUCHALK.ORG: 61
HTTP://EDUCHALK.ORG
Discussion Options to enable interactivity and notification of your posts. This section hosts two check boxes: Allowing Comments and Allowing Pings. If Allowing Comments is unchecked, no one can post comments to this particular post. If Allowing Pings is unchecked, no one can post pingbacks or trackbacks to this particular post. Check the boxes to allow comments and/or pings. If comments or pings have come in for this post, they will appear in this module, and may be moderated here or from the Comments screen. Custom Fields Custom Fields offer a way to add extra information to your site. In conjunction with extra code in your template files or plugins, Custom Fields can modify the way a post is displayed. These are primarily used by plugins, but you can manually edit that information in this section. Learn more about custom fields in the Codex. HTTP://EDUCHALK.ORG: 62
HTTP://EDUCHALK.ORG
Post Author A list of all blog authors you can select from to attribute as the post author. This section only shows if you have multiple users with authoring rights in your blog. Post Revisions This module lists versions of your post that have been saved in the database. You can click the radio buttons to choose previous versions of the post to compare the edits that have been made. Once viewing a comparison, you will have the option of changing versions using a dropdown menu, or reverting to a previous version of the post. Publish The Publish module contains a variety of functionality related to the status of your post in addition to containing the buttons you will use to Save and Publish your work. Publish Status This element identifies the current state of your post. New posts are Unpublished until they are Saved, Submitted for Review, Scheduled or Published. Visibility This element identifies who can see your post. The default state is Public, meaning the post can be seen by anyone. You can change the visibility of this post by clicking the Edit link to the right of the current status. Select Public, Password‐protect, or Private using the radio buttons. Public posts may also be declared “sticky.” Public Posts that are public may be seen by anyone who comes to your site. Normal posts are displayed in reverse‐chronological order on your blog home page. Public/Stick to Front Page Checking this option will make the post “sticky,” meaning it will stay in the top position of your blog’s home page until you come back and uncheck the box. This is generally used when there is an important announcement you want to keep at the top of your home page even though you are creating newer posts. Password‐protect HTTP://EDUCHALK.ORG: 63
HTTP://EDUCHALK.ORG
You can set a password for the post, so that anyone coming to your blog will see the post title, but not the content of the post. Instead, they will see the message that the post is password‐protected and be prompted to enter the password if they want to see the post. Be sure and write down the password and keep it in a safe place. Publish Date/Time This element identifies the timestamp under which the post will be published. By default, posts are published immediately when you click the Publish button, but you can also schedule a post to be published in the future, or set the time back so that it appears to have been published in the past. Click Edit next to where it says Publish immediately, and then enter the time and date you want to use in the fields that appear. Click OK. If you have set a future publish date, the Publish button will change to say Schedule, since you are not technically publishing the post yet. The post will publish automatically when the defined date/time arrives. Save button Allows you to save your post as a draft rather than immediately publishing it. Preview button Allows you to see how your post will look in your blog template before officially publishing it. Publish button Publishes the post on your live site. Other Ways to Create Posts Press This A Press This shortcut can be created by adding the Press This link to your favorites. You can grab the Press This link from any of these three locations in the application: 1. The Press This module on the New Post screen, 2. Tools → Tools in the main menu, or 3. Settings → Writing in the main menu. By E‐mail You can set up your blog to accept post by e‐mail. For information, see the section called “Post via e‐
mail” to learn more about Blog by E‐mail. XML‐RPC and Atom Interface You can post to your WordPress blog with tools like Windows Live Writer, Ecto, Bloggar, Radio Userland (which means you can use Radio’s e‐mail‐to‐blog feature), NewzCrawler, and other tools that support the Blogging APIs. You can read more about XML‐RPC support in the Codex. HTTP://EDUCHALK.ORG: 64
HTTP://EDUCHALK.ORG
Managing Existing Posts Managing Categories Every Post in WordPress is filed under one or more Categories. Categories allow the classification of your Posts into groups and subgroups, thereby aiding viewers in the navigation and use of your site. Each Category may be assigned to a Category Parent so that you may set up a hierarchy within the category structure. Using automobiles as an example, a hierarchy might be Cars‐>Ford‐>Mustang. In creating categories, recognize that each category name must be unique, regardless of hierarchy. Use a standard set of Categories to organize your content, similar to creating a table of contents to organize chapters in a book. The default category is “uncategorized,” unless you change it in your Writing Settings. When using the WordPress Default Theme, Categories are shown in two different places on your blog. First, the Categories are listed as links in the Category section of your sidebar, and second, all the Categories to which a given post belongs are displayed under that post. When someone viewing your blog clicks on one of those Category links, a archive page with all the Posts belonging to that Category will be displayed. To either add new categories or manage existing ones, go to Posts > Categories in the main menu. You can add new categories using the simple form on the left side of the screen. You can edit or delete categories using the table to the right. If you want to convert your categories into tags, use the converter found in Tools > Import. Managing Tags Tags are the keywords you can assign to each post. Not to be confused with Categories, Tags have no hierarchy, meaning there’s no relationship from one Tag to another. But like Categories, Tags provide another means to aid your readers in accessing information on your blog. If categories act as your blog’s table of contents, think of tags as the words that appear in your site’s index. HTTP://EDUCHALK.ORG: 65
HTTP://EDUCHALK.ORG
When using the WordPress Default Theme, Tags are displayed under each Post those Tags are assigned to. Someone viewing your blog can click on one of those Tag links, and an archive page with all the Posts belonging to that Tag will be displayed. To either add new tags or manage existing tags, go to Posts → Tags in the main menu. You can add new tags using the simple form on the left side of the screen. You can edit or delete tags using the table to the right. If you want to convert your tags into categories, use the converter found in Tools → Import. Media In addition to uploading or embedding media into a blog post, you can also upload media files without creating a post. This allows you to upload files to use later with posts and pages, to simply save media files in a central location, and to get a web address for a particular file that you can link to from elsewhere on the Web. Uploading Media Files Uploading media from your local computer into the Media Library is quite simple. Go to Media → Add New in the main menu. The screen will appear relatively empty, since it basically just contains a button to launch the media uploader. Two “uploaders”, Flash and Browser, are provided. If the Flash uploader doesn’t work or you are on a slow connection, then click the “Browser Uploader” link to use the Browser uploader. HTTP://EDUCHALK.ORG: 66
HTTP://EDUCHALK.ORG
Flash Uploader Your first prompt will be to choose files to upload. Select an individual file from the Select Files window, then click the Open button. A “Crunching…” message will display, and when the uploading is complete, the image and its related fields will be displayed. At that point you may edit and save the information about that file. Uploading multiple files at once: After clicking the Select Files button, in the Select Files window, multiple files can be selected by holding down the Ctrl key and clicking on each file. After all the files are selected, click on the Open button and all of those files will be uploaded. If you click to Edit a media file, you will be able to edit the following fields: Title Enter the Title of this Media. The Title will be displayed in the File column of the Media Library. Caption The caption for this Media. For image type Media, the Caption is also used as alternate text for that image. HTTP://EDUCHALK.ORG: 67
HTTP://EDUCHALK.ORG
Description A description for this particular Media. Browser Uploader Click the Browse button, find and click the file to upload from the File Upload window, then click the Open button. The file name will be placed in the text box to the left of the Browse button. Once a file name is displayed in the text box to the left of the Browse button, click the Upload button to upload that file. Media Library All the files you’ve uploaded are listed in the Media Library, with the most recent uploads listed first. In addition to text filters to display files by type (audio, images, etc.) there is a filter to display Unattached files. This filter will display a list of files you have uploaded directly into the library without creating a post. HTTP://EDUCHALK.ORG: 68
HTTP://EDUCHALK.ORG
A table lists all of your media files in rows, and contains the following columns: File There is no column heading for “File”, but a thumbnail of the actual image or a thumbnail representing the Media Type (audio, video, test, PDF, Doc) is displayed in this column. Media Media is the actual name of the file. Description The description of the Media you assigned at the time of upload. Attached to Attached to describes the post or page and the date of that post or page. Click on the title of the post or page to edit that post or page. Date The date the file was uploaded. Hovering the mouse cursor over a row reveals the action links under the Name column, in that row. Clicking on a Media name will also initiate the Edit Action. The available Actions are: Edit Clicking Edit displays the screen to edit that individual file’s metadata. Delete HTTP://EDUCHALK.ORG: 69
HTTP://EDUCHALK.ORG
Clicking Delete will delete the file from the Media Library (as well as from any posts to which it is currently attached). View Clicking View presents the file in your Theme. Attach The Attach link only appears for unattached files. Clicking Attach will launch a small popup that will allow you to search for a post and attach the file to that post. Pages In WordPress, you can write either posts or pages. When you’re writing a regular blog entry, you write a post. Posts automatically appear in reverse chronological order on your blog’s home page. Pages, on the other hand, are for content such as “About Me,” “Contact Me,” etc. Pages live outside of the normal blog chronology, and are often used to present information about yourself or your site that is somehow timeless ‐‐ information that is always applicable. You can use Pages to organize and manage any amount of content. In general, Pages are very similar to Posts in that they both have Titles and Content and can use your site’s Templates to maintain a consistent look throughout your site. Pages, though, have several key distinctions that make them quite different from Posts. •
Pages are for content that you want to be available all the time and navigable from anywhere on your site. Pages are not Posts, and do not cycle through your blog’s main page. •
Pages can be organized into Pages and Subpages by selecting Page Parent when you create a Page. •
Pages can use Page Templates that you can design to be the same or different from your regular blog post pages. Page templates can include Template Files, Template Tags and other PHP code. •
Pages cannot be associated with Categories and cannot be assigned Tags. The organizational structure for Pages comes only from their hierarchical interrelationships, and not from Tags or Categories. •
Pages are not files. They are stored in your database just like Posts are. Creating Pages To create a new Page, go to Pages → Add New from the main menu. You will see an editor similar to the screen you use to create posts. Enter a title, text, add media and click Publish to create a simple page. HTTP://EDUCHALK.ORG: 70
HTTP://EDUCHALK.ORG
Page Order If you have more than one page, you will see a module labeled Page Order. You can select a numerical order for your Page to determine the order in which Pages are listed in your navigation or sidebar widget. By default, Pages will be listed in the order they were created. Page Parent Just as you can have Subcategories within your Categories, you can also nest Subpages beneath your Pages, creating a hierarchy of pages. To nest a Page under an existing Page, create a new Page or go to an existing Page in the Administration Panel, and click the “Page Parent” drop‐down menu. The drop‐down menu contains a list of all the Pages already created for your site. To turn your current Page into a Subpage, or a “Child” of the “Parent” Page, select the appropriate Page from the drop‐down menu. If you specify a Parent other than “Main Page (no parent)” from the list, the Page you are now editing will be made a Child of that selected Page. When your Pages are listed, the Child Page will be nested under the Parent Page. The Permalinks of your Pages will also reflect this Page hierarchy. Page Templates WordPress can be configured to use different Page Templates for different Pages. In the Page Template module of the Page creation/editing screen, there is a drop‐down menu that allows you to select which Template will be used when displaying this particular Page. NOTE: In order to access the HTTP://EDUCHALK.ORG: 71
HTTP://EDUCHALK.ORG
Page Template selector, there must be at least one custom Page Template available in the active theme (see Creating your Own Page Templates in the Codex to learn how to create one). Changing the URL (or “Slug”) of Your Pages If you have Permalinks enabled, and you have selected the Day and Name option (Click the Settings tab, and then click the Permalinks subtab), then the permalink automatically shows up below your post title when you start typing in the body of your post (not just the title). However, if you have a different permalink option selected, or if you don’t have permalinks enabled at all, you must do the following to edit your page URL: •
Create a Page by going to Pages → Add New and entering a title, text content, etc. •
Click the Publish button to publish your page. •
Go to Pages → Edit. •
Find your Page in the table, and click on the title to edit the Page. •
See the permalink under the title, and click the Edit link to change it. Thus, if you don’t have the right permalink option enabled, you have to publish your pages before you can set the URLs. Listing Your Pages on Your Site WordPress is able to automatically generate a list of Pages on your site, which could be displayed in a number of ways, depending on your Theme. If you are using a Theme that uses navigation tabs, your Pages will create tabs according to the Theme design. If you are using a Theme with a sidebar (such as the default Theme), you can use the Pages widget to generate the Page list in your sidebar. Go to Appearance → Widgets, click Add next to the Pages widget in the left column. HTTP://EDUCHALK.ORG: 72
HTTP://EDUCHALK.ORG
Managing Existing Pages The Edit Pages screens provides allows you to manage all the Pages in your blog. Pages can be edited, deleted, and viewed. Filtering and searching make it easy to quickly find Pages matching certain criteria if you have a large number of Pages. Go to Pages → Edit to access these editing features. Several powerful features allow Pages to be edited in bulk allowing fields such as Author, Parent, Template, Comments Allowed, Status, and Pings Allowed to be changed for a whole batch of Pages. In addition, the Quick Edit feature provides an easy method to change a multitude of values, such as Title, Slug, Date, and Author for a given Page. Text Filters At the top of this screen are links such as All, Published, Pending Review, Draft, Private, that when clicked, will cause just the Pages of that type to be displayed in the underlying Table. Search Above the Table, to the right, is a search box where you can enter a word, or series of words, and click the “Search Pages” button to search and display all the Pages meeting your search words. A table lists all of your Pages in rows. A table lists all of your Pages in rows. The Pages are listed with the newest Page first. The table contains the following columns: [ ] This checkbox, when clicked (checked), “selects” that particular Page to be processed by a Bulk Action. Title This is the Page’s Title displayed as a link. Click the Title link to allow this Page to be edited in the Pages Edit SubPanel. Next to the Title, if a Page is of a Draft, Pending, or Password Protected nature, text will display showing that. "ID" HTTP://EDUCHALK.ORG: 73
HTTP://EDUCHALK.ORG
This is not a column in the Table, but by hovering the mouse over the Page Title, the Page ID is revealed as part of the URL displayed in the browser status bar (in Firefox the status bar is displayed at the bottom of the screen). A Page’s ID number is the unique number WordPress’ database uses to identify individual Pages. Author Displayed in the form of a link, this is the author who wrote the Page. Clicking the author link causes all the Pages authored by that user to be displayed in the Table of Pages (thus allowing a Bulk Action to be applied to all Pages for a given author). Comment bubble A comment bubble is the column heading, and each Page row has comment bubble with the number of comments for that Page. If a Pages has any comments, then the number comments is displayed in a blue bubble. Clicking on a blue comment bubble causes the Comments Edit Comments SubPanel to be displayed to allow moderation of those comments. Date The Date column for each Page shows the Date “Published” for Published Pages and the Date “Last Modified” for Unpublished Pages. Bulk Actions This screen allows Bulk Actions to be performed on one or more Pages selected in the Table. For Bulk Actions to be performed on multiple Pages at once, those Pages must be first selected using the checkboxes in the left column of the table. Select Edit or Delete from the Actions menu and click Apply. If you are using the Bulk Edit feature, a layer will appear that lists the pages you’ve indicated along with the metadata that can be applied to selected pages. Bulk Edit allows Author, Parent, Template, Comments Allowed, Status, and Pings Allowed to be changed for all of the selected Pages. Click Cancel to cancel and abort the Bulk Edit of these Pages. Click Update Page to save the Bulk Edits made to these Pages. Page row hovers Hovering the mouse cursor over the Page row reveals the Edit, Quick Edit, Delete, and View (or Preview, for unpublished pages) action links under the Title column, in that Page’s row. Edit Click on the Edit link or on the Page title to load the page editor for that particular Page. Quick Edit Quick Edit allows inline editing of fields related to a specific Page, including Title, Slug, Date, Author, Password or Private page box, Parent, Order, Template, Allow Comments, Allow Pings, and Status. HTTP://EDUCHALK.ORG: 74
HTTP://EDUCHALK.ORG
Delete Clicking Delete deletes the Page. View Clicking View presents the Page as it appears in a single Page view on your blog. If the page is not yet published, this link is replaced by Preview. Links WordPress allows you to creates list of hyperlinks (sometimes known as a blogroll) to appear in your blog sidebar. You can create one list or many lists by using link categories to create specific link sets. By default, a sample link to the wordpress.org site is included in your WordPress installation to give an example of the kinds of information that might be entered when you create a new link. In the administration panel the Links section of the main menu contains three screens: Edit, Add New, and Link Categories. Adding New Links To create a list of links, each one must be added individually. To add a new link, go to Links → Add New from the main menu. The Add New Link screen, like the Add New Post and Add New Page screens, HTTP://EDUCHALK.ORG: 75
HTTP://EDUCHALK.ORG
contains fields for entering information, and allows you to customize the screen based on the elements you find useful. The first three fields are the essential ones when creating new links, and are not able to hidden using Screen Options. Name The name of the link is what is actually displayed on your site. Web Address This is where the link points. Sometimes called a URL, this is the destination, or the site, you want to go to when you click the link. By default, the value of http:// is placed in the field to start you off. Description You may optionally enter a description of your link here. How the description is displayed on your site depends on which theme you use. The default Kubrick Theme displays the description directly below the name of the link on your site, and the classic theme displays the description to the right of the name. The modules for Categories, Target, Link Relationship (XFN), and Advanced, can be expanded or collapsed by clicking on the module title bar, can be moved using drag and drop, and/or can be hidden using the Screen Options tab. The fields in these modules are not required to create a new link, but can provide additional information and functionality. Categories Categories are displayed in a module box that allows selection of one or more Link Categories in which to associate a link. New Categories can also be added by simply typing that Category in the box and clicking the Add button. HTTP://EDUCHALK.ORG: 76
HTTP://EDUCHALK.ORG
Note Link Categories are completely separate from the Categories you use for posts. Target This modules houses radio buttons that allow you to decide how the link’s destination is displayed when someone clicks the link. Note: Specifying anything but none will cause validation problems on your page. In this specific case, however, these validation problems will not cause problems for your viewers’ web browsers. _blank The destination will open in a new window. _top If your site uses frames, this option could be handy. The destination will open in the current web browser window instead of the current web page frame. Don’t bother with this option if you don’t use frames, or if you don’t know what frames are; neither the default Kubrick nor the classic theme use frames. none The default option. This will open the destination in the current window (or the current frame if your site uses frames). HTTP://EDUCHALK.ORG: 77
HTTP://EDUCHALK.ORG
Link Relationship (XFN) XFN stands for XHTML Friends Network. WordPress allows for the generation of XFN attributes automatically so you can show how you are related to the authors/owners of site to which you are linking. XFN tags are an effort to add meaning to the connections (links) on the world wide web, and are gaining in popularity. See XFN Relationship Definitions for a list of available relationships. When you add a new link you may specify in this section of the SubPanel the relationship you share in real life with the author of the page to which you’re linking. This will automatically add a rel="X" attribute to the HTML code for the link (where X is the relationship you specify). XFN relationships are optional for WordPress links. You can leave everything in this section blank and all your links will still work. Advanced The following controls allow more advanced manipulation of your links. Image URL You can specify a URL of an image to associate with the link. What WordPress does with an image depends on settings defined by the link’s category (see Manage Categories SubPanel). RSS URL RSS is a form of Syndication. If you are linking to a site with an RSS feed, you can enter the feed URL here. Again, what WordPress does with this depends on your theme’s template files. Currently, neither the Kubrick Theme nor the classic theme displays the RSS URL. HTTP://EDUCHALK.ORG: 78
HTTP://EDUCHALK.ORG
Notes Notes to yourself concerning the link. Rating You may chose to rate a link from 0 to 9, where 0 implies that the link is unrated. What the rating system actually defines on your site is up to you to decide. Save Click the Add Link button to ensure you saved your Link to the database. Once you click the button, a confirmation text box will appear at the top of the page telling you “Link Address”. Keep this link private Click this checkbox to keep the Link private. This will make the link not visible when Links (Blogrolls) are displayed on your site. HTTP://EDUCHALK.ORG: 79
HTTP://EDUCHALK.ORG
Managing Existing Links The Edit Links screen allows you to manage the various links previously added to your blog. Individual links can be accessed to edit the information about that particular link. Search and filtering ability is also provided to allow you to find desired Links. Above the table in the upper right is a search box where you can enter a word, or series of words, and click the “Search Links” button to search and display all the links that include your search words. You can use the dropdown menus at the top of the table to show only links in a particular category or to change the sort order of the table. Multiple links can be selected for deletion. Links are displayed on this screen as rows in a table with the following columns. You can choose to hide any of these columns by accessing the Screen Options tab in the upper right and unchecking any column you don’t wish to see. Name The name (in bold) of the link and its description. URL The destination URL (Web Address) of the link. Category All links must belong to one link category. The category to which that link is assigned is shown here. rel This column displays all of the XFN relationships for this link. Visible Whether or not the link is visible on your site. Hovering over a row will display the actions you can perform on this link. You can edit any of the properties of a specific link, or you can delete it. Mass actions such as mass deletion are performed by HTTP://EDUCHALK.ORG: 80
HTTP://EDUCHALK.ORG
checking the boxes next to the items you wish to delete, choosing from the Actions menu and clicking Apply. Link Categories Each Link in WordPress is filed under one or more Link Categories. This aids in navigation and allows Links to be grouped with others of similar content. In creating Link Categories, recognize that each Link Category name must be unique, and that Link Categories are separate from the Categories used on your posts. If you are using the WordPress Default Theme (one of the two themes delivered with WordPress), Links are shown, grouped by Link Category, in the sidebar. This screen allows you to create new Link Categories, and edit or delete existing ones. Adding a New Link Category On the left side of the screen is the Add Category form, which allows you to create a new Link Category. There are three pieces of information associated with each new Link Category: the name, the slug, and the description. Category name This is the name that will be displayed in the sidebar above the links within this link category. To reiterate, the Link Category name must be unique. Category slug The slug is the segment of the URL that will define this Link Category. This is the equivalent of editing a permalink on a post. Again, the Category slug must be unique. Description Category descriptions are optional. Some themes take advantage of Link Category descriptions while others do not, so having descriptions may change the way Link Categories are displayed for your site. HTTP://EDUCHALK.ORG: 81
HTTP://EDUCHALK.ORG
Even if Link Categories are not used by your site’s theme, you may still find them useful from an administration point of view. Add Category This is the most important part of the Add Category process. Once you’ve entered in all the information about your new Link Category, use this button to save it. The new link category will appear in the table to the right. Managing Existing Link Categories On the right hand side of the screen is a table that lists all of your Link Categories by row. Link Categories are displayed alphabetically. The table of Link Categories contains the following columns: Name The name of the Link Category. Remember, each name must be unique. Click on the Name to edit the Link Category. Description Link Categories may have an optional description. Link The number of Links which are members of the Link Category. Click on the number in the Links column to be directed to the Edit Links SubPanel to manage the Links in that Category. Slug Shows the custom slug if you have entered one. HTTP://EDUCHALK.ORG: 82
HTTP://EDUCHALK.ORG
The Screen Options tab allows you to choose which columns are displayed, or not displayed, in the underlying table. Clicking on the Screen Options tab shows a list of the columns with a check‐box next to each column. Check the box for each column you want displayed in the Table, or uncheck the box to not display that column. Click the Screen Options tab again to close the Screen Options. Hovering the mouse cursor over the Link Category row reveals the Edit, Quick Edit, and Delete action links under the Name column in that Link Category row. Clicking on a Link Category Name will also initiate the Edit Action. The available Actions are described are: Edit Clicking Edit displays the Edit Link Category screen to edit individual Link Category fields. This action can also be initiated by clicking on the Link Category name. The editing screen will allow you to edit the name, the slug, and the description. Quick Edit Clicking on Quick Edit will reveal a layer that allow inline editing of fields currently displayed in the table for that Link Category. Click save to submit changes, or cancel to discard changes and close the editing layer. Delete This Action deletes the Link Categories files. Delete is available only as a Bulk Action. Note Deleting a category does not delete the links in that category, but the links that were only assigned to the deleted Category are set to the Default Link Category as defined in the Settings Writing SubPanel. You can also use the checkboxes in the far left table column to select multiple link categories for deletion. Check the boxes of the categories you wish to delete, select Delete from the Actions menu at the top of the column, and click Apply. HTTP://EDUCHALK.ORG: 83
HTTP://EDUCHALK.ORG
Chapter 6: Comments and Pings Managing your comments and pings requires the use of two screens. Going to Comments in the main menu provides you access to all comments that have been left on your site. Here you can approve/unapprove, edit, mark as spam or delete individual comments, search for specific comments, view all comments by a single author/IP or all comments on a specific post, filter by status, or perform bulk actions such as bulk deletion or marking as spam. The other screen is your Discussion Settings screen. You’ll have set your basic discussion settings when you set up your blog, but as time goes by you may decide to change your settings. This is especially common if your blog starts to attract spammers or people who leave unproductive comments, leading many bloggers to turn on various moderation options for comments. You can add or edit these moderation rules at any time by going to Settings → Discussion in the main menu. This screen also allows you to determine the rules for the display of comments on your blog, including comment threading and paging, new features in WordPress 2.7 that can be helpful when you receive a large number of comments. Comments, Pingbacks and Trackbacks: Terminology The Comments screen is actually the home of comments, pingbacks and trackbacks, but since they are all ways in which people comment on your content, they are grouped together for management purposes on the Comments screen. A Comment is something someone leaves on your actual site by entering text in the comment form that appears with your posts and pages. Pingbacks and Trackbacks are comments that people make about your content, but that they post on their own blogs instead of leaving a comment on yours. Pingbacks and Trackbacks are similar in intent, but differ in technical execution. For the sake of simplicity, WordPress refers to “Pings” as including both Pingbacks and Trackbacks. Using the Comments Screen On the Comments screen in the administration panel, a table displays the twenty most recent comments and pings. If you have more than twenty, pagination appears at the top and bottom of the comments table. Most recent comments are shown on page 1, with subsequent pages showing older comments. As you moderate comments, if you delete any or mark any as spam, new comments will appear on page 1, so that there are always 20 comments showing. By default, this table shows the “All” view, which includes comments of all states and types. If you prefer to see only certain states (such as pending moderation) or types (such as only showing pings, not comments that have been left on your actual site), you can use the filters at the top of the screen. If you have turned on comment moderation, pending comments (those that are awaiting moderation) will be highlighted in yellow. The comments table includes a significant amount of information. In the left column, the author’s avatar, name, URI, e‐mail address and IP address are shown for Comments. Clicking on the IP link will show you all comments left from that IP address. Clicking the e‐mail will launch your e‐mail program with a message to that person. Clicking the URI will open that web site. For Pings, the left column shows the name of the blog and post title, and the blog URI. HTTP://EDUCHALK.ORG: 84
HTTP://EDUCHALK.ORG
The right column shows to which blog post or page the comment was submitted. The post title links to that post within the administration tool for easy editing of the post. The number of comments displayed after the post title links to filter the comments screen to list only comments on that post. The # links to the live post’s permanent URI. In the middle column, the comment text is displayed (for pings, an excerpt is shown). Above each comment is the date and time it was submitted, which provides a permalink to the comment on your blog. Hovering over a comment row will cause a set of action links to display below the comment text. These links are: Approve If moderation is turned on, comments that are pending your approval to be displayed on your site will show this link. Clicking Approve will make the comment appear on your site. Unapprove If you do not use moderation, if you have settings that pre‐approve certain comments, or if you have already approved a comment, this link will show. Clicking Unapprove will reverse the approval and change the comment’s state to Pending. The yellow background of pending comments will appear. Edit Clicking Edit will take you to the editing screen for that comment, where you can edit the comment text, author name, URI, e‐mail address or status of the comment. Click Save to confirm your changes and return to the comments table. You should see your changes reflected in the table. Quick Edit Clicking Quick Edit will reveal a layer that allows for inline editing of visible table fields. Click Save to confirm changes, or Cancel to close the layer without committing any changes. Mark as Spam Marking a comment as spam will remove it from the default table view. These comments may be accessed by clicking the Spam text link at the top of the screen. If you are running Akismet, be cautious when marking something as spam, as it will be reported and used in determining the status of future HTTP://EDUCHALK.ORG: 85
HTTP://EDUCHALK.ORG
incoming comments. If you just think a comment is uninteresting or not worth displaying, use Delete instead. Delete This link is red for good reason. If you delete a comment, in cannot be retrieved. If you don’t want it to display but don’t want it to appear on your site, you can use Unapprove instead. Reply Reply allows you to reply to a comment right from your administration panel. Clicking Reply will reveal a layer in which you can enter your response to the comment. Click Save to submit the reply, or Cancel to discard it and close the layer. Your replies will be automatically approved, so make sure you approved the comment you are replying to, or your readers might be confused. Your reply will appear in the space where you typed it at first, though once you’ve done anything else on the comments screen, your reply will move to its chronological place in the comments list. If you have enabled comment threading on your site, your reply will appear as a threaded response to the original comment. In addition to using the action links on individual comments, some actions may be performed in bulk. To the left of each comment is a checkbox, which may be used for bulk actions. Simply click the checkboxes next to the posts in question, then select Mark as Spam or Delete from the Actions menu above the column of checkboxes. Click Apply, and all the items you checked will be removed as directed. Checkboxes at the top and bottom of the column act as a toggle to select all/unselect all, or if you have already selected some items will select the inverse. Yet another option for acting on comments is the use of keyboard shortcuts. To use this option you must have enabled it in your profile (just check the box to allow keyboard shortcuts). Once enabled, you can use the J and K keys to move up and down the comments list to highlight a comment for moderation, and use other keys to perform the actions. The keys for actions are easy to remember. A HTTP://EDUCHALK.ORG: 86
HTTP://EDUCHALK.ORG
Approve U Unapprove E Edit Q Quick Edit S Mark as Spam D Delete R Reply Searching Comments You can also search for specific comments by using the search function in the upper right. This searches the text, author name, author e‐mail, author URI, and author IP address of all comments. Clearing the search box and then clicking the search button will reset the display and show all comments. The ability to search for comments can be useful for cases such as wanting to find all previous comments by an author to see what they have said on your site before. Comment Moderation Comment moderation is a feature in WordPress that allows you to prevent comments from appearing on your site without your express approval. Moderation can be very useful in addressing Comment Spam, but it has more general applications as well. If you have turned on comment moderation, then you will be notified of any comments that are left on your blog. Depending on which settings you’ve enabled, you may need to explicitly approve each comment before it goes live, or you may only need to approve comments by people who have not left approved comments on your blog before. HTTP://EDUCHALK.ORG: 87
HTTP://EDUCHALK.ORG
WordPress runs a number of tests on each new comment before posting it to your blog. If a comment fails one of these tests, it is not displayed immediately on the site but is placed in a queue for moderation, the process of manual approval or deletion by the blog’s administrator. You can control which comments get held for moderation on your Discussion Settings screen, which is accessible at Settings → Discussion. If you would like every comment to be held for moderation, check “An administrator must approve the comment,” listed under the section called “Before a comment appears”. If you would like to send suspicious comments to the moderation queue, while letting innocent comments through, you will need to specify a set of rules for determining which comments are suspicious. The first option is to hold comments for moderation if they contain an unusually large number of hyperlinks. Most normal comments contain at most one or two links while spam comments often have a large number. Look at your own comments and set this to a value that makes sense for your audience. If you do not wish any links to appear in comments, set it to 1. Many people set it to 2 to allow commenters to provide helpful links in their comments while weeding out mass‐link comment spam. The second option is to specify a set of moderation keys which, if present in any part of the comment, will cause it to be held for moderation. These keys are specified one per line in the large text area, which is blank by default. Moderation keys can include common spam words, swear words, IP addresses, and Regular Expressions (names, phrases, etc.). When you add a new moderation key, it’s a good idea to test its validity by checking previous comments. Simply use the link entitled “Check past comments against moderation list,” which is located underneath the text box containing moderation keys. This asks WordPress to check previous comments and tell you which ones would be flagged for moderation under your new set of keys. The box marked Comment blacklist works in exactly the same way as the comment moderation box, except that comments that match these words will be deleted immediately and without notification. So be careful! Genuine comments could be deleted without you ever knowing they were there. Adding moderation keys or blacklist keys can help reduce the amount of spam comments you get, but be careful! If you include words that someone uses legitimately, the comments will be held or deleted. For example, you may have entered “viagra” as a key, assuming only spammers would include that word in comments. However, a friend or regular reader may use the word innocently in the context of responding to a post you’ve made or making a joke. Comments can also be held or deleted because part of a word matches. For example, if you’ve entered a the word “xnsd” because it is a spam word, swear word, or the name of an annoying commenter (yes, this is a fake word; no one can be offended by fake profanity), you’ll be protected from comments that include “xnsd” in the author name or comment body. However, if someone includes “aklxnsdhw,” which is not a word that should be screened, their comment will be held or deleted because it contains the objectionable string “xnsd” even though it is not objectionable in this other word. Because of this, it’s a good idea not to use regular expressions in the blacklist (as opposed to the moderation list) unless you are very sure that HTTP://EDUCHALK.ORG: 88
HTTP://EDUCHALK.ORG
there is no possible way it could prevent legitimate comments from being shown. Once a comment has been deleted, it cannot be retrieved. Comment Spam If you’ve been on the internet for any amount of time you’re probably familiar with “spam” in your e‐
mail inbox. For the uninitiated, spam is an unsolicited commercial message, or something you didn’t ask for trying to sell you something. So what does this have to do with blogs? Just as you can get spam messages in your inbox, people will leave spam comments on your blog. However, unlike e‐mail spam where the target is you, comment spam generally targets search engines. Why on earth would a spammer target a search engine on your blog? Let’s start from the beginning. Several years ago Google pioneered a search technique called PageRank. In addition to looking at the content of a page, PageRank also looks at who links to a page and what that link says. This technology is what made Google very good at returning relevant results and made it the most popular search engine today. Because their ranking system relies so heavily on PageRank people can sometimes game the system in what’s called “Google Bombing.” A Google bomb is when a large number of different websites link to a page with the same link text to influence the ranking of that page for a search term. This brings us back to the spammers. A spammer might have a site that sells viagra and wants to be at the top of a search for viagra on Google, so to create the effect of a Google bomb they leave comments on hundreds or thousands of weblogs linking to their site with the link text “viagra”. They don’t really care if you see it, in fact they’d rather you didn’t because you would delete it, they just want the search engine to see it when they index your page. Fighting Comment Spam Comment Moderation is very effective in addressing unwanted comments. The best defense against comment spam is just watching your comments. Selecting Comments from the main menu will take you to a screen that shows a listing of the latest comments on any post and you can quickly scan the comment activity on your site. The faster you respond to comment spam on your site, the less likely the spammers will return. The Akismet plugin that is bundled with the WordPress install, is highly effective at combating comment spam because it taps into a wide community of bloggers reporting comment spammers. If you decide to activate Akismet, please be sure that when you click “Mark as Spam” on an incoming comment you truly believe it is spam. If it’s just uninteresting or you dislike what the author had to say, click Delete instead, so that the author isn’t marked as a spammer in the Akismet system. Stealth Spam A new technique is the spammers will leave a perfectly normal‐looking comment except for the commenter’s URI or name. The best way to watch out for this is to visit the URIs of people who leave comments on your blog. (This is a good practice anyway.) If one looks suspicious, either delete the comment entirely or leave the comment and delete the URI. Another “stealth spam” tactic is to use a div‐tag around a bundle of hundreds of links. This becomes more and more common because many HTTP://EDUCHALK.ORG: 89
HTTP://EDUCHALK.ORG
types of software display the given HTML tags directly and not the HTML code. To avoid this the software must strip out the HTML tags while inserting the comment into the database. HTTP://EDUCHALK.ORG: 90
HTTP://EDUCHALK.ORG
Chapter 7: Design and Layout About Themes WordPress Themes use a combination of template files, template tags, and CSS style sheets to generate the visual structure and design of your site. Template Files Template files are the building blocks which come together to create your site. In the WordPress Theme structure, the header, sidebar, content, and footer are all contained within individual files. They join together to create your page. This allows you to customize the building blocks. For example, in the Default WordPress Theme, the multi‐post view found on the front page, category, archives, and search web pages on your site, the sidebar is present. Click on any post, you will be taken to the single post view and the sidebar will now be gone. You can choose which parts and pieces appear on your page, and customize them individually, allowing for a different header or sidebar to appear on all pages within a specific category. And more. For a more extensive introduction to Templates, see Stepping Into Templates. Template Tags Template tags are the bits of code which provide instructions and requests for information stored within the WordPress database. Some of these are highly configurable, allowing you to customize the date, time, lists, and other elements displayed on your website. You can learn more about template tags in Stepping Into Template Tags. CSS Style Sheets This is where it all comes together. On every template file within your site, there are XHTML tags and CSS references wrapped around your template tags and content. In the style sheet within each Theme are commands for the page’s structure. Without these instructions, your page would simply look like a long typed page. With these instructions, you can move the building block structures around, making your header very long and filled with graphics or photographs, or simple and narrow. Your site can “float” in the middle of the viewer’s screen with space on the left and right, or stretch across the screen, filling the whole page. Your sidebar can be on the right or left, or even start midway down the page. How you style your page is up to you. But the instructions for styling are found in the style.css file within each Theme folder. Selecting the Active Theme WordPress supplies two default themes (Kubrick and Classic) for your initial use. You can switch between these two themes, customize them, add a new theme, or create your own. Themes are accessed through Appearance → Themes, which takes you to a screen that shows you the currently active theme at the top, and other available themes below. From the Available Themes section, click HTTP://EDUCHALK.ORG: 91
HTTP://EDUCHALK.ORG
on theme title (or theme screenshot) for the theme you wish to activate. A preview of the theme will be shown; to activate the theme, click the “Activate [Theme Name]” link in the top right. Your selection should immediately become active. Custom Headers Some themes include the option to adjust the header colors or background image. For example, Kubrick allows you to select colors for the header. If you have a theme activated that has this functionality, a submenu item will appear in the Appearance menu that gives you access to this level of customization. In the case of Kubrick, clicking this submenu item will take you to a screen where you can choose the colors of the background header gradient as well as the font colors. If the color selector has been opened, close it to access advanced options for the theme header. Some themes also will allow you to upload images for use in a custom header. If you are using a theme that does not include the option to customize your header, that submenu item will not be displayed in the Appearance menu. HTTP://EDUCHALK.ORG: 92
HTTP://EDUCHALK.ORG
Uploading a New Theme There are many themes available for download that will work with your WordPress installation. You can browse available themes at the official WordPress Theme Repository. Themes in the repository have been checked and inspected, and are free for downloading. The site features the ability to search by type and style, and offers a demonstration of the page view elements of the Theme. Alternately, you can search for themes elsewhere using a search a search engine. When downloading a theme from an unofficial source, it’s a good idea to do a search on that theme to see what community members have said about it. You’ll want to be careful and stick with themes and theme authors that have a good online reputation, or you might unwittingly wind up downloading spyware or spam onto your blog. That said, there are far more awesome themes out there than malicious ones, so do look around to find a theme that you love. Once you’ve found the theme you want to use, you can install it via the WordPress admin area, through FTP or cPanel. If the theme that you are installing provides instructions, be sure to read through and follow those instructions for the successful installation of the theme. It is recommended that theme developers provide installation instructions for their own themes, because themes can provide special optional functionality that may require more steps than the basic installation steps covered here. If your theme does not work after following any provided instructions, please contact the theme author for help. Adding Themes via the WordPress Interface Select Appearance/Add New Theme HTTP://EDUCHALK.ORG: 93
HTTP://EDUCHALK.ORG
Search for a theme using the available search features Click “Install” and then at the next screen click “Install Now” To use the theme on your site, click Activate. HTTP://EDUCHALK.ORG: 94
HTTP://EDUCHALK.ORG
Adding Themes via FTP To add a new theme to your WordPress installation via FTP, follow these basic steps: 1. Download the theme archive and extract the files it contains. You may need to preserve the directory structure in the archive when extracting these files. Follow the guidelines provided by your theme author. 2. Using an FTP client to access your host web server, create a directory to contain your theme in the wp‐content/themes directory provided by WordPress. For example, a theme named Test should be in wp‐content/themes/test. Your theme may provide this directory as part of the archive. 3. Upload the theme files to the new directory on your host server. 4. Follow the instructions above for activating the new theme. Adding New Themes in cPanel If your host offers the cPanel control panel, and the theme files are in a .zip or .gz archive follow these instructions: Note This assumes the theme you download is a compressed (.zip) file and the files in the .zip file are in their “named” folder. 1. Download the theme .zip file to your local machine. 2. In cPanel File Manager, navigate to your themes folder. If you have WordPress installed in its own folder called WordPress, you would navigate to public_html/WordPress/wp‐
HTTP://EDUCHALK.ORG: 95
HTTP://EDUCHALK.ORG
content/themes and if WordPress is installed in your web‐root folder you would navigate to public_html/wp‐content/themes. 3. Once you’ve navigated to the themes folder in cPanel File Manager, click on Upload file(s) and upload that zip file you saved in Step 1. 4. Once the .zip file is uploaded, click on the .zip file name in cPanel, then in the panel to the right, click on Extract File Contents, and that .zip file will be uncompressed. 5. Follow the instructions above for activating the new theme. High Quality Installing a Theme Video: http://educhalk.org/blog/?p=91 Modifying Themes Template files are the building blocks which come together to create your site. In the WordPress Theme structure, the header, sidebar, content, and footer are all contained within individual files. They join together to create your page. This allows you to customize the building blocks. For example, in the Default WordPress Theme, the multi‐post view found on the front page, category, archives, and search web pages on your site, the sidebar is present. Click on any post, you will be taken to the single post view and the sidebar will now be gone. You can choose which parts and pieces appear on your page, and customize them individually, allowing for a different header or sidebar to appear on all pages within a specific category. If you want to make changes to your theme, such as modifying the CSS to change the color scheme or modifying the you can do so using the built‐in Theme Editor, accessible from the Appearance menu. The editor allows you to edit the markup of the files listed to the left. Click on a file name to load it in the editor. Save to have your changes applied to the theme. You will need to know how to write CSS, HTML, and/or PHP to modify theme files. The following are the files typically included within a Theme. •
404 Template = 404.php •
Archive Template = archive.php •
Archive Index Page = archives.php •
Comments Template = comments.php •
Footer Template = footer.php •
Header Template = header.php •
Links = links.php •
Main Template = index.php •
Page Template = page.php •
Popup Comments Template = comments‐popup.php HTTP://EDUCHALK.ORG: 96
HTTP://EDUCHALK.ORG
•
Post Template = single.php •
Search Form = searchform.php •
Search Template = search.php •
Sidebar Template = sidebar.php •
Stylesheet = style.css For more information on using the Theme Editor, see the Codex. CSS CSS stands for Cascading Style Sheets. It allows you to store style presentation information (like colors and layout) separate from your HTML structure. This allows precision control of your website layout and makes your pages faster and easier to update. On every template file within your site, there are XHTML tags and CSS references wrapped around your template tags and content. In the style sheet within each Theme are commands for the page’s structure. Without these instructions, your page would simply look like a long typed page. With these instructions, you can move the building block structures around, making your header very long and filled with graphics or photographs, or simple and narrow. Your site can “float” in the middle of the viewer’s screen with space on the left and right, or stretch across the screen, filling the whole page. Your sidebar can be on the right or left, or even start midway down the page. How you style your page is up to you, and the instructions for styling are found in the style.css file within each Theme folder. Template Tags Template tags are the bits of code which provide instructions and requests for information stored within the WordPress database. Some of these are highly configurable, allowing you to customize the date, time, lists, and other elements displayed on your website. If you are interested in using Template Tags to change your site, please refer to the full list of Template Tags available in the Codex. Creating Your Own Theme If you want to create your own design from scratch and don’t want to work from an existing theme’s code, you will need to create your own theme. You can find directions on how to do this in the Codex. If you run into problems, try the support forums for advice and help. Do a search of the forums before posting your question, as chances are someone else has had the same problem before. When you have finished creating your theme, upload it, activate it, and enjoy the fruits of your labor. Consider giving back to the WordPress community by releasing your theme as open source. The universe will reward you with many karmic blessings. HTTP://EDUCHALK.ORG: 97
HTTP://EDUCHALK.ORG
Sidebar Widgets Themes usually have at least 1 or 2 sidebars. Sidebars are the narrow columns to the left or right of your blog posts, or in some themes, they appear as rows below the main posts column. Each section in the sidebar is known as a “Widget” that you can add or remove, move up or down in a sidebar, move between sidebars (in themes that have more than one), and configure. To manage widgets, go to Appearance → Widgets in the main menu. You should see two columns: Current Widgets and Available Widgets. Note If your current active Theme is not widget‐compatible, meaning the theme is not coded for widgets, you will see the message, “You are seeing this message because the theme you are currently using isn’t widget‐aware, meaning that it has no sidebars that you are able to change. For information on making your theme widget‐aware, please follow these instructions.” Adding Widgets Go to Appearance → Widgets. You will see two sections: Available Widgets and Current Widgets. In the Current Widgets section, decide which sidebar you want to show/configure. Note: The default Kubrick theme has just one sidebar defined. Other themes might have more than one sidebar defined, and if so, you’ll be able to select it from the Current Widgets drop‐down menu. Each of the available widgets is described below. Find a widget you want to add from the list of Available Widgets. Click on “Add” to add the widget to that sidebar, and click “Save Changes” to confirm the addition. Note that some widgets have default configurations and will begin to work immediately, while others require configuration details to be entered before they will display correctly on your blog. Also, some themes come with certain widgets pre‐included in the theme. Once you add a new widget, the default widgets that had been showing before may be gone. Don’t worry, you just need to re‐add them on the Widgets screen. The theme is assuming that since you’ve started adding widgets yourself, you no longer want to use the defaults. If you want to use the defaults in addition to new selections, just make a note of the default widgets and add them again. HTTP://EDUCHALK.ORG: 98
HTTP://EDUCHALK.ORG
Configuring Widgets In the Current Widgets section, you can edit both the content of individual widgets and the order in which they are displayed in your blog sidebars. To edit the details of a particular widget, such as the title to display in the sidebar or the number of items to display, click the Edit link to reveal a configuration view. Enter the new details, then click the Done button. Click the Save Changes button to confirm the changes you’ve made. When you have more than one widget in your list of Current Widgets, you can determine the order in which they will appear on you blog. Click on the widget title and hold the left mouse button down, then drag the widget bar up or down to the location desired. At that point release the mouse button. That process is called drag‐and‐drop. Click “Save Changes” to confirm your new layout. Removing a Widget In the Current Widgets section, go to the sidebar that contains the widget you want to remove. Click “Edit” next to that widget. The widget title will expand to the configuration view. Click “Remove” in the lower right, then click “Save Changes” to confirm the deletion. HTTP://EDUCHALK.ORG: 99
HTTP://EDUCHALK.ORG
Chapter 8: Plugins About Plugins The core of WordPress is designed to be lean, to maximize flexibility and minimize code bloat. Plugins are like mini‐applications that hook into WordPress to extend its functionality by offering custom functions and features. Plugins are developed separately from core by thousands of developers so that each user can tailor their site to their specific needs. You can use plugins for a wide range of functionality, including front‐end things like adding an event calendar or shopping cart to your blog, or for back‐end things like changing the way the administration panel looks or how you manage tags. Default Plugins The following plugins are included with the WordPress core distribution: Akismet Akismet checks your comments against the Akismet web service to see if they look like spam or not. You can review the spam it catches under “Manage” and it automatically deletes old spam after 15 days. Hello Dolly This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong. Hello, Dolly. This is, by the way, the world’s first official WordPress Plugin. When enabled you will randomly see a lyric from “Hello, Dolly” in the upper right of your Administration Panel. HTTP://EDUCHALK.ORG: 100
HTTP://EDUCHALK.ORG
Finding and Installing Plugins Built‐In Plugin Browser The official plugin repository at wordpress.org includes many thousands of plugins to choose from, and has a rating system so you can see which plugins other users’ value the most. You can search for plugins by keyword or author, or browse by tags. It’s recommended that plugin authors include screenshots and a description of their plugins when submitting to the repository, but because plugins are developed by so many different people, there will be varying amounts of information available for each one. Since WordPress 2.7, plugins in the official repository can now be browsed and installed from within the administration panel. In the left‐hand menu, go to Plugins → Add New. You will be given the option to search by keyword or browse the tag cloud of popular plugin tags. If you are not looking for a specific plugin, try browsing by tag, as it tends to yield more results than keyword search in some cases. For example, if you are looking for more features around commenting, such as the ability to include video comments, you would click on the "comments" tag, which would lead you to a list of all plugins tagged with the word comments. After looking through the list and finding one that sounds good, just click on Install. Depending on your server setup, the plugin with either automatically install, or you will be asked for your FTP information. If you are asked for this information, simply fill in and submit the form, and then your selected plugin will install itself. Once the plugin has been installed, you will need to activate it. Go to Plugins → Installed and you will see a list of active and inactive plugins. Find the plugin you just installed, and click on the Activate link next to it. Voila! Your plugin is now activated. HTTP://EDUCHALK.ORG: 101
HTTP://EDUCHALK.ORG
Other Ways to Find Plugins In addition to the official repository that is accessible from your Administration Panel, plugins also can be found at the WordPress Plugin Database at wp‐plugins.net. Not all WordPress Plugins make it into these repositories. Try searching the web for “WordPress Plugin” and the keywords for the type of functionality you are seeking. When obtaining plugins from a source other than the official repository, you will need to download the plugin and then ftp it to your server according to the author’s directions. Be safe! Before installing a plugin this way, check to see what people are saying online about the plugin to make sure the plugin is legitimate and won’t do anything sneaky on your blog. Compatibility Issues Plugins are meant to play nice, not only with the core of WordPress, but with other plugins. Most of the time, this is what happens, and users are able to install dozens of plugins (though the average is five) without any compatibility issues. Sometimes, though, a plugin’s code will get in the way of another plugin, causing compatibility issues. If your blog starts doing strange things, you may have plugin compatibility issues. Try deactivating all your plugins and activating them in various combinations until you find the culprit. If you find compatibility issues, please let the plugin authors know about it. Plugin Updates Plugin authors will sometimes update their plugins to fix bugs, add functionality, or to be compatible with a new version of WordPress (for example, a number of plugins needed to update their code to fit into the new navigational structure of WordPress 2.8). Plugins that are in the official repository will let you know when there is an update available. When you see a number appear next to Plugins in the left‐hand menu, that means there are plugin updates available. Just follow the instructions and updating your plugin will be as easy as installing it was. Managing Your Plugins If you wish to stop using a plugin, you have two choices. You can deactivate the plugin but keep it installed, allowing you to reactivate it later should you decide you want to start using it again, or you can uninstall the plugin and remove it from your system altogether. You can also activate currently inactive plugins. For any of these functions, go to “Plugins > Installed”, and click the appropriate link. Creating a Plugin If there’s something you wish you could do with your blog and you can’t find a plugin that includes that function, you might want to create one yourself. If you are proficient in PHP, you can learn about creating plugins in the Codex. If you’d like to collaborate with other developers, consider joining the wp‐hackers mailing list, or hop into the #WordPress‐dev IRC channel to find yourself some co‐
conspirators. If you are not a developer but wish someone else would make the plugin of your dreams, try posting it in our support forums. HTTP://EDUCHALK.ORG: 102
HTTP://EDUCHALK.ORG
Manually Installing a Plugin Video: http://educhalk.org/blog/?p=91 HTTP://EDUCHALK.ORG: 103
HTTP://EDUCHALK.ORG
Chapter 9: System Administration While this handbook does not delve into the more complex back end processes that run your blog, there are some system administration‐type tasks that you may need to tackle in the course of your regular use. Importing Files If you are coming to WordPress from another blogging platform, you may wish to import posts from your old blog. Instructions for most major platforms are now included in the WordPress Administration Panel. Go to Tools → Import and select your previous platform from the list. You will be given instructions on how to export your files from the old system, and will be able to import them into your WordPress blog. Exporting Files Conversely, should you need to move your posts from one WordPress blog to another, or should you decide to leave WordPress for another platform, you can export your files within the Administration Panel as well. Go to Tools → Export and follow the directions there. HTTP://EDUCHALK.ORG: 104
HTTP://EDUCHALK.ORG
File Permissions On computer file systems, different files and directories have permissions that specify who and what can read, write, modify and access them. This is important because WordPress may need access to write to files in your wp‐content directory to enable certain functions. All files should be owned by your user account on your web server, and should be writable by your username. Any file that needs write access from WordPress should be group‐owned by the user account used by the webserver. For example, you may have a user account that lets you FTP files back and forth to your server, but your server itself may run using a separate user, in a separate usergroup, such as dhapache or nobody. The file and folder permissions of WordPress should be the same for most users, depending on the type of installation you performed and the umask settings of your system environment at the time of install. Note If you installed WordPress yourself, you likely do not need to modify file permissions. Unless you are experiencing problems with permission errors, or you want to, you probably should not mess with this. For core WordPress files, all should be writable only by your user account. However, if you utilize mod_rewrite Permalinks or other .htaccess features you should make sure that WordPress can also write to your .htaccess file. If you want to use the built‐in theme editor, all files need to be group writable. Try using it before modifying file permissions, it should work. Some plugins require the /wp‐content folder be made writeable, but in such cases they will let you know during installation. In some cases, this may require assigning 755 permissions or higher (e.g. 777 on some hosts). The same is true for /wp‐content/cache and maybe /wp‐content/uploads Additional directories under /wp‐content should be documented by whatever plugin / theme requires them. Permissions will vary. HTTP://EDUCHALK.ORG: 105
HTTP://EDUCHALK.ORG
For more information on file permissions including directions for editing permissions using various methods, see the Codex. Backing Up Your Database and Files Your WordPress database contains every post, every comment and every link you have on your blog. If your database gets erased or corrupted, you stand to lose everything you have written. There are many reasons why this could happen and not all are things you can control, which is why it is essential to make regular backups of your data. There are two parts to backing up your WordPress site: Database and Files. You need to back up the entire site as well as your WordPress database. Your WordPress site consists of the following: •
WordPress Core Installation •
WordPress Plugins •
WordPress Themes •
Images and Files •
JavaScript, PHP, and other code/script files •
Additional Files and Static Web Pages All of these are used in various combinations to generate your website. The database contains your posts and a lot of data generated on your site, but it does not include the above elements that all come together to create the look and information on your site. These need to be saved. Full instructions for backing up your site and database are available in the Codex. If you have any questions about the backup process or run into problems, support is provided online at the Support Forums to help you through the process. High Quality Video on Backing Up WordPress: http://educhalk.org/blog/?tag=move Upgrading WordPress In WordPress 2.8, a built‐in upgrade function makes it easier than ever to upgrade your WordPress installation. Simply go to Tools > Upgrade in the main menu. You’ll be given the option to perform a one‐click upgrade or download the files. If you choose to perform the one‐click upgrade, you will be upgraded in mere moments. Some hosting setups do not support this function, so if you receive an error rather than a notice that the upgrade is complete, check to see if your host is compatible with the one‐click upgrade. A list of host compatibility has begun to be compiled in the Codex. If your host is not compatible with the automatic upgrade, you can still upgrade the old way. HTTP://EDUCHALK.ORG: 106
HTTP://EDUCHALK.ORG
Doing a Manual Upgrade For these instructions, it is assumed that your blog’s URL is http://example.com/wordpress/. Note that during the upgrade process access to your blog may not work for your visitors. Warning If you run into problems Upgrading WordPress with the three steps described here, you need to revert to your old version first before using the more detailed upgrade instructions from the Codex (i.e. restore the backup made in step 0). Even though you might not run into any errors with this process right away, you might run into problems later down the line. Then it may not be possible to revert far enough back to fix the problem without losing any recent changes. So, if you use Plugins and Themes other than the ones that come with the default WordPress installation, it is advisable to start over with the more detailed upgrade instructions. Step 1: Prepare •
Just in case something goes wrong, make sure you have a backup. •
Make sure the database user name registered to WordPress has permission to create, modify, and delete database tables. If you installed WordPress in the standard way, and nothing has changed since then, you are fine. •
Deactivate your plugins. A plugin might not be compatible with the new version, so it’s nice to check for new versions of them and deactivate any that may cause problems. You can reactivate plugins one‐by‐one after the upgrade. Step 2: Replace WordPress files •
Get the latest WordPress. Either download and extract it to your computer or download it directly to the server. •
As a reminder, to extract a tar.gz to a folder use this command, replacing (folder name) with the name of your folder: tar ‐xvzf latest.tar.gz ‐C ./(foldername) HTTP://EDUCHALK.ORG: 107
HTTP://EDUCHALK.ORG
•
Delete your old wp‐includes and wp‐admin directories. •
Copy the new WordPress files to your server, overwriting old files in the root, except perhaps the wp‐content folder (see "NOTE" below). You may use FTP or shell commands to do so. Note that this means all the files, including all the files in the root directory as well. If you use the default or classic theme and have customized it, then you can skip that theme. Note The wp‐content folder requires special handling, as do the plugins and themes folders. You should copy over the contents of these folders, not the entire folder. In some cases, copying the entire folder may overwrite all your customizations and added content. Also take care to preserve the content of the wp‐config.php file in the root directory. This file contains current settings for your existing installation, e.g. database sign‐in information. Occasionally new versions of WordPress adds statements to this file. (E.g. in version 2.5 the SECRET_KEY variable was added, see Extended upgrade instructions). Compare your existing file with the new installation file which is named wp‐config‐sample.php . Either transfer your settings to the sample‐file and rename it to wp‐config.php or copy the new statements from the sample file into your current file. Step 3: Upgrade your installation Visit your main WordPress admin page at /wp‐admin . You may be asked to login again. If a database upgrade is necessary at this point, WordPress will detect it and give you a link to a URL like http://example.com/wordpress/wp‐admin/upgrade.php. Follow that link and follow the instructions. This will update your database to be compatible with the latest code. If you fail to do this step, your blog might look funny. If you have caching enabled, your changes will appear to users more immediately if you clear the cache at this point (and if you don’t, you may get confused when you see the old version number in page footers when you check to see if the upgrade worked). Your WordPress installation is successfully upgraded. High Quality Upgrade Videos: http://educhalk.org/blog/?tag=upgrade Moving WordPress There are times when you need to move WordPress around within your server, and times when you need to move WordPress from one server to another. You don’t need to reinstall. WordPress is flexible enough to handle all of these situations. Easy answer for most installations: •
If database and URL remains the same, you can move by just copying your files and database. •
If database name or user changes, edit wp‐config.php to have the correct values. •
If you want to test before you switch, you must temporarily change siteurl and home in the database table wp_options (through phpMyAdmin or similar). HTTP://EDUCHALK.ORG: 108
HTTP://EDUCHALK.ORG
If you had any kind of rewrites (permalinks) setup you must disable .htaccess and reconfigure permalinks when it goes live. High Quality Moving WordPress Videos: http://educhalk.org/blog/?tag=move HTTP://EDUCHALK.ORG: 109
HTTP://EDUCHALK.ORG
Chapter 10: Working with WordPress Templates Stepping Into Templates Template files are the building blocks of your WordPress site. They fit together like the pieces of a puzzle to generate the web pages on your site. Some templates (the header and footer template files for example) are used on all the web pages, while others are used only under specific conditions. A traditional web page consists of two files: •
The XHTML page to hold the structure and content of the page and •
the CSS Style Sheet which holds the presentation styles of the page. In WordPress, the (X)HTML structure and the CSS style sheet are present but the content is generated "behind the scenes" by various template files. The template files and the style sheet are stored together as a WordPress Theme. To learn more about creating Themes, read Theme Development. The WordPress Page Structure A simple WordPress web page structure is made up of three basic building "blocks": a header, the content, and a footer. Each of these blocks is generated by a template file in your current WordPress Theme. •
The header contains all the information that needs to be at the top — i.e. inside the <head> tag — of your XHTML web page, such as the <doctype>, <meta> tags and links to style sheets. It also includes the opening <body> tag and the visible header of your blog (which typically includes the title of your site, and may also include navigation menus, a logo bar, the description of your site, etc.). •
The content block contains the posts and pages of your blog, i.e. the "meat" of your site. •
The footer contains the information that goes at the bottom of your page, such as links to other Pages or categories on your site in a navigation menu, copyright and contact information, and other details. Basic Template Files To generate such a structure within a WordPress Theme, start with an index.php template file in your Theme's directory. This file has two main functions: •
Include or "call" the other template files •
Include the WordPress Loop to gather information from the database (posts, pages, categories, etc.) HTTP://EDUCHALK.ORG: 110
HTTP://EDUCHALK.ORG
For our simple structure, we only need to include two other template files: the header and the footer. These must be named header.php and footer.php. The Template Tags that include them look like this: <?php get_header(); ?> <?php get_footer(); ?> In order to display the posts and pages of your blog (and to customize how they are being displayed), your index.php file should run the WordPress Loop between the header and footer calls. More Complex Page Structures Many WordPress themes include one or several sidebars that contains navigation features and more information about your website. The sidebar is generated by a template file called sidebar.php. It can be included in your index.php template file with the following template tag: <?php get_sidebar(); ?> Where's the Beef? Notice that we have not included a template tag to "get" the content of our web page. That is because the content is generated in the WordPress Loop, inside index.php. Also note that the Theme's style sheet determines the look and placement of the header, footer, sidebar, and content in the user's browser screen. For more information on styling your WordPress Themes and web pages, see Blog Design and Layout. Template Files Within Template Files You have seen how WordPress includes standard template files (header, footer, and sidebar) within the index.php template file. You can also include other template files within any of your template files. For example, sidebar.php might contain a template file that generates a search form — searchform.php. Because this is not one of WordPress's standard template files, the code to include it is a little different: <?php include (TEMPLATEPATH . '/searchform.php'); ?> Instead of using a WordPress template tag to include the file, we'll use the PHP command include, which needs to know where the file is located (TEMPLATEPATH is a special variable within WordPress that points to the theme's template file directory). Most WordPress Themes include a variety of template files within other templates to generate the web pages on the site. The following template files are typical for the main template (index.php) of a WordPress site: •
header.php HTTP://EDUCHALK.ORG: 111
HTTP://EDUCHALK.ORG
•
o
theloop.php (The Content) o
wp‐comments.php sidebar.php o
•
searchform.php footer.php However, this structure can be changed. For instance, you could put the search form in your header. Perhaps your design does not need a footer, so you could leave that template out entirely. Special Template Files WordPress features two core page views of web pages in a WordPress site. The single post view is used when the web pages displays a single post. The multi‐post view lists multiple posts or post summaries, and applies to category archives, date archives, author archives, and (usually) the "normal" view of your blog's home page. You can use the index.php template file to generate all of these types of pages or rely on WordPress' template hierarchy to choose different template files depending on the situation. The WordPress Template Hierarchy answers the following question: •
What template file will WordPress use when a certain type of page is displayed? WordPress automatically recognizes template files with certain standard names and uses them for certain types of web pages. For example, when a user clicks on the title of a blog post, WordPress knows that they want to view just that article on its own web page. The WordPress template hierarchy will use the single.php template file rather than index.php to generate the page — if your Theme has a single.php file. Similarly, if the user clicks on a link for a particular category, WordPress will use the category.php template if it exists; if it doesn't, it looks for archive.php, and if that template is also missing, WordPress will go ahead and use the main index.php template. You can even make special template files for specific categories (see Category Templates for more information). Template File Tips Tracking Opening and Closing Tags Template files include the use of XHTML tags and CSS references. HTML elements and CSS references can cross template files, beginning in one and ending in another. For example, the html and body HTML elements typically begin in header.php and end in footer.php. Most WordPress themes make use of HTML div elements, which can also span several files. For instance, the main div for the page content might start in header.php and end in either index.php or single.php. Tracking down where an HTML element begins and ends can get complicated if you are developing, designing, or modifying a Theme. Use comments to note in the template files where a large container tag opens and where it closes so you can track which div is which at the end of different sections. HTTP://EDUCHALK.ORG: 112
HTTP://EDUCHALK.ORG
Test Template Files Under Different Views If you have made changes to the comments, sidebar, search form, or any other template file, make sure you test them using different web page views (single post, different types of archives, and pages). Comment Deviations If you are designing Themes for public release, keep in mind that someone who downloads your Theme will probably want to modify it slightly for their own use. So, it is helpful if you make notes in your template files where you have made changes from the logic of the Default and/or Classic Themes. It is also a good idea to add comments in your Theme's main style file if you have style information elsewhere (such as in your header.php file or in HTML tags). Close the Tag Door Behind You If you start a HTML tag or div in one template file, make sure you include the closing tag in another template file. The WordPress Forum gets a lot of questions about "what happened to my theme" when they remove the footer template file without closing the tags that began in the header template file. Track down your tags and make sure they are closed. (A good way to verify that this is correct is to test your single and archive page views with an HTML validator). CSS Styles in Templates You are free to use whatever HTML and CSS tags and styles you like in your templates. However, you are encouraged to follow the standard WordPress theme structure (see Site Architecture 1.5). This will make your Themes more understandable to your users. Template Hierarchy Introduction WordPress Templates fit together like the pieces of a puzzle to generate the web pages on your WordPress site. Some templates (the header and footer template files for example) are used on all the web pages, while others are used only under specific conditions. Since the introduction of Themes in WordPress v1.5, Templates have become more and more configurable. In order to develop WP themes, a proper understanding of the way WordPress selects template files to display the various pages on your blog is essential. If you seek to customize an existing WordPress theme, this article aims to help you decide which template file needs editing. Using Conditional Tags WordPress provides more than one way to match templates to query types. WordPress Theme developers can also use Conditional Tags to control which templates will be used to generate a certain HTTP://EDUCHALK.ORG: 113
HTTP://EDUCHALK.ORG
page. Some WordPress Themes may not implement all template files described here. Some Themes use conditional tags to load other template files. The General Idea WordPress uses the Query String — information contained within each link on your web site — to decide which template or set of templates will be used to display the page. First, WordPress matches every Query String to query types — i.e. it decides what type of page (a search page, a category page, the home page etc.) is being requested. Templates are then chosen — and web page content is generated — in the order suggested by the WordPress Template hierarchy, depending upon what templates are available in a particular WordPress Theme. WordPress looks for template files with specific names in the current Theme's directory and uses the first matching template file listed under the appropriate query section below. With the exception of the basic index.php template file, Theme developers can choose whether they want to implement a particular template file or not. If WordPress cannot find a template file with a matching name, it skips down to the next file name in the hierarchy. If WordPress cannot find any matching template file, index.php (the Theme's home page template file) will be used. Examples If your blog is at http://example.com/wp/ and a visitor clicks on a link to a category page like http://example.com/wp/category/your‐cat/, WordPress looks for a template file in the current Theme's directory that matches the category's ID. If the category's ID is 4, WordPress looks for a template file named category‐4.php. If it is missing, WordPress next looks for a generic category template file, category.php. If this file does not exist either, WordPress looks for a generic archive template, archive.php. If it is missing as well, WordPress falls back on the main Theme template file, index.php. If a visitor goes to your home page at http://example.com/wp/, WordPress first determines whether it has a static front page. If a static front page has been set, then WordPress loads that page according to the page template hierarchy. If a static front page has not been set, then WordPress looks for a template file called home.php and uses it to generate the requested page. If home.php is missing, WordPress looks for a file called index.php in the active theme's directory, and uses that template to generate the page. The Template Hierarchy in Detail The following sections describe the order in which template files are being called by WordPress for each query type. Home Page display HTTP://EDUCHALK.ORG: 114
HTTP://EDUCHALK.ORG
•
home.php •
index.php Single Post display •
single.php •
index.php Page display •
pagetemplate.php ‐ Where pagetemplate.php is the Page Template assigned to the Page. •
page.php •
index.php Category display •
category‐slug.php ‐ If the category's slug were news, WordPress would look for category‐
news.php •
category‐id.php ‐ If the category's ID were 6, WordPress would look for category‐6.php •
category.php •
archive.php •
index.php Tag display •
tag‐slug.php ‐ If the tag's slug were some tag, WordPress would look for tag‐sometag.php •
tag.php •
archive.php •
index.php Author display •
author.php •
archive.php •
index.php Date display •
date.php HTTP://EDUCHALK.ORG: 115
HTTP://EDUCHALK.ORG
•
archive.php •
index.php Search Result display •
search.php •
index.php 404 (Not Found) display •
404.php •
index.php Attachment display •
MIME_type.php ‐ it can be any MIME type (image.php, video.php, audio.php, application.php or any other). •
attachment.php •
single.php •
index.php The template hierarchy functions are located in wp‐includes/theme.php. Template Tags/Anatomy of a Template Tag Introduction This document provides a brief examination of the animal known as the WordPress template tag, to help those who may be new to WordPress and PHP understand what template tags are and how they're used. A WordPress template tag is made up of three components: •
A PHP code tag •
A WordPress function •
Optional parameters PHP code tag WordPress is built with the PHP scripting language. Though you certainly don't need to be a PHP developer to use it, knowing a little about the language can go a long way in getting the most out of WordPress. Here we provide a tiny bit of that PHP knowledge: HTTP://EDUCHALK.ORG: 116
HTTP://EDUCHALK.ORG
<?php ?> The above shows the opening (<?php) and closing (?>) tag elements used to embed PHP functions and code in a HTML document, i.e. web page. There are a number of ways to embed PHP within a page, but this is the most "portable," in that it works on nearly every web server—as long as the server supports PHP (typically a document's filename also needs to end with the extension .php, so the server recognizes it as a PHP document). Anything within this tag is parsed and handled by the PHP interpreter, which runs on the web server (the interpreter is the PHP engine that figures out what the various functions and code do, and returns their output). For our purposes, the PHP tag lets you place WordPress functions in your page template, and through these generate the dynamic portions of your blog. WordPress function A WordPress or template function is a PHP function that performs an action or displays information specific to your blog. And like a PHP function, a WordPress function is defined by a line of text (of one or more words, no spaces), open and close brackets (parentheses), and typically a semi‐colon, used to end a code statement in PHP. An example of a WordPress function is: the_ID(); the_ID() displays the ID number for a blog entry or post. To use it in a page template, you slip it into the PHP tag shown above: <?php the_ID(); ?> This is now officially a WordPress template tag, as it uses the PHP tag with a WordPress function. Optional parameters The final item making up a template tag is one you won't necessarily make use of unless you want to customize the tag's functionality. This, or rather these, are the parameters or arguments for a function. Here is the template function bloginfo(), with the show parameter being passed the 'name' value: <?php bloginfo('name'); ?> If your blog's name is Super Weblog, the bloginfo() template tag, when using 'name' as the show parameter value, will display that name where it's embedded in your page template. Not all template tags accept parameters (the_ID() is one), and those which do accept different ones based on their intended use, so that the_content() accepts parameters separate from those which get_calendar() can be passed. HTTP://EDUCHALK.ORG: 117
HTTP://EDUCHALK.ORG
Template Tags Template tags are used within your blog's Templates to display information dynamically or otherwise customize your blog, providing the tools to make it as individual and interesting as you are. Below is a list of the general user tags available in WordPress, sorted by function‐specific category. Include tags •
get_header •
get_sidebar •
get_search_form •
comments_template •
get_footer Blog info tags •
bloginfo •
bloginfo_rss •
get_bloginfo •
get_bloginfo_rss Lists & Dropdown tags •
wp_list_authors •
wp_list_categories •
wp_list_pages •
wp_list_bookmarks •
wp_list_comments •
wp_get_archives •
wp_page_menu •
wp_dropdown_pages •
wp_dropdown_categories •
wp_dropdown_users HTTP://EDUCHALK.ORG: 118
HTTP://EDUCHALK.ORG
Login/Logout tags •
is_user_logged_in •
wp_login_url •
wp_logout_url •
wp_lostpassword_url •
wp_registration_url •
wp_logout •
wp_loginout •
wp_register Post tags •
the_ID •
the_title •
the_title_rss •
the_title_attribute •
single_post_title •
the_content •
the_content_rss •
the_excerpt •
the_excerpt_rss •
wp_link_pages •
posts_nav_link •
next_post_link •
next_posts_link •
previous_post_link •
previous_posts_link •
next_image_link HTTP://EDUCHALK.ORG: 119
HTTP://EDUCHALK.ORG
•
previous_image_link •
sticky_class •
the_category •
the_category_rss •
the_tags •
the_meta Comment tags •
wp_list_comments •
comments_number •
comments_link •
comments_rss_link •
comments_popup_script •
comments_popup_link •
comment_ID •
comment_id_fields •
comment_author •
comment_author_link •
comment_author_email •
comment_author_email_link •
comment_author_url •
comment_author_url_link •
comment_author_IP •
comment_type •
comment_text •
comment_excerpt •
comment_date HTTP://EDUCHALK.ORG: 120
HTTP://EDUCHALK.ORG
•
comment_time •
comment_form_title •
comment_author_rss •
comment_text_rss •
get_avatar •
permalink_comments_rss •
comment_reply_link •
cancel_comment_reply_link •
previous_comments_link •
next_comments_link •
paginate_comments_links Category tags •
the_category •
the_category_rss •
single_cat_title •
category_description •
wp_dropdown_categories •
wp_list_categories Tag tags •
the_tags •
tag_description •
single_tag_title •
wp_tag_cloud •
wp_generate_tag_cloud Author tags •
the_author HTTP://EDUCHALK.ORG: 121
HTTP://EDUCHALK.ORG
•
the_author_link •
the_author_posts •
the_author_posts_link •
the_author_meta •
wp_list_authors •
wp_dropdown_users Date and Time tags •
the_time •
the_date •
the_date_xml •
the_modified_time •
the_modified_date •
the_modified_author •
single_month_title Edit Link tags •
edit_post_link •
edit_comment_link •
edit_tag_link •
edit_bookmark_link •
Permalink tags •
permalink_anchor •
get_permalink •
the_permalink •
permalink_single_rss Links Manager tags •
wp_list_bookmarks HTTP://EDUCHALK.ORG: 122
HTTP://EDUCHALK.ORG
•
get_bookmarks •
get_bookmark •
get_bookmark_field Trackback tags •
trackback_url •
trackback_rdf Title tags •
wp_title •
single_post_title •
single_cat_title •
single_tag_title •
single_month_title •
the_search_query Query tags •
get_posts •
query_posts HTTP://EDUCHALK.ORG: 123
HTTP://EDUCHALK.ORG
Chapter 11: Working with Images A picture says more than a thousand words. WordPress makes it easy for you to add images to your WordPress site. You can upload them directly from within WordPress by using the built‐in file uploading utility in the post screen. Or you could use any FTP Client software to upload many images to your WordPress site. The Quicktag buttons feature an image link, making it easy to link to images from within your post as you write it. If you used the inline upload feature, your picture will be in the /wp‐content/uploads folder, unless you've specified another folder on the Miscellaneous admin panel. WordPress can now (within the posting page) resize images and create thumbnails. There are also photo galleries that can show many images without adding each one separately to a page. Styling Images in WordPress Current versions of WordPress now have image alignment built‐in. WordPress adds CSS classes to align the image to the right, left, and center of a paragraph, so the text will wrap around the image. In order to take advantage of these new CSS classes for image alignment and the text wrapping around the image, the WordPress Theme must include the following in the style.css found in the WordPress Theme directory. img.alignright {float:right; margin:0 0 1em 1em} img.alignleft {float:left; margin:0 1em 1em 0} img.aligncenter {display: block; margin‐left: auto; margin‐right: auto} a img.alignright {float:right; margin:0 0 1em 1em} a img.alignleft {float:left; margin:0 1em 1em 0} a img.aligncenter {display: block; margin‐left: auto; margin‐right: auto} When adding the image in your WordPress blog, select the image alignment as right, left, or center in the Image/Media Panel. The image will be embedded into your blog post with the selected style for alignment such as: <img src="http://example.com/images/leaf.jpg" alt="leaf graphic" title="leaf graphic" class="alignright size‐medium wp‐image‐3109" height="25" width="30"/> Using Images in Posts Images can be used in a variety of methods in your WordPress posts and Pages. They can be a major subject, or a referenced detail that enhances the information or story. HTTP://EDUCHALK.ORG: 124
HTTP://EDUCHALK.ORG
The first thing you should consider is the "look" of the images on your page. Not what the images are of, but the general look of how they flow and interact with the rest of the content on your page. Wrapping Text Around Images helps you to begin to understand how images interact with the text around them, changing the margins, padding and borders around the images within the content. It will also help you understand how to create captions under your images. The next thing to consider is the size of the images. There are two ways of actually sizing an image. It is either the size that it is, or a thumbnail link which, when clicked, takes the user to a new page with an enlarged image of the graphic. Inserting Images into Posts Inserting an image into a post still seems to confuse a lot of people. There are 2 steps involved to inserting an image into a post. First, the image file must be uploaded onto your web server before it can be inserted into a post. The second step is to actually insert the image into the post in the appropriate location. The simplest way to do this is to use the "Add Media" function on the post screen (beside the "Visual" and "HTML" tabs). Choose the appropriate button depending on whether you are adding photos, videos, audio, or miscellaneous media (e.g. PDF files). This method will complete both steps as outlined above. In the "From Computer" area of the screen you need to upload the desired image file. NOTE: Before hitting the "Upload from Computer" button it is recommended that you select the "Browser Uploader" instead of using the default Flash Uploader. After selecting the "Browser Uploader", hit the "Browse..." button and choose the desired image file on your computer. Then, hit the "Upload" button. Your image file is now on your web server. HTTP://EDUCHALK.ORG: 125
HTTP://EDUCHALK.ORG
Make sure you give the image an appropriate title, as well as a relevant description if desired. Choose the desired alignment and size, and hit the "insert into post" button. Your image is now inserted into the post at the location where your cursor was last active. Every time you upload an image to your web server it is added to the Library of images that are available for that blog. If you want to insert the same image into another post go to the Library, hit the "Show" link, and then follow the same instructions to insert that image into another location or post. Image Size and Quality The size and quality of an image for use on a web page is determined by a variety of things. Physical Size HTTP://EDUCHALK.ORG: 126
HTTP://EDUCHALK.ORG
The physical size of an image is based upon two things: The size of the image on the screen and the file size. Generally, the file size is treated as a different issue. File Size This is the size of the file on your hard drive or server. Resolution Resolution refers to the number of pixels in an image. Resolution is sometimes identified by the width and height of the image as well as the total number of pixels in the image. File Type There are several image types popularly found on the Internet: jpeg, gif, png and for favicons‐‐the icons next to the address‐‐ico. The physical size of the image is information we need to know in order to determine how much "space" will the image occupy on a web page. If your WordPress Theme features a fixed width content area of 600 pixels and the image you want to use is 800, the image will push the sidebar and layout of your web page around, messing up your design. Images within that 600 pixel width need to be restricted to that maximum width in order to protect the layout of your page. It's up to you to determine what size they should be from there, matching the image to your overall layout and styles. File size dictates the time it takes to load your page, the larger the file size, often increased because of a high image resolution quality, the longer it will take to load. People often don't have the patience to wait through long web page loads, so keeping your file sizes low speeds up your web page access times. Typically, large high quality images should be kept between 100K and 60K. Smaller images should be closer to 30K and lower. The resolution of the image dictates its clarity. The higher the resolution, though, the larger the file size, so you have to make a compromise between quality and file size. Luckily, the various file types most commonly used on the Internet have compression features. When you save the file as one of these types, it condenses or compresses the data information in the image file. Internet browsers can decompress this information to display the image on the screen. Some graphic software programs allow you to set the compression rate to control the quality of the image (and file size) at the time you save it. Depending upon your use of the images on your site, you may have to experiment with this to get the right ratio that keeps the resolution quality good while maintaining a small file size. Websites use four common file types. The end of a filename (called the extension) tells what type it is. One type, ico, is to make a favicon file ‐‐ but this is usually only done when a website is first set up. The other three types are used for general images: jpg (JPEG) is good for photographs. Saving a photo as jpg removes detail from the photo. Good photo editors let you control how much detail is removed (the "compression"). Different photos need HTTP://EDUCHALK.ORG: 127
HTTP://EDUCHALK.ORG
different compression; doing this carefully and viewing the result can give you a usable photo with a small file size. gif can be poor for photographs. It's better for line art, like logos, with solid areas of the same color. png is for both photographs and line art. It compresses photos without losing detail, but usually makes larger photo files than JPEGs. Some older browsers don't completely support png, though. If you aren't sure which file type is best for a particular image, try saving the image in more than one type and comparing the file sizes. Using the right type can make a big difference! There's more information in Sitepoint's GIF‐JPG‐PNG What's the Difference article. Resizing Images Not all graphic software packages allow you to resize images, though most should. Check your graphics software table of contents or index for resize, size, transform, reduce, or enlarge, all synonyms for the for the same thing. If they don't have the feature, you may have to find different software. The process of resizing images is fairly simple. There are usually two methods: 1) You can resize an image through the use of tools provided which allow you to manually shift the edges of an image to deform or resize the image. The best way is to grab a corner, not the edge, to resize the image. The corner "handle" will usually resize the image maintaining the overall height‐
width ratio. Check your manual for specific instructions. 2) The other method involves simply specifying the image's final size. The advanced graphics programs allow you to set it by exact dimensions or a percentage of reduction or enlargement. After resizing the image, the image may be smaller, but it may also be slightly out of focus. You can sharpen the focus of the small image by using the sharpen feature in your software. When you have fine‐tuned your small sized image or new thumbnail, export the image as a jpg, gif, or png. Styling Images Images can have borders, frames, captions, and be styled in many different ways. There are basically two ways to style an image on your site. You can style it from within the style sheet or inline on a specific image. Styling All Images Styling your images from within the style.css of your WordPress Theme can cover the styling for every image on your site, or specific images. To style every image on your site to look a particular way, look for or add the CSS selector for the image tag. Then add your styles to the tag. For instance, let's say that you want a black border around HTTP://EDUCHALK.ORG: 128
HTTP://EDUCHALK.ORG
all of your images and you want space between the border and the image, as well as the appropriate spacing around the image and the text. img { margin: 5px; padding: 10px; border: solid black 1px } Maybe you want something a little more dramatic. You can change the border thickness and set it to a "double" line. And maybe you really want to isolate your image from the rest of the text, so you increase the margin around the image. img { margin: 20px; padding: 10px; border: double black 1px } Styling Some Images You can add to your style sheet a specific style for certain images. If you have already styled all of your images, you must make sure you specify every style declaration or attribute specified in the image tag style in order to override that attribute. If you do not change the margin, then it will remain the same in the new style. This is called the CSS Parent/Child Relationship. Let's say you would like to have some images in your posts filed in the category of Nature have a nice green background. The rest of the images should look the same, just the ones you add in your Nature category. You simply add a class to your style sheet and each image within that category. To make it easy to remember, we'll call our class "nature". We want to have a very dark green thick border and a medium green background around the image to highlight it. img.nature { margin: 20px; padding: 20px; border:solid #003300 4px; background: #006600; } On each of the images within that category, you simply add the class for "nature": <img src="leaf.gif" alt="Red leaf" class="nature" /> If you need more styles for different images, you can create more of them as needed. Styling One or Two Images Inline HTTP://EDUCHALK.ORG: 129
HTTP://EDUCHALK.ORG
There are times when you just want one or two images on your site to look different from the rest. This technique is called inline styles. It applies the CSS styles directly to the image itself. For example, say you want to have an image isolated against a back background to call attention to it. <img src="leaf.gif" alt="Red leaf" style="padding:20px; background: black; border: none" /> This is not a technique to use on every image. It is to be used on occasional images that need a "little something special." Wrapping Text Around Images Current versions of WordPress now have image alignment built‐in. WordPress adds CSS classes to align the image to the right, left, and center of a paragraph, so the text will wrap around the image. In order to take advantage of these new CSS classes for image alignment and the text wrapping around the image, the WordPress Theme must include the following in the style.css found in the WordPress Theme directory. img.alignright {float:right; margin:0 0 1em 1em} img.alignleft {float:left; margin:0 1em 1em 0} img.aligncenter {display: block; margin‐left: auto; margin‐right: auto} a img.alignright {float:right; margin:0 0 1em 1em} a img.alignleft {float:left; margin:0 1em 1em 0} a img.aligncenter {display: block; margin‐left: auto; margin‐right: auto} When adding the image in your WordPress blog, select the image alignment as right, left, or center in the Image/Media Panel. The image will be embedded into your blog post with the selected style for alignment such as: <img src="http://example.com/images/leaf.jpg" alt="leaf graphic" title="leaf graphic" class="alignright size‐medium wp‐image‐3109" height="25" width="30"/> Giving The Image Style There are times when you want an image on your post to fill the screen, or sit in the middle of text with writing above and below it, but most of the time you want your image to sit on one side or the other of the text and have the text flow or wrap around the image. While the styles above will float the image left and right, you may want to add more design elements to your image. Let's start from the beginning with a simple guide to using images in your WordPress blog. HTTP://EDUCHALK.ORG: 130
HTTP://EDUCHALK.ORG
First, here is a look at a typical image tag in your post, without the instructions for wrapping the text around the image. Note that we've added both the title and alt attributes to the tag; alt is important for accessibility, title is for the image tooltip. <img src="http://example.com/images/leaf.jpg" alt="leaf graphic" title="leaf graphic" /> To begin the process of setting your image up to be wrapped, there are a few changes that you may need to make to the style sheet that controls your WordPress site. CSS offers a great list of resources for creating and editing Cascading Style Sheets. From your WordPress Theme folder, open the style.css file in a text‐editor. Important! Save a back up copy somewhere before you do any edits! Now, do a search for img. Hopefully, all your image selectors will be grouped together. If not, find them all and cut and paste them into one group to make this process easier. Borders You'll need to decide if you want a border around your images and, if you do, what size, color, and type it should be. For no border, you would use the following: img {border:0} For 1 pixel solid red line border, add: img {border:solid red 1px} If you create a link around an image, some browsers will put a border around the image to let the visitor know it's a link. If you don't want that, use the following: a img {border:0} You can still add a hover around the image so when the visitor moves their mouse over the image, not only will the mouse pointer turn into a hand, the image will get a colorful border: a:hover img { border:solid red 1px; } Padding and Image Width Let's clean up one more thing to make the image in your content work better with the rest of the styles we will use. We want to clear all the padding around the images within your content and make sure that the whole width of the image shows up rather than just a part of it. If it isn't in your style sheet, add the following: p img { padding: 0; max‐width: 100%; } HTTP://EDUCHALK.ORG: 131
HTTP://EDUCHALK.ORG
Image Left, Right, and Center When an image sits on the sides of your text, it helps to have space between the text and the image so the words aren't right up against the edge. As some browsers treat the margins and padding differently, the following styles will accommodate most browser's "space requirements" so the image doesn't overlap the text or any lists that appear inline with the image. img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; } img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; } The declaration of display:inline keeps the image inline with the text that you placed it with. Now, it is time to add the float declaration to the images. BUT WAIT. Why should we waste our left and right floats on just images? Why not use them on anything that we want to sit on the right or left of the page and have the text float around it? You can do that, you know. But that's for another tutorial. We're not going to waste this, so if it isn't there in your style sheet already, add the following: .right { float: right; } .left { float: left; } Note: The Default/Kubrick Theme uses this technique but names the classes alignleft and alignright. Using left and right seems easier to remember and use, but either name sets may be used to make this work. So what about centering the image? Yes, you can still do that too. The center tag isn't valid anymore, so you can create a style for centering things: img.centered { display: block; margin‐left: auto; margin‐right: auto; } Left, Right, and Centered Examples This sounds like a lot of complicated stuff, but once this is done, you will never have to mess with it again. We hope. To use it, create the link to your image and add class="right", class="left", or class="centered" and the image will move to the right, left, or center and the text will wrap around it. It's just that simple. <img src="/images/leaf.gif" class="right" alt="Red leaf" title="Red Leaf" />This is some text that will wrap around the image that sits on the right side of the text that you are writing about the leaf that is there. That is, if you are writing about leaves in the first place and you want to write about this specific leaf. This is some text that will wrap around the image that sits on the right side of the text that you are writing about the leaf that is there. That is, if you are writing about leaves in the first place and you want to write about this specific leaf. <p>This is text that sits above the leaf image that you might be writing about in your post if you were to write about leaves. <img src="/images/leaf.gif" class="centered" alt="Red leaf" title="Red Leaf" HTTP://EDUCHALK.ORG: 132
HTTP://EDUCHALK.ORG
/>This is some text that will sit below the text image and you can continue to write about the leaf that is there.</p> This is text that sits above the leaf image that you might be writing about in your post if you were to write about leaves. This is some text that will sit below the text image and you can continue to write about the leaf that is there. Alternative Text Size Some browsers will now allow you to control the size of the text created by the ALT tag. This is the text that appears when you hold your mouse over an image or when the the image fails to load. You can set it to any size, but something much smaller than your content's font size would be a good idea. img {font‐size:60%} Captioning The Image Images tend to just sit there, looking pretty. The alt and title properties say a little something about what the image looks like, but other than that, unless you add some text around it, it just sits there. So create a caption style that adds some "spice." .caption { margin: 5px; padding: 5px; border: solid 1px #E5E5FF; background: #E5F2FF; font‐size:90%; color: black } In the above example, we've added a border and a little hint of background color, but you can style it however you want. We recommend that you at least make the text a difference size and padding to the overall container so it is distinguished from the rest of the post's content. <div class="caption right"> <img src="http://example.com/images/leaf.jpg" alt="leaf graphic" title="leaf graphic"> Red Leaf</div> Red Leaf This is text that wraps around the leaf image that features a caption. You might want a caption under the picture of the leaf if you were writing about leaves in your post. The caption sits below the text and helps the user to understand what the picture is about. In the example above, we just added the right class to the container which will position it as a float to the right, allowing the text to flow around it. Using the left class would float it to the left, and centered would give you the text, image centered, text effect. HTTP://EDUCHALK.ORG: 133
HTTP://EDUCHALK.ORG
Clear The Display In the event that the image is larger than the amount of text that would otherwise surround it, causing the image to hang like a flag over some element below it, then at some point in the text, you'll want to clear the display. Note that there is no text inside this division. <div style="clear:both;"></div> HTTP://EDUCHALK.ORG: 134
HTTP://EDUCHALK.ORG
Chapter 12: Designing Headers They say you cannot judge a book by its cover, and yet every day people do. They pick up a book, look at the cover, and then are moved to either put it down, turn it over, or open it up just because of how the cover looks. Websites are also judged by their covers and the first impression often comes from the header. The header of your site is typically the first thing people see. From this masthead or header art across the top of your page, people make sweeping judgments about what they are about to see and read. The same people who say you cannot judge a book by its cover, also say that you only have 30 seconds to make a good impression. In the world of the Internet where the next web page is a click away, you have much less than that. We are going to take you inside the architecture of a WordPress header and offer tips on how to customize it to become your own book cover, enticing people into your site with a good first impression. Then we will offer some tips from some experts on what makes a good website header. The WordPress Header By default, the WordPress header is a simple piece of code. You do not have to get into the code to change the header that comes with whatever WordPress Theme you choose. You set the blog or website title and description in the Administration > Settings > General panel, and WordPress does the rest. In its simplest form, the WordPress Classic Theme features the header code like this in the wp‐
content/themes/classic/header.php template file: <h1 id="header"> <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> </h1> The header is set in an h1 HTML tag and features one template tag used with two different options or parameters. You can learn more about these parameters in the documentation for bloginfo(). Basically, the first one displays the URL of the website in a link, and the second one displays the name of the blog or website as set in the Administration > Settings > General panel. When the user moves the mouse over the header title, the header can be clicked to return back to the main or front page of the site as set in the Administration > Settings > General panel. The WordPress Default Theme features an image in the background and presents the header like this in wp‐content/themes/default/header.php: <div id="header"> <div id="headerimg"> <h1> <a href="<?php echo get_option('home'); ?>"> HTTP://EDUCHALK.ORG: 135
HTTP://EDUCHALK.ORG
<?php bloginfo('name'); ?></a> </h1> <div class="description"> <?php bloginfo('description'); ?> </div> </div> </div> Again, the template tag featuring the name of the blog or website is in a link, but this shows another usage similar to the URL request above. It gets the same information, just in a different way. It also adds the description of the site from the Administration > Settings > General panel. Basically, these two header examples do the same thing in different ways. They provide information in the header, with the potential for an image, and make the header title clickable to help navigation on the site. It is just a matter of how much information you want in your header, and how that information is displayed. Using the first example from the Classic Theme, an image can still be used in the background, set within the style sheet in the h1 selector, but the second one gives more control to the use of an image in the header by giving it its own division. How these look are totally controlled by the style sheet. Styling the Header As listed in the two above examples, the styles for the header are contained within the h1, header, headerimg, and description CSS selectors. These are all found within the style.css, though may be found in the styles in the header.php of the Theme you are using. You will have to check both places. In the Classic Theme, the CSS for the header are found in one selector, the #header. #header { background: #90a090; border‐bottom: double 3px #aba; border‐left: solid 1px #9a9; border‐right: solid 1px #565; border‐top: solid 1px #9a9; font: italic normal 230% 'Times New Roman', Times, serif; letter‐spacing: 0.2em; margin: 0; padding: 15px 10px 15px 60px; } The background color is set to a green shade and there is a border all the way around the header which changes colors creating a recessed, shadow effect. The Times font is set with a size of 230% with a wider than normal letter spacing. The padding on the left side indents the text in from the left. HTTP://EDUCHALK.ORG: 136
HTTP://EDUCHALK.ORG
All of these can be easily changed, giving the border a thicker width and making it all the same color, changing the background color, the font size and style, the letter spacing, and more by modifying the information in each style attribute. The same is true of the Default WordPress Theme header, except there are more styles to think about and they are found within the header.php's "head" tag and the style.css, though once you have your styles set, you can move the information into your style sheet. The styles that control the header's look are found within the h1, header, headerimg, and description CSS selectors. Just like the Classic Theme, find these references and make your modifications there to change the look. Changing the header image of the Default WordPress Theme has been simplified with the introduction of a utility called Kubrickr. It simply asks you to supply a new image file name for the header and then switches it for you, so you do not have to dig into the code. If all you want to change is the header image, this is an extremely useful and easy tool. If you do want to get your hands into the code, dig into your header styles and make the changes. Below is a simple tutorial on changing just the header image manually. Changing the Header Image There are many different header images and header art available for you to use to change the image in the header. The styles for the header image for the Default or Kubrick WordPress Theme, and any Theme based upon that Theme, are more complicated to change than those for the Classic Theme. The styles are found within the styles in the header.php "head" section, as well as in the styles.css. To change only the header image reference, open the header.php template file and look for the styles like this: #header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/wc_header.jpg") no‐repeat bottom center; } #headerimg { margin: 7px 9px 0; height: 192px; width: 740px; } NOTE: The use of the bloginfo tag only works when the style is used within the head of the template file. WordPress template tags will not work in the style sheet (style.css). To move this style to the style sheet, change the template tag to the actual address (URL) of the header image graphic. To change the image file, replace the "kubrickheader.jpg" with the name of the new graphic image you have uploaded to your site to replace it. If it is in a different directory, change that by replacing the bloginfo() tag with the specific address of the graphic's location. If you are using an image that is the same size, then simply replace the image. If it is a different size, fill in the height and width of the image in the next section called #headerimg. If you do not know, and HTTP://EDUCHALK.ORG: 137
HTTP://EDUCHALK.ORG
are using Windows, view the folder in which the image resides on your computer in Thumbnail view mode. Click View > Thumbnail from the Windows Explorer menu. In Thumbnail view mode, find your image and hold the mouse over it. A small balloon tip will pop up listing the dimensions. Use that information in the styles. Otherwise, just right click on the image file and choose Properties and it should give you the file size and dimensions. Save the template file and upload it and the image to your website and take a look. Some changes may need to be made to fine‐tune the placement and look. With the header image in place, it is time to tackle the rest of the header. Open your style.css style sheet file and look for the following: •
h1 •
header •
headerimg •
description Your Theme may or may not have all of these, but the Default Theme has all of them in different places within the style sheet. All or some of these may need to have the attributes changed to change the look of your header. If you change the size of the header image or header art, be sure and change the other structural CSS selectors like content and sidebar to accommodate the change in the header size. Header Image Specifications A header image that fits within the Default WordPress Theme is about 192 x 740 pixels. If you are replacing the header within any WordPress Theme, check the size of the header image and then find a replacement that matches that size. If you choose a header image that is smaller or wider or taller than the replacement, you may have to modify the other structural elements of the web page to allow for the change in size of the header. If you are modifying the entire site's Theme, the width of the overall page or content area needs to be taken into consideration for the header image's size. The two most common screen sizes are 1024x768 and 800x600 pixels. Yet, wide screen monitors are gaining ground and web designers now need to prepare for screen widths of 1280x1024 and 1600x1200. If you set your website to "float," positioned in the middle of the browser window with space on either side, then you can set your header width to whatever you want. If you are designing a Theme with a flexible or "elastic" screen width, then the width of your header becomes important. If you are using a header image that can be repeated, and you are using elastic widths, you can set the styles within the header to repeat to fill the space: #header { HTTP://EDUCHALK.ORG: 138
HTTP://EDUCHALK.ORG
background: url("/images/kubrickheader.jpg") repeat‐x top left; } This sets the header image to repeat horizontally beginning from the top left corner and going across. You can adjust these to whatever background position your header design and layout needs. Header Art A new term growing in the web design field is header art. These are header images that are usually handmade using combinations of color, shapes, symbols, images, and text. They can take some time and labor to create. While there are some free header art sites, some sites sell their handmade header art. Although a photograph may be unique in its own way and convey the needed visual style, handmade header artwork is easier to match to other web page colors and is usually more aesthetically pleasing because of its distinctive nature. Choosing pre‐made header art has some benefits. The artists have already done the work and all you have to do is choose the design that best matches your website. And the graphic is ready to use, already sized and saved as a small file size. Header Art Copyrights The best header art to use, if you do not want to generate your own, is any that bear the Creative Commons License that specifically allows its public use. Read the individual license for the image's use to make sure that you have permission to use the header art on your site. Usually you must attribute the author, share alike and not use it for commercial purposes. If in doubt, always ask permission from the author before use. As header art is made and licensed "as is" by the designer/artist, some header art cannot be modified without the artist's permission. Check the website copyrights and licenses and ask if you are in doubt and wish to modify the artwork. Designing Your Own Header Art You can also design your own header art. Any graphic design software program will work. Popular ones include Adobe Photoshop, Adobe Elements, JASC PaintShop Pro, The Gimp and Macromedia Fireworks. The graphic design software should have the ability to resize and control the resolution and type of the image when saved. The size of your header art should be the size of the header container you're going to put it in. You can use your own photographs, artwork, fonts, and any combination of images to create your header art. When done, save it "for the web" as a jpg, gif, or .png file. For an explanation on which to use read Sitepoint's GIF‐JPG‐PNG What's the Difference article. These file types will compress the image's resolution, reducing the file's size. In general, avoid file sizes larger than 50K as larger sizes tend to slow a site access times. HTTP://EDUCHALK.ORG: 139
HTTP://EDUCHALK.ORG
Hiding the Header Text Many Themes and Theme designers want to feature their header with a picture only, no text. Some will put the text in the graphic image, therefore not requiring the actual use of the text. One option is to remove the template tags that generate the title and description. The other option is to leave it in, but hide it. To hide the header text while leaving it in the code, do not change anything in your template files. Only change the CSS. Add display:none to the CSS selectors you do not want to appear. For example, to hide the text within the h1 selector: h1 {display:none; font‐size: 230%; color: blue;....... It is still there, but the browser has been commanded to not show it in any way. The container literally is "not there." It might be hidden, but some web page screen readers and search engines will still find the information. If you are serious about making your site be accessible, some newer text readers access the style sheet and do not read the elements marked display:none. There are two popular methods for working around this. One is to use the display:none as outlined above, but also include an aural style sheet that changes that selector to display:block, "turning the visibility" back on. The other method is to position the content literally "off the page" by a negative indent. Here is an example: h1 { font‐size: 0; text‐indent: ‐1000px; } This technique moves the entire h1 tag and its contents physically off the web page. The screen reader will still "read" the text because it is there, but it will not display on the page. Extensive testing has proven so far that this technique works across most browsers and with all screen readers. Making the Whole Header Clickable To make the entire header, graphic and all, clickable, you must put the header graphic inside of a link. There are two ways to do this. You can put the graphic directly into the WordPress Theme manually, or you can use the stylesheet to define the link size area to encompass the header art area. To make the header art clickable by embedding it into the header, in the wp‐
content/themes/classic/header.php template file of your WordPress Theme, change the following: <div id="header"> <h1><a href="<?php bloginfo('url'); ?>/"> <?php bloginfo('name'); ?></a> </h1> </div> HTTP://EDUCHALK.ORG: 140
HTTP://EDUCHALK.ORG
to: <div id="header"> <a href="<?php bloginfo('url'); ?>"> <img src="http://example.com/headerimage.jpg" alt="<?php bloginfo('name'); ?>" /> </a> <h1><a href="<?php bloginfo('url'); ?>">" title="<?php bloginfo('name'); ?>"> <?php bloginfo('name'); ?></a> </h1> You can style the h1 heading to overlap or sit below, or not even be visible in the header. To make the overall area of the header clickable, the header must have a width area set for the h1 anchor HTML tag to make the clickable area cover the header image in the background. The styles are set in the stylesheet. The HTML and WordPress Template Tags look like this, the same as above: <pre><div id="header"> <h1><a href="<?php bloginfo('url'); ?>/"> <?php bloginfo('name'); ?></a> </h1> </div> The CSS would then be styled something like this to enlarge the clickable link area and hide the header text (optional), customized to your own design needs. #header h1 a { width: 400px; height: 100px; display: block; background: url(images/headerimage.gif) no‐repeat top left; } #header h1 a span { display: none; } Another option is to add a script to make the header section clickable, which may not work for all browsers. This is showcased in the Default WordPress Theme (Kubrick) with its clickable header: •
Open the wp‐content/themes/default/header.php template file. •
Change from <div id="header"> to: HTTP://EDUCHALK.ORG: 141
HTTP://EDUCHALK.ORG
<div id="header" onclick="location.href='http://example.com/';" style="cursor: pointer;"> If you want both text areas of the header to be clickable and not the entire header image, use the following to make the header art and the blog title and description clickable. <div id="header"> <div id="headerimg"> <h1> <a href="<?php echo get_option('home'); ?>"> <?php bloginfo('name'); ?> </a> </h1> <div class="description"> <a href="<?php echo get_option('home'); ?>"> <?php bloginfo('description'); ?> </a> </div> </div> </div> Rotating Header Images There are several scripts available that will allow you to rotate images within the header, sidebar, or on any template file. We will examine the use of one of these, the Random Image Rotator. Save the script to a separate folder in which you have the header images you wish to rotate in your header. For this example, call it rotate.php. To use this as a background image that changes or rotates with every load of the web page: #header { background: url("/images/headerimgs/rotate.php") no‐repeat bottom center; } To actually put this in your header, or elsewhere on your site, add an image link like this within the header division: <img src="/images/headerimgs/rotate.php" alt="A Random Header Image" /> Adding Navigation to Your Header Headers are another area where you can add navigation elements to your website. Typically these are horizontal menus at the top or bottom of your header. To add these, create a new division within the header to style your header navigation elements. This can be as simple as displaying your categories across the top of the header using one of the List Categories template tags. Let us look at one example using the list_cats() tag. HTTP://EDUCHALK.ORG: 142
HTTP://EDUCHALK.ORG
In this example, the list_cats() template tag is set to sort the list of categories by ID in an unordered list (<ul><li>) without dates or post counts, does not hide empty categories, uses category "description" for the title in the links, does not show the children of the parent categories, and excludes categories 1 and 33. It sits in its own "category" division. Notice that a link to the "home" page or front page has been included manually at the start of the list. <div id="header"> <div id="categorylist"> ul><li> <a title="Home Page" href="index.php">HOME</a></li> <?php list_cats(FALSE, '', 'ID', 'asc', '', TRUE, FALSE, FALSE, FALSE, TRUE, FALSE, FALSE, '', FALSE, '', '', '1,33', TRUE); ?> </ul> </div><!‐‐ end of categorylist ‐‐> <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> </div><!‐‐ end of header ‐‐> To style this list, the #categorylist in the style.css might be: #categorylist {font‐size:12px; font‐style:normal; text‐transform:uppercase; } #categorylist ul {list‐style‐type: none; list‐style‐image:none; margin:0; padding‐bottom: 20px; } #categorylist li { display: inline; padding: 0px 5px;} #categorylist a:link, #category a:visited {color:blue} #categorylist a:hover {color:red} It might look like this: WORDPRESS COMPUTERS INTERNET NEWS Header Tips Here are some tips and information to help you choose and customize your WordPress site's header. Pay attention to text placement and color. The colors and placement of the text within a header can add or subtract to your presentation. Here are some tips. ƒ
If you use white text, make sure there is a background color in the header and/or headerimg to showcase the white text again if for some reason the image does not appear on the screen or the user has "show images" turned off. This will allow your white text to still be visible. ƒ
If the image has a main feature or element, position the text so it does not cover the main subject of the image. HTTP://EDUCHALK.ORG: 143
HTTP://EDUCHALK.ORG
ƒ
If the text is hard to read against a busy area of the graphic, position the text to a less busy area of the header image. ƒ
Make sure the color of the text is easily seen by your visitors and does not clash with the header art colors. Fluorescent orange text on a lime green background is painful. ƒ
Be aware that some color differences and patterns in your header art may make the text letters in your overlaid text "disappear." The same applies if you embed the text in your header art or header image. Have a purpose and point. A good header reflects the content of the site. The rest of the site has to meet expectations and live up to the header, so the header must reflect the content, purpose and intention of the site. It should invite visitors to remain. A good header is like the cover of a book or magazine. It should encourage people to stay and have a look around, read and look more, and find something of value. It is the teaser, the lead that grabs their attention and says "there is something worth exploring here." It should blend in with the overall look. Bold and dramatic headers lend themselves to boldly designed sites, whereas soft and pastel colored sites lend themselves to gentler graphic headers. A site dedicated to punk rock and grunge should have a header look punky and grungy. It is up to you, but think consistency. Headers do not need to have pictures. Not all headers must have pictures and graphics. Sometimes the words are more important, whether they are against a wash of color or a white background. Cluttered headers are still cluttered. Avoid cramming ads, navigation, text, scrolling news feeds, and the kitchen sink into your header. Simple is always better. Maintain accessibility standards in your header. We mentioned hiding the header text, and there is more you can do to make sure your header meets accessibility standards. Use the h1 tag so screen readers will recognize it as a header. Use titles and alt descriptions in links and images used in the template file (not in the style sheet as background images). Headers can be any height, but remember content sells. The average header is less than 200 pixels high, but headers range in height from very thin to a half page. Remember that the main reason people visit your site is its content, and the more they have to scroll down past your header to get to the content, the less interested they tend to be. Help lead them to the content with your header. HTTP://EDUCHALK.ORG: 144
HTTP://EDUCHALK.ORG
Think "Site Identity." A header is part of the site's identify or "brand" and people like to know they are on the same site when they click a link to another page within that site. Consider your header or header art as your site's "brand identity". HTTP://EDUCHALK.ORG: 145
HTTP://EDUCHALK.ORG
Glossary of Terms and Concepts Absolute Path An absolute path or full path is a unique location of a file or directory name within a computer or filesystem, and usually starts with the root directory or drive letter. Directories and subdirectories listed in a path are usually separated by a slash /. Example: /Users/educhalk/www/blog/images/icecream.jpg To find the absolute path of a page, copy the text below into a new text file, save the file as path.php. Then open it in a Web browser (for example, http://www.example.com/images/path.php). <?php $p = getcwd(); echo $p; ?> Apache Apache is short for Apache HTTP Server Project, a robust, commercial‐grade, and freely‐available open source HTTP Web Server software produced by the Apache Software Foundation. It is the most commonly used web server on the internet, and is available on many platforms, including Windows, Unix/Linux, and Mac OS X. Apache serves as a great foundation for publishing WordPress‐powered sites. ASCII ASCII is short for American Standard Code for Information Interchange. Pronounced as "ask ee", it is a standard set of codes used to represent numbers, letters, symbols, and punctuation marks. Atom A format for syndicating content on news‐like sites, viewable by Atom‐aware programs called news readers or aggregators. Avatar An avatar is a graphic image or picture that represents a user. Binaries Binaries refer to compiled computer programs, or executables. Many open source projects, which can be re‐compiled from source code, offer pre‐compiled binaries for the most popular platforms and operating systems. HTTP://EDUCHALK.ORG: 146
HTTP://EDUCHALK.ORG
Blog A blog, or weblog, is an online journal, diary, or serial published by a person or group of people. Blogs are typically used by individuals or peer groups, but are also frequently used by companies or organizations as full blown websites. Blogs often contain public as well as private content. Blogging Blogging is the act of writing in one's blog. To blog something is to write about something in one's blog. This sometimes involves linking to something the author finds interesting on the internet. Blogosphere The blogosphere is the subset of internet web sites which are, or relate to, blogs. Blogroll A blogroll is a list of links to various blogs or news sites. Often a blogroll is "rolled" by a service which tracks updates (using feeds) to each site in the list, and provides the list in a form which aggregates update information. Bookmarklet A bookmarklet (or favelet) is a "faux" bookmark containing scripting code, usually written in JavaScript, that allows the user to perform a function. Category Each post in WordPress is filed under a category. Thoughtful categorization allows posts to be grouped with others of similar content and aids in the navigation of a site. Please note, the post category should not be confused with the Link Categories used to classify and manage Links. Capabilities Term related to User authentication and access control. It is an adoption of permissions in RBAC. There are about thirty capabilities in WordPress. CGI CGI (Common Gateway Interface) is a specification for server‐side communication scripts designed to transfer information between a Web server and a web‐client (browser). Typically, HTML pages that collect data via forms use CGI programming to process the form data once that data is submitted by the client. HTTP://EDUCHALK.ORG: 147
HTTP://EDUCHALK.ORG
Character Entity A character entity is a method used to display special characters normally reserved for use in HTML. For example, the less than (<) and greater than (>) are used as part the HTML tag structure, so both symbols are reserved for that use. But, if you need to display those symbols on your site, you can use character entities. For example: use &lt; for the less than (<) symbol use &gt; for the greater than (>) symbol Character set A character set is a collection of symbols (letters, numbers, punctuation, and special characters), when used together, represent meaningful words in a language. Computers use an encoding scheme so members of a character set are stored with a numeric value (e.g. 0=A, 1=B, 2=C, 3=D). In addition, a collation determines the order (i.e alphabetic) to use when sorting the character set. By default, WordPress uses the Unicode UTF‐8 (utf8) character set for the WordPress MySQL database tables created during the installation process. Beginning with Version 2.2, the database character set (and collation) is defined in the wp‐config.php file. Also note, the character set used for syndication feeds is set in the Administration > Settings > Reading panel. chmod chmod is a Unix/Linux shell command used to change permissions on files. Its name is a contraction of "change mode." Collation Collation refers to the order used to sort the letters, numbers, and symbols of a given character set. For example, because WordPress, by default, uses the UTF‐8 (utf8) character set, and when the WordPress MySQL database tables are created during the installation process, MySQL assigns utf8_general_ci collation to those tables. Beginning with Version 2.2, the collation (and character set) used by WordPress is defined via the wp‐config.php file. Comments Comments are a feature of blogs which allow readers to respond to posts. Typically readers simply provide their own thoughts regarding the content of the post, but users may also provide links to other resources, generate discussion, or simply compliment the author for a well‐written post. Comments can be controlled and regulated through the use of filters for language and content, and often times can be queued for approval before they are visible on the web site. This is useful in dealing with comment spam. HTTP://EDUCHALK.ORG: 148
HTTP://EDUCHALK.ORG
Content Management System A Content Management System, or CMS, is software for facilitating the maintenance of content, but not design, on a web site. A blogging tool is an example of a Content Management System. cPanel cPanel is a popular web‐based administration tool that many hosting providers provide to allow users to configure their own accounts using an easy‐to‐use interface. CSS CSS, or Cascading Style Sheets, is a W3C open standards programming language for specifying how a web page is presented. It allows web site designers to create formatting and layout for a web site independently of its content. Database A database in computing terms is software used to manage information in an organized fashion. WordPress uses the MySQL relational database management system for storing and retrieving the content of your blog, such as posts, comments, and so on. Deprecated Deprecated functions or template tags are no longer supported, and will soon be obsolete. DIV A DIV element in HTML marks a section of text. DIVs are used extensively in WordPress to apply CSS stylings to particular blog elements. Excerpt An excerpt is a condensed description of your blog post and refers to the summary entered in the Excerpt field of the Write Post SubPanel (see Advanced Editing). The excerpt is used to describe your post in RSS feeds and is typically used in displaying search results. The excerpt is sometimes used in displaying the Archives and Category views of your posts. The Template Tag the_excerpt() can be used to access the contents of this field. An excerpt should not be confused with the teaser which refers to the first 55 words of the post's content. When typing a long post you can insert the <!‐‐more‐‐> Quicktag after a few sentences to act as a cut‐off point. When the post is displayed, the teaser, followed by a hyperlink (such as Read the rest of this entry...), are displayed. Your visitor can then click on that link to see the full version of your post. The Template Tag the_content() can be used to display the teaser. HTTP://EDUCHALK.ORG: 149
HTTP://EDUCHALK.ORG
Feed A feed is a function of special software that allows "Feedreaders" to access a site automatically looking for new content and then posting the information about new content and updates to another site. This provides a way for users to keep up with the latest and hottest information posted on different blogging sites. Some Feeds include RSS (alternately defined as "Rich Site Summary" or "Really Simple Syndication"), Atom or RDF files. Dave Shea, author of the web design weblog Mezzoblue has written a comprehensive summary of feeds. Feeds generally are based on XML technology. FTP FTP, or File Transfer Protocol, is rather predictably, a client‐server protocol for transferring files. It is one way to download files, and the most common way to upload files to a server. An FTP client is a program which can download files from, or upload files to, an FTP server. You may need to use an FTP client to upload your WordPress files to your web server, particularly if you use a hosting provider. Gallery As defined by Andy Skelton, Gallery, introduced with WordPress 2.5, is specifically an exposition of images attached to a post. In that same vein, an upload is "attached to a post" when you upload it while editing a post. In the uploader there is a "Gallery" tab that shows all of the uploads attached to the post you are editing. When you have more than one attachment in a post, you should see at the bottom of the Gallery tab a button marked "Insert gallery into post". That button inserts a shortcode "[gallery]" into the post. WordPress replaces that shortcode with an exposition of all images attached to that post. Non‐image file types are excluded from the gallery. GMT GMT, or Greenwich Mean Time, is the time zone from which all other time zones are measured. Local times around the globe are calculated according to their offset from the time in Greenwich, England. Gravatar A gravatar is a globally recognized avatar (a graphic image or picture that represents a user). Typically a user's gravatar is associated with their email address, and using a service such as Gravatar.com, a blog owner to can configure their blog so that a user's gravatar is displayed along with their comments Hack A hack is a bit of code written to customize or extend the functionality of a software product. Older versions of WordPress used a hack‐based extension system, but versions 1.2 and above of WordPress use a plugin API with hooks for extensions. HTTP://EDUCHALK.ORG: 150
HTTP://EDUCHALK.ORG
Hacking Hacking is the process of writing code for, or contributing code to, a piece of software. There is some controversy surrounding the meaning of this term. It began as a benign term meaning "to exercise proficiency" or "to alter or improve," but the popular media have since construed it to mean "to break into a computer system, usually with malicious intent." Many in the computer industry have recently begun trying to 'take back' the word from its popular mutation, and many have adopted the term cracking to replace the malicious interpretation. Because of the desire to reclaim the word, you will often find the term used in conjunction with open source projects, intended in its benign form. For more information about the history of the term, please see Wikipedia's article on Hacker. .htaccess A .htaccess file is a granular configuration file for the Apache web server software, used to set or alter the server's configuration settings for the directory in which it is present, and/or its child directories. WordPress uses an .htaccess file in conjunction with the mod_rewrite Apache module to produce permalinks. Note that .htaccess is a hidden file in Unix/Linux (as dictated by the preceding period '.'), meaning it may not be visible using the default settings of some FTP clients. HTML HTML, or Hypertext Markup Language, is the W3C standard language with which all web pages are built. It is the predecessor to XHTML, but HTML is often still used to describe either one. It is often used in conjunction with CSS and/or JavaScript. IP address An IP address is a unique number (e.g. 70.84.29.148) assigned to a computer (or other internet‐
capable information appliance, such as a network printer) to enable it to communicate with other devices using the Internet Protocol. It is a computer's identity on the internet, and every computer connected to the internet is assigned at least one — although the methods of assigning these addresses, and the permanence and duration of their assignment, differ according to the use of the computer and the circumstances of its internet use. Every web server is assigned an IP address as well, but often times hosting providers will assign multiple IP addresses to one computer, in the event that multiple web sites reside on the same physical server. This is the case with most inexpensive 'managed' or 'group' hosting packages. Domain names were created to provide an easier means of accessing internet resources than IP addresses, which are cumbersome to type and difficult to remember. Every domain name has at least one corresponding IP address, but only a small number of IP addresses have a domain name associated with them, since only computers that are web servers require domain names. The Domain Name System (DNS) is what maps Domain names to IP addresses. HTTP://EDUCHALK.ORG: 151
HTTP://EDUCHALK.ORG
JavaScript Developed by Netscape and Sun, JavaScript is a client‐side programming or scripting language. It's used to create interactive and dymanic effects on a web page, as well as handle and manipulate form data. JavaScript is a separate language from Java. All modern browsers support JavaScript, with the exception of most text based browsers, e.g., w3m. Some excellent JavaScript references and tutorials can be found at JavaScript Kit. Linux Linux is an open source computer operating system, created by Linus Torvalds, similar in style to Unix. It is popular in web server and other high‐performance computing environments, and has recently begun to gain popularity in workstation environments as well. Meta Meta has a number of meanings, but generally means information about. In WordPress, meta usually refers to administrative type information. As described in Meta Tags in WordPress, meta is the HTML tag used to describe and define a web page to the outside world (search engines). In the article Post Meta Data, meta refers to information associated with each post, such as the author's name and the date posted. Meta Rules define the general protocol to follow in using the Codex. Also, many WordPress based sites offer a Meta section, usually found in the sidebar, with links to login or register at that site. Finally, Meta is a MediaWiki namespace that refers to administrative functions within Codex. mod_rewrite mod_rewrite is an extension module of the Apache web server software which allows for "rewriting" of URLs on‐the‐fly. Rewrite rules use regular expressions to parse the requested URL from the client, and translate it into a different URL before interpretation. WordPress uses mod_rewrite for its permalink structure, which is optional functionality. MySQL MySQL is a popular open source SQL (Structured Query Language) database implementation, available for many platforms, including Windows, Unix/Linux and Mac OS X. WordPress requires a MySQL database to store all blog information, including posts, comments, metadata, and other information. News reader A news aggregator or news reader is a computer program which tracks syndicated information feeds, via RSS, RDF, or Atom. Most news aggregators allow one to 'subscribe' to a feed, and automatically keep track of the articles one has read, similar to an email client tracking read emails. HTTP://EDUCHALK.ORG: 152
HTTP://EDUCHALK.ORG
Many blogs make their content available in feed form for the convenience of readers using news aggregators. WordPress can generate feeds in RSS and/or Atom formats. Open Source Open source is simply programming code that can be read, viewed, modified, and distributed, by anyone who desires. WordPress is distributed under an open source GNU General Public License (GPL). Page A Page is often used to present "static" information about yourself or your site. A good example of a Page is information you would place on an About Page. A Page should not be confused with the time‐
oriented objects called posts. Pages are typically "timeless" in nature and live "outside" your blog. The word "page" has long been used to describe any HTML document on the web. In WordPress, however, "Page" refers to a very specific feature first introduced in WordPress version 1.5. Permalink A permalink is a URL at which a resource or article will be permanently stored. Many pages driven by Content Management Systems contain excerpts of content which is frequently rotated, making linking to bits of information within them a game of chance. Permalinks allow users to bookmark full articles at a URL they know will never change, and will always present the same content. Permalinks are optional in WordPress, but are highly recommended as they greatly increase the cleanliness of URL. WordPress uses the Apache module mod_rewrite to implement its permalink system. Permissions Permissions are security settings restricting or allowing users to perform certain functions. In the case of files on Unix or Linux systems, there are three types of permissions: read, write, and execute. In the case of MySQL databases, there are many more: SELECT, INSERT, UPDATE, DELETE, etc. — although MySQL refers to them as privileges. PHP PHP is a recursive acronym for PHP: Hypertext Preprocessor. It is a popular server‐side scripting language designed specifically for integration with HTML, and is used (often in conjunction with MySQL) in Content Management Systems and other web applications. It is available on many platforms, including Windows, Unix/Linux and Mac OS X, and is open source software. WordPress is written using PHP and requires it for operation. HTTP://EDUCHALK.ORG: 153
HTTP://EDUCHALK.ORG
phpMyAdmin phpMyAdmin is a popular, powerful web‐based interface for administering MySQL databases. It is open source, written in PHP, and is among the better tools available for working with MySQL databases. Ping Within the WordPress interface, "ping" is sometimes used to refer to Pingbacks and Trackbacks. In general computer terms, "ping" is a common utility used in a TCP/IP environment to determine if a given IP Address exists or is reachable. Typically, Ping is used to diagnose a network connection problem. Many times you will be asked, "Can you ping that address?". That means, does the Ping utility return a success message trying to reach the "problem" IP Address? Pingback Pingback lets you notify the author of an article if you link to his article (article on a blog, of course). If the links you include in an article you write on a blog lead to a blog which is pingback‐enabled, then the author of that blog gets a notification in the form of a pingback that you linked to his article. Plugin A Plugin is a group of php functions that can extend the functionality present in a standard WordPress weblog. These functions may all be defined in one php file, or maybe spread among more than one file. Usually, a plugin is a php file that can be uploaded to the "wp‐content/plugins" directory on your webserver, where you have installed WordPress. Once you have uploaded the plugin file, you should be able to "turn it on" or Enable it from the "Plugins" page in the administration interface of your weblog. The WordPress source code contains hooks that can be used by plugins. Port Within the context of the WordPress community, a port is a bit of code that has been rewritten to be compatible with WordPress. For example, if someone wrote a plugin for MoveableType, WordPress users may want to find a port of that plugin for WordPress. Port can also be used as a verb: to rewrite a piece of software for a different platform/language. Post Slug A word or two describing an entry, for use in permalinks (replaces the %posttitle% field therein), especially useful if titles tend to be long or they change frequently. HTTP://EDUCHALK.ORG: 154
HTTP://EDUCHALK.ORG
Post Status The status of a post, as set in the Administration Panel, Write Post SubPanel is either: Published (viewable by everyone), Draft (incomplete post viewable by anyone with proper user level), or Private (viewable only to WordPress users at Administrator level) QuickTag A Quicktag is a shortcut, or one‐click button, that inserts HTML code into your posts. The <b> (bold) and </b> (stop bold) HTML tags are example of Quicktags. Some Quicktags, such as <!‐‐contactform‐‐>, insert HTML comment code that is used by plugins to replace text or perform certain actions. Relative Path A relative path is the location of a file in relation to the current working directory and does not begin with a slash (/). This is different than an absolute path which gives an exact location. Relative URI A relative URI (sometimes called a relative link) is a partial URI that is interpreted (resolved) relative to a base URI. On the World Wide Web, relative URIs come in two forms: A relative URI with an absolute path is interpreted relative to the domain root: /images/icecream.jpg → http://domain.example/images/icecream.jpg A relative URI with a relative path is interpreted relative to the URL of the current document. E.g., on the web page http://domain.example/icecream/chocolate.html, strawberry.html → http://domain.example/icecream/strawberry.html RSS "Really Simple Syndication": a format for syndicating many types of content, including blog entries, torrent files, video clips on news‐like sites; specifically frequently updated content on a Web site, and is also known as a type of "feed" or "aggregator". An RSS feed can contain a summary of content or the full text, and makes it easier for people to keep up to date with sites they like in an automated manner (much like e‐mail). The content of the feed can be read by using software called an RSS or Feed reader. Feed readers display hyperlinks, and include other metadata (information about information) that helps you decide whether they want to read more, follow a link, or move on. Wikipedia's list of feed aggregators is fairly up‐to‐date and most are available for free. HTTP://EDUCHALK.ORG: 155
HTTP://EDUCHALK.ORG
The original intent of RSS is to make information come to you (via the feed reader) instead of you going out to look for it (via the Web). Programs called news aggregators permit users to view many feeds at once, providing 'push' content constantly. See Category:Feeds for Codex resources about bringing RSS feeds into WordPress. See also RDF Site Summary. Robots.txt Web Robots are programs which traverse the Web automatically. They are also called Web Wanderers, Web Crawlers, and Spiders. Search Engines are the main Web Robots. Some Web Robots look for a file named robots.txt on your web server to see what and where they should look for content and files on your web server. Some Web Robots ignore this file. Sidebar The sidebar, sometimes called the menu, is a narrow vertical column often jam‐packed with lots of information about a website. Found on most WordPress sites, the sidebar is usually placed on the right or left‐hand side of the web page, though in some cases, a site will feature two sidebars, one on each side of the main content where your posts are found. A sidebar is also referred to as a Theme Template file and is typically called sidebar.php. Slug A slug is a few words that describe a post or a page. Slugs are usually a URL friendly version of the post title (which has been automatically generated by WordPress), but a slug can be anything you like. Slugs are meant to be used with permalinks as they help describe what the content at the URL is. Smileys Smileys (also called Smilies or Emoticons) are stylized representations of a human face, usually displayed as yellow buttons with two dots for the eyes, and a half mouth. Smileys are often used in WordPress Plugins. By default, WordPress automatically converts text smileys to graphic images. When you type ;‐) in your post you see when you preview or publish your post. Spam Once upon a time, SPAM was an animal by‐product that came in a can and was fodder for many Monty Python sketches, but since the world‐wide adoption of the internet as an integral part of daily life, Spam has become synonymous with what is wrong with the internet. Spam, in general terms, is an email or other forms of unsolicited advertising. Spam is very easy to spread throughout the internet, and works on the principle that if you send out thousands, or hundreds of thousands of unsolicited advertisements, scams, or other questionable methods of making money, that you only need a very small percentage of people to be fooled and you will make lots of money. HTTP://EDUCHALK.ORG: 156
HTTP://EDUCHALK.ORG
Common spam these days comes from online gambling sites and those trying to sell drugs for "male enhancement." Lately, web logs, or blogs, as we call them, have been targeted by spammers to try to increase their site ratings in the search engines. Spammers use various methods to distribute their electronic junk mail, and employ bots, or computer programs to quickly and easily send email or comments to millions of addresses and IPs all over the world. Spammers can be difficult to track down as they often hijack peoples' email and IP addresses. When this happens, it may appear a friend sent you the spam, but in fact, the spammer's bot grabbed your friend's email address and used it to hide the true source of the spam. WordPress developers and community members are constantly working on more and better ways to combat these annoying spammers as they clog the internet with their garbage. You can help by offering your talents, ideas, suggestions, or just by being vigilant and installing any of the currently‐available spam combating tools. SSH SSH stands for Secure Shell. It is a communication protocol for connecting to remote computers over TCP/IP. Various authentication methods can be used which make SSH more secure than Telnet. SSL SSL stands for Secure Sockets Layer and is the predecessor to Transport Layer Security. These are cryptographic protocols for secure communications across an unsecured network like the Internet. SSL at Wikipedia Tag A tag is a keyword which describes all or part of a Post. Think of it like a Category, but smaller in scope. A post may have several tags, many of which relate to it only peripherally. Like Categories, Tags are usually linked to a page which shows all posts having the same tag. Unlike Categories, Tags can be created on‐the‐fly, by simply typing them into the tag field. Tags can also be displayed in "clouds" which show large numbers of Tags in various sizes, colors, etc. This allows for a sort of total perspective on the blog, allowing people to see the sort of things your blog is about most. Many people confuse Tags and Categories, but the difference is easy: Categories generally don't change often, while your Tags usually change with every Post. Tagline A tagline is a catchy phrase that describes the character or the attributes of the blog in a brief, concise manner. Think of it as the slogan, or catchline for a weblog. Text editor A text editor is a program which edits files in plain text format, as compared to binary format. Using a non‐text based word processing program (e.g. using Microsoft Word to edit PHP scripts) can cause HTTP://EDUCHALK.ORG: 157
HTTP://EDUCHALK.ORG
major problems in your code. This is because non‐text based word processing programs insert extra formatting into text files, and can corrupt the files when they need to be interpreted by the interpreter. An editor like Notepad does not insert any extra formatting. Theme A theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. A theme modifies the way the weblog is displayed, without modifying the underlying software. Essentially, the WordPress theme system is a way to skin your weblog. Trackback Trackback helps you to notify another author that you wrote something related to what he had written on his blog, even if you don't have an explicit link to his article. This improves the chances of the other author sitting up and noticing that you gave him credit for something, or that you improved upon something he wrote, or something similar. With pingback and trackback, blogs are interconnected. Think of them as the equivalents of acknowledgements and references at the end of an academic paper, or a chapter in a textbook. Unicode For a computer to display letters (or any text characters), it needs to enumerate them ‐ create an index of characters it knows how to display. These indexes are known as character sets. This is invaluable for users hosting WordPress in a non‐English language. The most widely used collections of these character sets are the iso‐8859 with iso‐8859‐1 and iso‐
8859‐15 (which contains the euro sign and some characters used in Dutch, French, Czech and Slovak) being the most common; they are also known as Latin1 and Latin9. These character sets use 8 bits (a single byte) for each character, allowing for 255 different characters (256, counting null). However, when considering that Latin‐based languages aren't the only ones in the world (think Japanese or Hebrew), 255 characters aren't nearly enough. There is a wide index of characters known as Unicode. Unicode has so many characters that sometimes more than 16 bits (2 bytes!) are required to represent them. Furthermore, the first 127 characters of Unicode are the same as the first 127 of the most widely used character set ‐ iso‐8859‐1. For this purpose, UTF, the Unicode Translation Format, was created. UTF uses different numbers of bits for characters, and allows for the entire range of Unicode to be used. What you should probably know is: •
UTF‐8 is an 8‐bit‐minimum type of UTF. There are also UTF‐16 and UTF‐32. •
If your document is in a Latin‐based encoding, you probably don't need to change anything about it for it to be UTF. •
A single UTF document can be in various languages with no need to switch encodings halfway through. HTTP://EDUCHALK.ORG: 158
HTTP://EDUCHALK.ORG
Web server A web server is a computer containing software for, and connected to infrastructure for, hosting, or serving, web sites written in HTML. The most common web server software on the internet is Apache, which is frequently used in conjunction with PHP, Perl, and other scripting languages. It is possible to create one's own web server, hosted on any speed of internet connection, but many people choose to purchase packages from hosting providers, who have the capacity and facilities to provide adequate bandwidth, uptime, hardware, and maintenance for frequently‐visited web sites. XFN The XHTML Friends Network. A decentralised project to have inter‐blog links that represent relationships between bloggers. XFN links resemble <a href="http://www.photomatt.net/" rel="friend met">Photo Matt</a>. XHTML XHTML, or Extensible HyperText Markup Language, is the successor to HTML as the W3C standard language with which all web pages are created. It is often used in conjunction with CSS and JavaScript. XML XML, or Extensible Markup Language, is written in Standard Generalized Markup Language (SGML) and essentially allows you to define your own markup language. XML is extremely useful in describing, sharing, and transmitting data across the Internet. Typically used in conjunction with HTML, XML defines data and HTML displays that data. XML‐RPC XML‐RPC is Extensible Markup Language‐Remote Procedure Call. A Remote Procedure Call (RPC) allows you to a call (or request) another application and expect that application to honor the request (answer the call). So, XML‐RPC allows a user (or developer) to send a request, formatted in XML, to an external application. HTTP://EDUCHALK.ORG: 159