Background

I was getting this error when I first installed the plugin. I then moved the .htaccess file in the proper location and everything seemed to be working. I then enabled WordPress Networks (Formally called Multisite).  I started getting that error again from WP-DBManager about being being visible to the public.

Solution

It turns out that in order to remove the error message happens because wordpress uses virtual directories. Because the .htaccess file isn’t in the virtual directory it put’s up the error. To get around this you need to disable WP-DBManager for the network. Once disabled go to the main WordPress site and enable the plugin there. Do NOT enable the plugin on sub-networks. Voila! You’re done.

Removing the related videos isn’t all that hard to do. You can only remove the related videos on videos that are embedded  in other webpages. You need to add “&rel=0” to the “src” link.

After making the adjustments here’s what it looks like.

Overview – The backup will use WP-DBManager to backup the sql first. I will then use my computer to sync the website to my local PC.

Things needed – You will need a Windows PC, Cobain Backup and WP-DBManager.

First log into your WordPress install. You will need to go to the plugins and install “WP-DBmanager”. You will also need to setup the backup. It’s pretty easy to do. If you are installing it on GoDaddy servers make sure to check out my other post – http://jaredheinrichs.com/how-setup-wp-dbmanager-with-godaddy-mysqldump-and-mysql.html

Once done make a backup of the sql database.

Install Cobain Backup on your locally on your PC. Make sure to setup a Task where the source is an FTP site and the destination is your local machine.

Sync the task You local folder will now not only have everything on the Webserver it will also have the DB Backup. Hope this helps

To get things working you will need to enter this info:

If you don’t have this info entered you will see red errors all over the place and the backup will not work properly.

Hope this helps anyone trying to setup WP-DBManager on GoDaddy!

You can most likely tell that  WordPress’s bloginfo() function will return some information regarding your blog. I’ve listed all of the command you can feed bloginfo() below.

name                 = Testpilot
description          = Just another WordPress blog
admin_email          = admin@example

url                  = http://example/home
wpurl                = http://example/home/wp

stylesheet_directory = http://example/home/wp/wp-content/themes/child-theme
stylesheet_url       = http://example/home/wp/wp-content/themes/child-theme/style.css
template_directory   = http://example/home/wp/wp-content/themes/parent-theme
template_url         = http://example/home/wp/wp-content/themes/parent-theme

atom_url             = http://example/home/feed/atom
rss2_url             = http://example/home/feed
rss_url              = http://example/home/feed/rss
pingback_url         = http://example/home/wp/xmlrpc.php
rdf_url              = http://example/home/feed/rdf

comments_atom_url    = http://example/home/comments/feed/atom
comments_rss2_url    = http://example/home/comments/feed

charset              = UTF-8
html_type            = text/html
language             = en-US
text_direction       = ltr
version              = 3.1

I’m guessing since you are here you are wondering how can you use bloginfo() in your theme and why should you care?

The thing I tend to use bloginfo() for is making sure that no matter where on the site, things like my CSS file location, my home page and theme files are always calculated properly. One of the things I see most often with new WordPress users is that they use relative paths to files like CSS and images. While this might work in static sites, it doesn’t really work all that well in dynamically creates site like a WordPress Website.

Here’s an example:

Notice how I highlighted that the url has several sub folders – “/category/operating-system/active-directory-2003”. If your theme would have used relative paths for the logo and the encompassing link you would have noticed that the logo wouldn’t show up and then link would be most likely broken.

What I normally see people do to fix this issue is just put in Fully Qualified Paths for things like the logo and certain links. In my opinion not only does this add extra bloat to the website it also kind of defeats the dynamic nature of WordPress! Because I tend to create offline themes first and then move it to a online Webserver. If you didn’t use bloginfo() for the links you will have to do a bunch of extra manual changes where ever you hard coded things. This causes extra headaches and unneeded work.

Using my website as an example you can see I use bloginfo() to fill in the anchor link “Url”very easily. I’ve also told it display the Logo image that is located in the template directory.

