WordPress Site Reviews

You Asked For It

When posting your site in the Your WordPress section of the WordPress Forum, you are inviting critique and review of your WordPress site. If you are not specific with the feedback you want and need, reviewers will be as kind or harsh as they see fit. You asked for it, and you are going to get it.

Remember, none of the comments are personal. They do not reflect upon your ability, or lack thereof, to design or develop websites or web pages. They are meant to be constructive, informative, and helpful when possible.

If you are new to WordPress, PHP, CSS, and HTML, then say so and reviewers will be a little more gentle and helpful, leading you through the process of fixing the problems and making changes. If you wish to have a very critical review of your site, say so. The reviewers will "let you have it," good or bad, all in an attempt to help you improve your site.

Reviewers will inspect the following:

• Overall Presentation
• Use of Colors and Graphics
• Site Navigation
• Use of WordPress Features, Tools, and Plugins
• Code Validation

Reviewers will not "rate" your site compared to other sites. They will not comment on content or editorial material, so do not ask for such reviews. If they feel inclined, they will post a note directly on your site or via email to you.

A WordPress Forum Reviewer will do their best to give you an objective perspective on your site. The information they provide will usually follow web standards and WordPress practices. They might add comments about their personal preferences for colors, fonts, use of images, and such, but these are their opinions.

The volunteer reviewers do their best to speak the truth and help you improve your site or celebrate it. You can take their recommendations or not, it is up to you. Just remember, you asked for it.

Review Criteria

Any site powered by WordPress is eligible to be reviewed.

To have your site reviewed and critiqued, post a link and a description of your site's purpose and what you want and expect for a review. Detail if you want a soft or harsh review.

List the URL (link) to the site as a complete clickable link. You can write the link in a full HTML anchor on the forum like these:

<a href="http://example.com/wordpress/index.php">Title of Website</a>

<a href="http://example.com/wordpress/index.php">http://example.com/wordpress/index.php</a>

http://example.com/wordpress/index.php

Note: The last example must have a space before and after it to show up as a link. Do not put it in quotes or parentheses. You can put it on its own line to make sure it will turn into a link.

Sites that are reviewed tend to be categorized into two areas: blogs and websites. Please indicate which category your site falls into so reviewers can report back with a review that more closely aligns itself to your site's category.

Blog

A blog is a personal reflection of the blogger's interests and topics. Reviewers may comment on how they perceive the Theme and use of WordPress features reflect the personality of the site and blogger.

Website

A website is a site typically dedicated to a purpose or function, and it might be personal or commercial. Reviewers may comment on how they perceive the site's Theme and layout to reflect the products or content.

We do ask that if your site has adult or content that might be offensive, tell us. You will still get reviewed, it just helps to provide people with a little warning.

Responsibilities of the Reviewers

To be sure we are playing fair and nice when reviewing WordPress sites for the Forum, the following are the guidelines for reviewing sites:

1. Reviews will be fair and non-personal.
2. Play nice or do not play.
3. If you do not like the content or purpose of the site, refrain from reviewing it.
4. Review only presentation and use of WordPress. Save comments on editorial content for the comment sections on that site, not on the WordPress Forums.
5. Personal bias and preferences on design elements may be mentioned, but state that this is your opinion, not a web standard.
6. Statements will be practical, helpful, and encourage good web practices.
7. When referencing a specific problem or resource, be as specific as possible and use links to the problem or resource.
8. If the site has a problem beyond the scope of the Your WordPress section, refer them to the Support sections for posting a question on the specific problem.
9. Remember, all reviews, critics, and comments are the responsibility of the reviewer and not WordPress nor its representatives.

Review Procedure

Everyone has their method for reviewing a site. Some only look at the surface presentation of the site and rarely delve deep within a site's depths to see all the pages and posts. Others will look at the site's use of presentation styles, dig into the code to check it, and give a more detailed review. Be sure and ask for the depth of review you need when requesting a review of your site.

To help you understand what reviewers look for when reviewing a WordPress site, here is a checklist.

Access