Another thing I have seen is a person is wanting to make a slightly modified theme for say Christmas. If you were to copy the theme, rename the folder and activate then new theme,  all your hard coded links would no longer work or still point to the old theme location!

I recommend getting into a habit of making your themes with built in WordPress functions like bloginfo(). It will save you time and fustration. You will also know that you can pickup your theme and move it where ever you want and you don’t have to worry that the theme folder is even named the same.

Here’s a listing of ALL the settings you can use with “bloginfo()”. http://codex.wordpress.org/Function_Reference/bloginfo

The most likely reason why next_post_link() doesn’t work in your theme is mostly do to how you setup the loop. The part of the loop that is most likely not setup is the “paging” part of it. Because paging isn’t setup you display the same content OVER and OVER each time you click on the “Newer Entries”. By setting up paging you are telling WordPress to display “X” amount of posts per page. The “offset” tells WordPress where to start on the next page.

I will post a screenshot of some code and go over what you need to do:

We need to use the “query_posts()” function (Line 15). In order to get the query that you want you should make a few variables first.

• On line 12 we create a variable called “ppp” (Posts Per Page) and give it a number.
• On line 13 we create the offset variable. This will help with a term called “Paging”.

Now that we have the variables setup we are going to create a custom WordPress Loop. To do this we need to make a new query.

• On line 15 I show you how to make a custom query using the variables we created earlier.

The query basically says: Go out and get me all the posts. I know I am going to be displaying “2” posts per page. Each time I go and click on “Newer Entries” start at the “offset” and then display another set of posts equaling whatever you set the “ppp” to be.

You might be asking yourself is there another way of doing this? Actually there is if you are using this as the only loop on a page and you want just spit out the blog entries.

Create a page template file and name it “pagetemplate.php” and put it into your theme directory. If you are using the same info in the screenshot the template name you will be able to select in the next step is going to be called “Playing with Loop”. *NOTE* – You won’t need lines 12 to 16!

Create a new page in WordPress and open it. I’m going to call my page “Blog”. On the right hand side under “Page Attributes” you see “Template”. Select “Playing with Loop” and hit update. You must now go and make some changes in the WP Admin area. Go to “settings” and “reading” and select the page that you want to be the default “Posts” page. Since as I previously mentioned I called my page “Blog” I am going to select “Blog” and voila. WordPress now knows that since this page is going to be displaying the posts, the paging will already be setup.

Like always, I like creating a function for this as it cleans up my template quite a bit. This also means I can re-use the code over and over again.

Open functions.php and add this to the end of the file:

Now anywhere in your theme you can get the date posted without dealing with the date format. All you need to do is type this:

Now that you know how to display the info it would make sense to put this in the functions.php and then call that function in your wordpress theme. To do this edit your functions.php and add this near the end of the file.

Now all you need to do in your theme is to call:

http://www.studiograsshopper.ch/web-development/wordpress-featured-images-add_image_size-resizing-and-cropping-demo/

Recently, I have been spending a lot of time developing some new automation functionality for myDynamic Content Gallery plugin, working out how best to get the plugin to use WordPress’ Featured Image functionality and to automatically create the correct additional image sizes when adding and uploading images via the WP Admin UI.

During this work I discovered, perhaps to my shame, that I didn’t know quite as much about Media handling in WordPress as I thought I did. I also found out that, sometimes, WordPress does not behave as intuitively as one might expect or, to be more precise, certain behaviours are not so obvious as one might think – such as how best to use the WordPressadd_image_size() function to create additional image sizes.

The purpose of this article is to give detailed information on how to use Featured Images and theadd_image_size() function and, with examples, demonstrate the consequences of using the various cropping and resizing options available in this function. At the same time, I thought it would be useful to take another look at how WordPress handles uploaded images and its default image sizes.

Article contents

There’s a lot of information in this long, long article, so here are some links to help you navigate around it!

• WordPress Media basics – image handling
  • Default image sizes
  • Understanding the Media Settings size options
  • What images does WordPress create during the upload process, exactly?
  • Default image sizes – dimensions and filenaming
• Featured Image basics
  • Activating the Featured Image functionality
  • Displaying the Featured Image
  • Setting a default size for the Featured Image
• Using add_image_size() to customise the Featured Image
  • Configuring the add_image_size() function
  • Displaying the additional image sizes in your theme
  • Dealing with images already on the server
• Examples using add_image_size()

WordPress Media basics – image handling

It’s essential to understand the main aspects of the way WordPress handles media images before we look at the Featured Image functionality and the use of additional image sizes added via the add_image_size()function…

Default image sizes

Whether you upload an image via the Media Uploader (Add Media button) in the Post Editor, or directly into the Media Library via the Dashboard > Media > Add New panel, WordPress automatically creates several versions of the image during the “crunching…” phase of the upload process, and places these versions on your server:

• Thumbnail size
• Medium size
• Large size
• plus the Original image, if larger than the Large Size dimensions

The dimensions of these default image sizes are set in the Dashboard > Settings > Media options (see screenshot) and, by default, are set as follows:

Default WordPress media Settings (Dashboard>Settings>Media)

• The default Thumbnail Size is 150px x 150px (with a cropping option, which we will discuss later on)
• The default Medium Size is max width 300px, max height 300px
• The default Large Size is max width 1024px, max height 1024px

Understanding the Media Settings size options

WordPress uses two methods to resize images – a “hard crop” method, and a “soft crop” (or “box resize“) method. The Medium and Large Sizes use the “box resize” method, which means that the image size is reduced until the largest dimension (horizontal or vertical) fits inside the “box” determined by the “Max Width” and “Max Height” settings. Let’s look at some examples…

Let’s say we upload an image which is 600px wide by 600px high, the created Medium Size image will be 300px by 300px. This makes sense, given the aspect ratio of 1:1. (See fig 1 below)

Fig. 1 Original image of 600px x 600px results in Medium Size image of 300px x 300px

However, if the Original image is 300px wide by 600px high, as the largest dimension in this case is the height, the image is reduced so that the height fits within the Max Height setting of 300px (in a default setup). The original aspect ratio is preserved, therefore the resulting Medium Size image will be 150px wide by 300px high. (See fig 2 below)

Fig. 2 Original image 300px x 600px results in Medium Size image of 150px x 300px

Similarly, if we assume that the Original image is 300px high by 600px wide, the Max Width setting sets the maximum dimension and therefore the resulting Medium Size image will by 150px high by 300px wide. (See fig. 3 below)

Fig. 3 Original image 600px x 300px results in Medium Size image of 300px x 150px

In other words, the original image is reduced until it fits inside the 300px by 300px “box” – hence the term “box resize”.

It is important to note that “box resize” is always used for Medium and Large Sizes. This means that the image is always resized to fit within the “box” and no cropping occurs. Note: the blue box outline in the above diagrams represents this “box”.

Significantly, the Thumbnail setting can either use the “box resize” method or, if the “Crop” box is checked, the “hard cropping” method, meaning that the resulting Thumbnail Size image will always be sized as per the specifed Width and Height settings. This means cropping will occur if the original image size has a different aspect ratio to that implied by the Thumbnail Width and Height settings. To use the “box resize” method, uncheck the Thumbnail “Crop” box.

Checking the “Crop” option means you always get what you asked for. Therefore, assuming default Thumbnail sizes, providing both the height and width of the original image are larger than 150px, you will get a 150px x 150px sized Thumbnail – with cropping, of course, where necessary.

What images does WordPress create during the upload process, exactly?

This depends on the size of the Original image…

• If the Original image is bigger than the Large Size dimensions set in the Media size options, 4 images will be saved on the server: a Thumbnail version, a Medium version, a Large version, and the original image itself.
• WordPress uses a downsizing function to create the Thumbnail, Medium and Large versions. WordPress never “upsizes” images – ie, it never creates a version larger than the original image size. Therefore, if the Original image is smaller than the Large Size dimensions, a Large Size version is not created.
• If the Original image is smaller than the Medium Size dimensions, neither Medium nor Large Size versions will be created.
• The Original image is identified as “Full Size” in the Media pop-up screen.
• The Thumbnail, Medium and Large Size images are named using the original filename plus the actualdimensions of the resulting image size. (See table below for examples.)