How long does the site take to load? What comes up first? Are wait times long because of large graphics or links to external references like graphics off-site? Extremely long load times will often result in a site not being reviewed.

Overall Presentation

While WordPress comes with two Themes, reviewers want to see what you have done beyond the core Themes. They are looking for use of color and graphics, then layout and navigation. Do the colors match or contrast in a way to accentuate the content and purpose of the site? Are they overwhelming or hard to read or easy on the eye? Are the navigation areas easy to find? Is the purpose of the site clearly visible to the eye?

Site Architecture

Does the site make use of CSS layout and presentation? Is it in tables, frames, or iframes, or other non-standard web structures? In general, these are considered bad design form, but they might work for your site and reviewers will comment on their usage, good or bad. Does the sidebar overlap or is too close to the content? Is the footer a great distance from the rest of the content. All site architecture will be inspected and commented on if it is either not working or looks "uncomfortable."

Site Purpose

While not critical to the review, visitors look for clues to the purpose of a site. This is often reflected in the layout and design elements, use of color and graphics, and clear titles and explanations. Reviewers will look for these elements, too.

The Header

The header is a very important part of a site. It provides immediate information about the site and its purpose. It can be done through the use of words, color and graphics. If the header lacks definitive style and information, the reviewers will let you know immediately.

Navigation

Navigation elements for a site are often found within the sidebar of a web page, but they may also be within the header and footer. Reviewers will hunt for these and look at how the information is laid out, and how navigation works through your site. This includes clear use of Pages, Categories, Archives, Calendar, and other navigational tools.

Use of Color and Images

As part of the overall presentation of a site, reviewers will look at the use of color and images within the site. This includes the use of these in the header, sidebar, footer, content, and titles. It also includes the use of color and graphics in the background of the overall site and individual sections like the sidebar and header. Is the font readable against the graphics or photographs? Do these colors and images overwhelm or enhance the site?

Fonts and Text Size

Small fonts are one of the most complained about elements on many sites. Make sure fonts are readable and have enough of a color contrast between the background color and text color. White text on a black background is fine as long as the text is large enough and "thick" enough to be seen against the black background. Gray text on a black background may look good in theory, but is very hard to see. Same as pink on red, or green on blue. Since people tend to look at the words on a site from the moment of their arrival, the readability of the fonts counts.

WordPress Tags and Templates

As the reviewer moves around your site and inspects the navigation, they are also looking at how WordPress is used to display your site's content and information. Are you using template tags to list your categories or the drop-down menu tags? How are you using the WordPress PHP Loop within your site to change how content is generated? Does the sidebar change when visiting the single post or category pages? Do other elements within the template files change as the reviewer move around the site, displaying information unique to each web page? Are the search, category, or archive pages unique and different from the rest? WordPress has a lot of powerful features and conditional tags that generate different information as well as different looks depending upon the request and serious reviewers are looking for such usage.

WordPress Plugins

Reviews often recognize the use of popular plugins and tools and may comment on usage of these add-on features, especially if the usage is distinctive. If there are too many plugins cluttering things up, or problems with the plugins, they will also point these out.

Cross-Browser Inspections

Typically, the Themes and Templates Support section handles issues with browsers on website design and layout, but some dedicated reviewers may inspect your site in various browsers to help you out. If you would like this service, ask.

Code Validation

Every web page generated by WordPress is based upon two core files: template files and the style sheet. There can be one or many different template files and one or more style sheets, and all of this code needs to be checked for errors. Many reviewers will run your site's pages through a validator to check for HTML and XHTML errors and errors within your style sheet or CSS. These checks help you know if your site meets the web standards, and it also helps to clean up errors and prevent bigger ones from occurring. Part of having a solid website is having solid code and reviewers will inspect it for you and report on errors and ways to fix it, if they can.

Say Thank You

WordPress volunteers on the Forum offer this service for free. Their goal is to help you create the best WordPress site you can. They take time out from their own busy schedules and WordPress sites to help. Be sure and take a few minutes of your time to show your appreciation and say thanks.