Default image sizes – dimensions and filenaming

As mentioned earlier, the dimensions of the resulting image sizes are appended to the Original file’s filename to create the filenames for the three sizes.

For example, uploading a 1200px x 1200px image named myimage.jpg will result in 3 files being saved in the relevant wp-content/uploads folder, in additional to the Full Size original:

• The Thumbnail Size version will be named myimage-150×150.jpg
• The Medium Size version will be named myimage-300×300.jpg
• The Large Size version will be named myimage-1024×1024.jpg

Note that, in the above example, the additional image sizes preserve the 1:1 aspect ratio of the original image (1200px x 1200px), which is why the dimensions of the resulting image appended to the original file name happen to correspond to the default Media sizes. In most real world examples the aspect ratio of the Original image will not be 1:1, meaning that the appended dimensions will be different to those shown above.

The following table gives some further examples for a variety of different original image sizes. In all cases, for simplicity, the examples assume the default Media sizes are used, as set in Dashboard > Settings > Media:

Ex:
Original image dimensions
width x height
Default Media
Images created on the server

1.
myimage.jpg, 1200px x 1200px
Thumbnail
Medium
Large
Full Size
myimage-150×150.jpg
myimage-300×300.jpg
myimage-1024×1024.jpg
myimage.jpg

2.
myimage.jpg, 900px x 900px
Thumbnail
Medium
Large
Full Size
myimage-150×150.jpg
myimage-300×300.jpg
-
myimage.jpg

3.
myimage.jpg, 500px x 250px
Thumbnail (crop unchecked)
Medium
Large
Full Size
myimage-150×75.jpg
myimage-300×150.jpg
-
myimage.jpg

4.
myimage.jpg, 1200px x 600px *
Thumbnail (crop checked)
Medium
Large
Full Size
myimage-150×150.jpg
myimage-300×150.jpg
myimage-1024×506.jpg
myimage.jpg

Some points to note:

• Ex.1: The original image is larger than the Large Size dimensions, therefore 3 additional image sizes are created by WordPress, in addition to the original image.
• Ex.2: The original image size is smaller than the Large Size dimensions, therefore no Large Size image is created.
• Ex.3: The original image size is smaller than the Medium Size dimensions, therefore neither a Medium nor a Large Size image is created. Only two images will be placed on the server – the Thumbnail and the Full Size (original) images. As the Thumbnail box is unchecked, the resulting Thumbnail size is proportional (ie “box resize” method”), which is reflected in the dimensions appended to this size.
• Ex.4: In this example the original image is rectangular (with an aspect ratio of 2:1), and we see WordPress preserves this aspect ratio during the downsizing. Note that the dimensions appended to the filename reflect the actual dimensions of the new images.
• Ex.4: This example assumes that the “crop” checkbox in the Media Settings has been checked. Therefore, for the Thumbnail Size, the original aspect ratio is ignored and a thumbnail of exactly 150px x 150px is created. If the checkbox is unchecked, the aspect ratio is preserved and the Thumbnail Size image will be, in this example, 150px x 75px.

Featured Image basics

Activating the Featured Image functionality

Featured Images are not enabled automatically. This functionality needs to be enabled in your theme, which you do by adding this code somewhere in your theme’s functions.php:

add_theme_support('post-thumbnails');

If you now go to the Post or Page Editor you should see a Featured Image box on the right hand side of the screen:

Featured Image box in Post/Page Editor

Click on the “Set featured image” link to launch the Media Uploader where you can either upload a new image and set it as the Featured Image, or select an existing image from the Post/Page gallery or Media library. Bear in mind that setting a Featured Image in the Post/Page Editor only registers a particular Original image as the Featured Image for that post – it doesn’t select any specific image size for display. Read on to learn more…

Displaying the Featured Image

The following function is used to display the Featured Image:

<?php the_post_thumbnail(); ?>

This code should be used in the relevant theme template within the Loop. More information about this function can be found on the Codex here.

Setting a default size for the Featured Image

By default, the the_post_thumbnail() function displays the registered “post-thumbnail” size of your Featured Image. Please note that “post-thumbnail” is not the same thing as the Thumbnail Size that we discussed earlier. Yes, I know, this is confusing, just bear with me…

We talk about Featured Images but the underlying functions use the term “post thumbnail”. This is just one of those things that happen when developers start out on one track – to make an easy to access thumbnail for a post, typical of magazine-style themes – but end up making something much more generic and useful. In an ideal world the_post_thumbnail() function would be renamed as the_featured_image() – which would make much more sense. So, just to clarify, WordPress Post Thumbnails and Featured Images are the same thing.

The “post-thumbnail” image size is registered using the set_post_thumbnail_size() function. This function takes 3 arguments: $width, $height and $crop_flag and, for example, is used in your theme’sfunctions.php like this if you want to specify a “post-thumbnail” size of 100px by 100px, with “hard cropping”:

set_post_thumbnail_size( 100, 100, true );

Our functions.php code now looks like this:

add_theme_support('post-thumbnails');
set_post_thumbnail_size( 100, 100, true );

Obviously, you don’t have to use 100px x 100px, so change the functions parameters to suit your theme layout/design.

Note that this function does not create a new 100px x 100px version of the Original image on your server – it simply adds height and width attributes of 100px to the IMG tag, which is output bythe_post_thumbnail(), and lets the browser do the resizing. This has two major drawbacks: firstly, the Original image could be huge meaning that your page load time will be affected and, secondly, browser resizing rarely creates great looking images.

If you don’t specify a “post-thumbnail” size using set_post_thumbnail_size(), the Original image will be displayed – which is probably NOT what you want. We’ll look at a better way of handling the display of Featured Images next…

Using add_image_size() to customise the Featured Image

As mentioned above, the set_post_thumbnail_size() function doesn’t, as at WordPress version 3.0.1, actually resize the image – it just resizes it in the browser. Although it is quite likely that on-the-fly resizing will be possible in a future version of WordPress, until this is implemented I don’t recommend using this function. Instead, I prefer creating any additional image sizes at the Media upload process, by using theadd_image_size() function:

add_image_size( $name, $width, $height, $crop);

Once you have added this function to your theme’s functions.php your new image sizes will be created alongside the default Thumbnail, Medium and Large sizes during the Media upload process.

Configuring the add_image_size() function

Let’s take a closer look at this functions parameters…

• $name: a unique name for your image size, eg “Home page”, or “Archive page” or something similar
• $width: the width, in pixels, of this image size
• $height: the height, in pixels, of this image size
• $crop: true to indicate “hard cropping” or false to indicate “box resize”. Review this section of this article if you’re not sure of the difference between the two.

For example, to specify a new image size called “Home page”, sized at 120px x 120px, and hard cropped, this is what you would add to your theme’s functions.php:

add_image_size('Home page', 120, 120, true);

Or perhaps you prefer to create a new image size of 300px x 150px without “hard cropping”:

add_image_size('Special archive', 300, 150, false);

And, of course, there is nothing stopping you adding several image sizes, each of which will be used in different parts of your theme:

add_image_size('Home Top', 120, 120, true);
add_image_size('Home bottom', 270, 90, false);
add_image_size('Archive thumb', 150, 75, true);
add_image_size('Special', 397, 224, true);

Just remember that this code goes in your theme’s functions.php.

Feel free to add as many image sizes as you want, but bear in mind that this will slow down the Media uploader “crunching…” a little (depending on your hosting), and will use more space on your server to store these images.

Displaying the additional image sizes in your theme

You can now reference these new additional image sizes in your theme template files using thethe_post_thumbnail(); function discussed here, for example like this:

<?php the_post_thumbnail('Home Top'); ?>

We should not forget about the default Media sizes either. You can display these in the same way, like this:

the_post_thumbnail('medium'): // The Medium Size version

Or this:

the_post_thumbnail('large'): // The Large Size version

Or this:

the_post_thumbnail('thumbnail'): // The Thumbnail Size version

Remember – this code should go within the Loop in the relevant theme template file.

The important advantages of going to all this trouble to create additional image sizes usingadd_image_size(), rather than use set_post_thumbnail_size(), are:

• add_image_size() creates an image at the correct size – no more browser resizing.
• You can use add_image_size() as many times as you like to specify a range of image sizes for use in your theme.

Dealing with images already on the server

The function add_image_size() will only create additional images for new uploads. Therefore, if you want to retroactively create the new additional images for previously uplaoded images, your best option is to use the rather wonderful Regenerate Thumbnails plugin. Highly recommended!

Examples using add_image_size()

Finally, here is a series of test images to demonstrate the results of using various image sizes and, in particular, the two cropping options of the add_image_size() function.

Each example shows the add_image_size() code used to generate the image. The Original image is 600px x 400px. Note “thirds” grid superimposed on the Original image to help indicate what has been cropped during the creation of various image sizes.

Original image

Original Size: 600px x 400px

Original Aspect ratio: 3:2

Added size: 500 x 500, hard cropped

Resulting Size: 500px x 400px

Resulting Aspect ratio: 5:4

Image has been cropped (left and right)

add_image_size( 'Test cropped', 500, 500, true );

Added size: 500 x 500, box resize

Resulting Size: 500px x 333px

Resulting Aspect ratio: 3:2 (same as Original)

Image has been resized to fit in “box”, original aspect ratio is preserved, not cropped

add_image_size( 'Test box resize', 500, 500, false );

Added size: 500 x 300, hard cropped

Resulting Size: 500px x 300px

Resulting Aspect ratio: 5:3

Image has been cropped (top and bottom)

add_image_size( 'Smaller Test cropped', 500, 300, true );

Added size: 500 x 300, box resize

Resulting Size: 450px x 300px

Resulting Aspect ratio: 3:2 (same as Original)

Image has been resized to fit in “box”, original aspect ratio is preserved, not cropped

add_image_size( 'Smaller Test resize', 500, 300, false );

Added size: 100 x 100, hard cropped

Resulting Size: 100px x 100px

Resulting Aspect ratio: 1:1

Image has been cropped (left and right)

add_image_size( 'Thumb Test cropped', 100, 100, true );

Added size: 100 x 75, hard cropped

Resulting Size: 100px x 75px

Resulting Aspect ratio: 4:3

Image has been cropped (left and right)

add_image_size( 'Smaller Thumb Test cropped', 100, 75, true );

Added size: 100 x 75, box resize

Resulting Size: 100px x 66px

Resulting Aspect ratio: 3:2 (same as Original)

Image has been resized to fit in “box”, original aspect ratio is preserved, not cropped

add_image_size( 'Smaller Thumb Test cropped', 100, 75, false );

Conclusion

As can be seen from the above examples, choose your additional image sizes wisely in order to make sure you get the results you want.

Let’s finish by listing the key points to take away from all of this…

• You can easily customise the default Media sizes by changing the default sizes in Dashboard > Settings > Media.
• To use the Featured Image functionality, you need to add the add_theme_support(‘post-thumbnails’); code to your theme’s functions.php.
• Avoid using set_post_thumbnail_size() to set your Featured Image display size – to avoid in-browser resizing
• Add your own additional image sizes using add_image_size();
• Use the Regenerate Thumbnails plugin to create the new additional image sizes for images which already exist on your server
• Choose your cropping options wisely when using add_image_size();
• Use the “box resize” method if you want to preserve the original aspect ratio of your original image and not have it cropped.

Hope this is useful to someone – it took ages to write!

Enjoy!

Where ever you want to display the caption of the featured image just use the function “the_post_thumbnail_caption()”. See below for an example.

*Please note the 3rd line should really be just a continuation of the 2nd line with a space between the “ and the height=… *