And from the lessons you learn from your own review, you will start paying attention to other sites and how they work, and soon you can show your appreciation to the WordPress Community by reviewing other people's WordPress sites.

Source:  http://codex.wordpress.org/WordPress_Site_Reviews

I Make Changes and Nothing Happens

The Browser Cache

Did you know that a computer is supposed to make your life easier? Less complicated? It is supposed to save you time and energy and actually improve your life. No? Well, maybe not, but your Internet browser does its best to try to make your life a little easier.

When you first visit a web page, it often takes a while to load, right? But the next page you visit within that site doesn't take so long to load. This is because, in an effort to be helpful, the browser stores the information on your computer so it reloads it from your computer, not from the actual site. This is called the cache and it is meant to speed up your Internet browsing.

The term cache may sound familiar. Remember the pirates and thieves of old who would stockpile their treasures in a cave, hole in the ground, or somewhere "safe". Called the cache, the Internet browser stores files and information for the browser to reuse when the page is refreshed or viewed again.

The problem comes when you make a small change to your site and the browser doesn't recognize it as a significant change, so it reloads the same page you just looked at. The solution is to clear or empty your browser's cache.

Clearing the Browser Cache

Normally, to see the changes on your page, you click the Refresh button on the browser toolbar or press the F5 key on your keyboard. In many cases, this simply reloads the page without clearing the browser's cache. Here are some techniques to wipe clean the browser's cache so you will see the changes when your page reloads.

Microsoft Internet Explorer

1. Hold down SHIFT and click on the REFRESH button in the toolbar under the menu.
2. For Serious Clearing: If you are having problems clearing out the cache, then force it by choosing from the menu TOOLS > INTERNET OPTIONS > TEMPORARY FILES. Click on Delete Temporary Files. You can choose the checkbox to delete all Internet files, but you might not want to as that will also clear all your passwords and cookies, but if you are having trouble viewing the changes on your page, go all the way.

Mozilla Firefox

1. Hold down CTRL+SHIFT+R.
2. If you are using Chris Pederick's Web Developer Extension, click Miscellaneous and then Clear Cache.
3. For Serious Clearing: From the browser menu, Tools > Options > Privacy > Cache and select Clear.

Netscape

From the menu, click Edit > Preferences > Advanced. Choose "Cache" and click both "Clear Memory Cache" and "Clear Disk Cache".

Mozilla 1.x and up

From the browser menu, Edit > Preferences > Advanced and click "Cache" and "Clear Cache".

Opera

From the browser menu, Edit > File > Preferences > History and Cache and click "Cache".

Safari

From the browser menu, Safari > Reset Safari and click Reset to confirm OR Safari > Empty Cache.

Miscellaneous

Each browser may have a way of stopping or minimizing the caching of web pages. Using this technique will definitely slow down your web page viewing, and it isn't a perfect solution because some caching may still occur, but it does help. Check your Internet browser's help files for the specifics on how to turn off the cache feature.

A WordPress Cache Plugin

Some WordPress plugins also add cache functionality to your blog. This helps your blog load faster because WordPress can retrieve the pages of your blog from the cache instead of generating them all over again.

All good cache plugins will clear the cache when a post, page, or comment is published. However, if you make other changes (e.g. to your theme), the cache may not be cleared and the old version may still appear. In this case, check the plugin's instructions to find out how to clear its cache.

Note that WordPress does not come with a cache by default, so the above would only apply if you installed a cache plugin yourself.

Check Your Source

You know, even the very best web page designers, developers, and programmers screw up. It's the little details, the forgotten semi-colon, the misspelled tag, the lack of attention to a detail that screws things up. If the best do it, then it's very possible you have overlooked a little detail. And if you did, well, welcome to the club. It's a part of the process. Let's look at some of the most commonly overlooked details that happen when you aren't paying attention.

Check the Address

Is the name and folder for the file you "fixed" the same as the one you are viewing? Look at the following two addresses (URLs).

• wordpress/wp-content/themes/yourtheme/style.css
• test/wordpress/wp-content/themes/yourtheme/style.css

In this case, you can probably see the difference, but when viewed in an address bar or in a text editor, you might miss the word test that sets the folder.

Pay very close attention to the difference between style1.css and stylel.css if you are using different style names, too. The first filename is style followed by the digit one, while the second filename is style followed by a lowercase L. If you are working with different but similar files, make sure you give them distinctive names like style-red.css and style-800.css so you can clearly see the difference.

Check the Template

If you're editing a template, are you sure the page you're viewing is being generated from that template? Remember that many templates have very similar text on them; for example, a post header may appear on a single post page, index page, search page, archive page, and others.

See Template Hierarchy if you're having trouble figuring out which template is in use.

Check Your Upload

When you make a change in a file, it is often on your computer's hard drive and you have to upload the file to your host server in order to view it on the Internet. Did you actually upload it? Did you put it in the right folder? Is it really there? When over-writing the exact same file, it doesn't always do a complete over-write, so consider deleting the original on the host server and then uploading the new version to make sure the right and whole thing is there.

Test Yourself

If you still can't see the changes you made, and the file is in the right place with the right name, and you are sure it's the right file, then go through these steps:

1. Make a backup of the file you are working on and check that the backup is in a safe place.
2. Make a big change (such as setting the background in your style.css as #ff0000 or even red).
3. View the changed web page in your browser. Make sure you clear the cache to be sure you have the new version.
4. If nothing changes, delete the file (and only that file) from the server and try to view the file again. If nothing continues to change, you and WordPress are looking at completely different files. It's time to get out your detective hat and start tracking down what is going on and where your files went to.
5. Check your URL settings in your Options Panel and also in the database, and if this continues to be unsolvable, post a note explaining what you've done and what's the result on the WordPress Forum and let the experts step in to help.

Debug It

Programmers use the term debug to describe the process of going through code and finding the little criminal that is messing things up. We're going to look at how to debug your CSS, HTML, and PHP code to help you figure out why you can't see the changes you have made.

When debugging a problem, change only one thing at a time. If you're not sure if the problem is in line 37 or line 40, don't change both lines in one go! First change line 37, and see if that fixed the problem. If not, undo the change you made on line 37 and then make a change on line 40. It's important to undo proposed fixes before trying something else, even if the first attempt doesn't immediately introduce new problems.

Every time you make a change to a file, you run the risk of accidentally making more mistakes. These sorts of things tend to cascade, making debugging an infuriating process. Do one thing at a time.

Debugging CSS

Debugging your style sheet, or your CSS, can be challenging because you have to find the area in the HTML that is causing the trouble and then track that section back to its style in your style.css file. The article on Finding Your CSS Styles will help you find those troublesome sections.

Once you have found the style that is causing the problem, you need to figure out what it is about the style that is causing the problem. Here is a quick checklist of things to consider as you troubleshoot your CSS:

• Is everything spelled correctly?
• Is every period, brace, colon and semi-colon in its right place?
• Are you using the style attribute or declaration correctly?
• Is there a declaration that shouldn't be in there, like font-weight:x-large? The declaration x-large is used for font-size not font-weight.
• Do you have spaces in places where they shouldn't be, like inside of a background-image:url ( ' bg.gif ' )? (correct: background-image:url('bg.gif'))

You can find more information to help you debug and troubleshoot your CSS with:

• CSS Troubleshooting
• Finding Your CSS Styles
• CSS Fixing Browser Bugs
• Troubleshooting Your Theme - Coming soon

Debugging HTML

Similar to debugging CSS, HTML can also get bogged down with careless little mistakes like misspellings, forgotten closing tags, forgotten < arrows, and other little errors that can send your site into twisted remains.

It is highly recommended that you use one of the HTML Validators available for free on the Internet. Also, Mozilla Firefox has a powerful free add-on (actually bundled with most Firefox installations) called the Web Developers DOM Inspector that will help you validate and fix your website problems very quickly and easily.

Some tips for debugging your HTML/XHTML may include:

• Improperly nested XHTML, especially in nested lists commonly found in the sidebar.
• Unclosed tags.
• Self-closing tags not closed by use of the forward slash (example: <img src="ball.gif" />).
• Incorrect tag usage.

For more help on debugging your HTML, check out these articles and resources:

• Validating a Website
• Stepping Into Template Tags

Debugging PHP

If you have access to your webserver's error log, take time to check it. PHP usually logs informative errors here when things go wrong. These log messages can sometimes be a little cryptic, but they should always give the line number of the offending piece of code.

Unfortunately, what PHP thinks is the offending piece of code is sometimes not the problem. For example, an unclosed curly brace { may be reported as a problem on some line number way on down in your script. A quick cheat sheet of PHP error messages and their common causes can be found at Common PHP Errors.

To debug your PHP, here are the steps you should follow:

See Where You Are

The die() command is probably the single most useful debugging tool available. die() immediately halts execution of the program, optionally displaying a message of your choosing.

When trying to work through problems, sprinkle die() statements in at key sections of your script, giving each an informative message:

die('Stage One Complete');
die('Disinfribullation Complete');
die('Finished Collating');

Load your program, and see which message (if any) gets displayed. If you see the first message, you know your program got that far without error. You can safely remove (or comment out) that die() command, and re-run your program, to see how much farther it got. Step through your program this way until you've isolated the problem area.

This technique has some limitations, though. First, if nothing is being displayed in your browser, then most likely you have a fatal syntax error somewhere in your script. Check your webserver's error log, if possible. If the script executes completely -- but incorrectly -- and none of your die() messages are displayed, then you've got some more work to do.

See What's What

If things aren't being set as you want them, or stuff isn't happening when you want, you'll likely need to check the value of different variables at different places of your script. Simply pass the variable to a die() command, and you'll be able to see what that variable's value is:

die($user_level);

This will display the value of the variable $user_level, which should reveal the current user's user level.

This technique is fine for some variable types, like boolean and string ("scalar") variables in programmer parlance; but fails for arrays and objects. To see the value(s) of arrays and objects, use the print_r command:

print_r($post);

It will display the value of the $post array in a human-readable format:

Array ( [0] => stdClass Object ( [ID] => 1 [post_author]
=> 1 [post_date] => 2005-02-16 09:16:46 [post_date_gmt]
=> 2005-02-16 14:16:46 [post_content] => Welcome to
WordPress. This is your first post. Edit or delete it,
then start blogging! [post_title] => Hello world! [post_category]
=> 0 [post_excerpt] => [post_status] => publish [comment_status]
=> open [ping_status] => open [post_password] => [post_name]
=> hello-world [to_ping] => [pinged] => [post_modified] => 2005-04-15
08:45:42 [post_modified_gmt] => 2005-04-15 13:45:42
[post_content_filtered] => [post_parent] => 0 [guid]
=> /?p=1 [menu_order] => 0 ) )

This format allows you to see what each key/value pair is inside the array.

Using print_r() does not stop execution of the program, so it is often necessary to call die() immediately afterwards.

Use print_r() and die() to check the values of your variables through the execution of your script. There's also a var_dump() function which works similarly. Use whichever mechanism you find most informative.

When All Else Fails

If all else fails, know this: You are not alone. We've all been there. To help you get back on track and your site up and running again, check the following resources for more help:

• Troubleshooting
• WordPress Lessons

Source:  http://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Finding WordPress Help

Searching The Net For WordPress Help

There are a variety of ways to search for the information you need. The biggest problem is finding the "words" that describe your problem. The next biggest problem is limiting your search to only WordPress resources or sites. Let's look at how to do this.

Search Using Keywords

Sometimes it's easy to search using keywords because the problem you are having tells you what is wrong with it. Copy the most important words from the error, paste them into a text editor and take a good look at them. Here is an example:

Warning: main(/home/atlantis/public_html/wp-includes/
functions.php): failed to open stream: No such
file or directory in /home/stargateatlantis/
public_html/wp-settings.php on line 67

Fatal error: main(): Failed opening required
'/home/atlantis/public_html/wp-includes/
functions.php' (include_path='.:/usr/lib/php:
/usr/local/lib/php') in /home/stargateatlantis/
public_html/wp-settings.php on line 67

Hidden within this information are the key words you need to help you get the answers.

Opening the files referenced, like functions.php, might help, but other files are often processed long before it gets to functions.php or wp-settings.php and the line number related to the generated file is not necessarily the line number in those template files. It might get you close, but maybe not.

From this error, though, you have some critical information to help you with your search. You know the names of the files that are causing the grief:

• functions.php
• wp-settings.php

These are part of the keywords that you will need to be looking for.

The specific errors are failed to open stream and failed opening required and they both happen within the wp-settings.php file. Maybe the problem isn't in the functions.php but in the wp-settings.php file? And you see the words "failed" and "open" in both errors. That's a clue.

Create a search in your favorite search engine that included the words:

wordpress failed open wp-settings.php

This should get you started on narrowing down the problem.

But not all keywords can be so easily found. If the problem is with CSS or HTML, you can include the specific tag or selector that has the problem, but this might not be the problem at all, so you need to hunt for words that describe your problem.

If there is a difference in your web page layout in Microsoft Internet Explorer and another browser, then search for information on Internet Explorer layout bugs. If you have a consistent error in the different browsers in the layout, which part of the layout is it affecting? The sidebar, header, post content, or comments? If the problem is the image in the header not showing up or not working right, then search for wordpress header image to start, then add the specifics like wordpress header image missing to narrow things down.

Brainstorming Search Terms

When really struck for keywords, you can try brainstorming your keywords. First, write down the problem. Be as descriptive as you want:

I'm having trouble with the nested list in the sidebar of my layout. It isn't lining up the items under the titles right. It is keeping things on the left margin when I want them to be indented.

Right there, you've listed keywords to search with within your description. There are:

• sidebar
• layout
• nested list
• left margin
• indented

Arrange those in different ways and you have some keywords to search with.

A second method is to talk it out with someone. It doesn't matter of the person you talk to is a WordPress expert or not, just talking to them will force you to use very simple terms and references, and among those are your keywords. Your friend might respond to your description with:

"Oh, you are trying to change X to B and get the result P. Why didn't you say so?"

There, you have your search keywords.

Searching Tips and Tricks

Once you have some starting keywords, it's time to put them to work. Remember, you are not stuck with your starting keywords. They are just that, a start. As you dig into the information, you may replace those words with ones that narrow the field down a little. For example, if you are looking for "wordpress sidebar layout nested links", you may discover that the problem lies within the specific Theme you are using, add the name of the theme to your keywords and it may narrow down your search.

Let's look at some more tips for improving your odds of finding a solution.

Search Engine Site Search

Did you know you can search a specific site from a search engine?

Google Site Search

To search a specific website, like wordpress.org, in the Google search window, type your keyword and end with the site: reference:

keyword1 keyword2 keyword3 site:wordpress.org

Google will search all wordpress.org sites such as www.wordpress.org, wiki.wordpress.org, and codex.wordpress.org.

To narrow down your search to a specific site, like www.wordpress.org', use the site: reference and type:

keyword keyword keyword site:www.wordpress.org

Google will search only the www.wordpress.org site, which includes the Support Forums, but not the WordPress Codex or Wiki.

Yahoo Site Search

To search a domain or website specifically in Yahoo, their Yahoo's Advanced Search Page allows searching by domain name directly.

Other Search Engines

Other search engines provide a variety of ways to narrow your search to a specific site. Check with their Advanced Search Options, if they provide them, or at the Search Engine Watch's Search Command list for details on searching by domain or url.

Use Quotes to Group Keywords

You can group different keywords together to narrow your search. For example, instead of looking for:

sidebar layout nested list left margin indented

You can group key phrases together with quote marks:

sidebar layout "nested list" "left margin" indented

This would limit your search to anything with the words sidebar, layout, and indented, and the phrases "nested list" and "left margin".

Source:  http://codex.wordpress.org/Finding_WordPress_Help

Using Wordpress Images

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"/>

For more information on styling images in WordPress, see Wrapping Text Around Images.

Images Resources for WordPress

There are a variety of WordPress Plugins which add image functionality, utilities, and galleries to your website. Some run from within WordPress while others stand alongside.

You can also add images to your WordPress site through the use of template tags, Plugins, and in the style sheet of your Theme. For example, you can add images to your:

• Categories
• Comments with Gravatars
• Graphics Symbols
• Header
• Headings
• Smilies
  

  

  Gravatar used in Comments

• Sidebar
• Footer
• Lists
• Menus
• Between posts
• Between lists
• Graphics in Feeds
• Links and Blogrolls
• Next and Previous Links
• Template Tags - Many feature image parameters

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.

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.

In versions of Wordpress later than 2.5, inserting images has become very easy. Please see this page: http://codex.wordpress.org/Using_Image_and_File_Attachments

- - -

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.

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 "Gallery" of images that are available for that blog. If you want to insert the same image into another post go to the "Gallery", hit the "Show" link, and then follow the same instructions to insert that image into another location or post.

You can also manually upload an image onto your webserver with an ftp program. The details for this method are not included here.

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

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 basically X 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 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 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" />

If you need more styles for different images, you can create more of them as needed.

Styling One or Two Images Inline

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."

Source: http://codex.wordpress.org/Using_Images

Stepping Into Template Tags

What is a Template Tag

A template tag is code that instructs WordPress to "do" or "get" something. In the case of the header.php template tag for your WordPress site's name, it looks like this:

<h1><?php bloginfo('name'); ?></h1>

The template tag is <?php bloginfo(); ?> wrapped in an H1 heading tag. The bloginfo() tag gets information from your User Profile and Options > General in the Administration Panels. In the example here, the word name inside of the quote marks in the tag instructs the tag to "get the blog's site name". This is called a parameter.

Template Tag Parameters

In addition to the name parameter in the <?php bloginfo(); ?> template tag, there is other information that can be displayed. Let's look at a few of these parameters - and you can find more information and examples on the bloginfo() Codex page.

name <?php bloginfo('name'); ?>

As mentioned, this displays the name of the site and is set by the administrator in the Options > General SubPanel by default.

description <?php bloginfo('description'); ?>

This is called the "Tagline" for your blog which is usually some kind of descriptive sentence that says "My blog is about....". It is set by the administrator in the Options > General SubPanel.

url <?php bloginfo('url'); ?>

When you want to display the URL or website address for your WordPress site, you can use URL and it will show up. This also comes from the Options > General SubPanel.

admin_email <?php bloginfo('admin_email'); ?>

If you want to display the email of the administrator, you don't have to type it into the template files. By doing so, it may be open to email harvesters who use sophisticated software to come in and grab email addresses to use for spam. By using bloginfo('admin_email'), the email is displayed on the page for the viewers, but the actual email address is disguised from the harvesters. Nice, huh? The administrator's email address is set in the Options > General SubPanel.

version <?php bloginfo('version'); ?>

Sometimes you'd like to show off which version of WordPress you are using. The Themes that come with WordPress by default include this information in the footer template. It simply displays the version of WordPress your blog uses.

To show the WordPress version, the template tag would look like this:

<p>Powered by WordPress version <?php bloginfo('version'); ?></p>

Notice that only the version number is generated by the version parameter, not the words "Powered by WordPress version". Those were written in before the tag so they would be visible on the web page.

To learn more about template tag parameters, see Anatomy of a Template Tag and How to Pass Tag Parameters.

How Do You Use Template Tags?

Going through the various template tags in the Template Tags menu on the Codex, you will see that many of them are very simple, like the bloginfo() template tag, but many look very complicated to use. Let's look at some examples of how they are used to help you understand the "language" of the template tag codes.

As we saw in the bloginfo() template tag, all it took was one word to change the output of the tag. This word is called a parameter and it instructs the template tag to do or get something. In this case, the instruction is to get name which displays the site's name.

The template tag the_title() displays the title of the post, usually at the top of your post article. This tag gets the post title and displays it, by default, but it also has a do in the parameters which will help you change the look and presentation of the post title.

By default, the tag looks like this:

<?php the_title(); ?>

And the results look something like this:

Let's say you want to put some kind of reference that highlights the title in some way, like a graphic or character entity like an arrow or bullet. Let's put a yen sign, ¥ ,the sign for Japanese money, in front of our title.

If you look carefully at the instructions for the tag the_title(), you will see that the parameters are:

<?php the_title('before', 'after', display); ?>

We want the yen sign to be before the title, with a space after the yen sign and before the title, so let's add it to the parameters:

<?php the_title('&yen; '); ?>

Which, when the page is generated, would look like this:

Now, let's take this a little further and put something after the post title. Let's say you want to encourage people to read so we'll add a little incentive arrow ( » ) to motivate them.

<?php the_title('&yen; ', ' &raquo;'); ?>

Notice, we added another space before the arrow to separate it from the post title when the page is generated for viewing.

You can also style your title heading in many different ways. Here is another example using heading tags.

<h2><?php the_title('Post Title: '); ?></h2>

We've put the entire post title into an H2 heading and added the phrase "Post Title" to the beginning of the post title.

Note: Not all template tags take before and after arguments, though the_title does. Check the codex page for the specific tag you're using to see what arguments it accepts.

Boolean Template Tags

The above template tag example uses simple parameters separated from each other with quote marks and commas. Now consider examples of Boolean Template Tags that connect more than one parameter together using boolean math techniques. One common boolean expression uses the "and (&)" logic to connect the parameters.

The template tag wp_list_cats() is commonly found in the WordPress sidebar or menu template file. It lists the site's Categories.

<?php wp_list_cats(); ?>

By default, some of the template tags' parameters are:

• all - Displays all of the Categories
• sort_column - Sorts by Category ID
• sort_order - Sorts in ascending order
• list - Sets the Categories in an unordered list (<ul><li>)
• optioncount - Does not display the count of posts within each Category
• hide_empty - Based upon the first two parameters (optionall and all), does not display Categories without posts
• use_desc_for_title - Uses the Category description as the link title
• children - Shows the children (sub-Categories) of every Category listed

An example of this category list might be:

The indented list with "About WordPress", "About Writing", and "About Story Telling" are the children or sub-Categories of the parent Category "Things I Want To Share". These titles, by default, are not the actual titles of the Categories, they are the descriptions of the Category you set in the Administration > Manage > Categories panel.

If you would like to show the actual title of the Category, instead of the Category description, change the template tag to:

<?php wp_list_cats('use_desc_for_title=0'); ?>

The zero sets the parameter to false, turning off the use of the description as the title. Now the Category titles would appear:

Let's say that you don't want the sub-Categories for "Sharing" to appear on your list. You would then add the parameter to not show the children, along with the parameter for showing only titles and not descriptions, with the boolean "and" using the ampersand ( & ).

<?php wp_list_cats('use_desc_for_title=0&children=0'); ?>

Notice there are no spaces around the ampersand. All the parameters run together without any spaces or quote marks in between, just around the whole parameter. Now the Category titles would appear as:

As another example, if you want to display the Category links as the Category title, sort the list alphabetically by name, show the number of posts within each Category, and only show the children (sub-Categories) of Category ID number 3 ("Sharing"), the template tag would look like this:

<?php wp_list_cats('sort_column=name&sort_order=asc&optioncount=1&use_desc_for_title=0&child_of=3'); ?>

Template Tags and The Loop

Many of WordPress' template tags work within the WordPress Loop. This means that they are included in the template files as part of the php "loop" that generates the pages the viewer sees based upon the instructions inside of the Loop.

The WordPress Loop begins with:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Template tags that work within the loop must be in the middle area here, before the ending section of the Loop below:

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Template tags that need to be inside of the loop include the_content(), the_excerpt(), next_post(), and previous_post(). If the template tag you want to use doesn't have to be within the Loop, like wp_list_cats() and wp_list_pages(), then you can put it anywhere you like, for instance in the sidebar, header, or footer template files.

Source: http://codex.wordpress.org/Stepping_Into_Template_Tags