Uploading Images to Your Self-Hosted WordPress Site

This post is a is a quick guide on uploading images to your self-hosted WordPress Site. It sits alongside the series we have done on building a self-hosted WordPress site and installing Ultimatum Theme. Firstly, let’s see how we can upload an image to WordPress. Note that in the admin Settings => Media page I have the ‘Organize my uploads into month- and year-based folders’ unchecked (off), so anything I upload will go into the uploads main folder. I have an image ready to upload. In this case, I took a screenshot of me uploading a file. The file is the one we shall use as a site logo for our development site, called United. So, I have actually uploaded the logo and that screenshot.

Uploading Images to Your Self-Hosted WordPress Site - Upload ImageUploading Images to Your Self-Hosted WordPress Site - Upload Image Files MadeUploading Images to Your Self-Hosted WordPress Site - Save Resized Image

You might think that, therefore, there would now be two images in the uploads folder on my server. Instead, there are six! This is because WordPress also makes smaller versions of the files, according to your general Media settings. We covered this in Build a Self-Hosted WordPress Site – Part 4. I am going to point out something weird here. One of the two original files was called upload-image.png, and is sized 1043 x 707 and is 95.5KB in size. WordPress made a small version, at 800 x 542, which is over twice as big at 248KB. This seems to be a problem with WordPress when it re-sizes the larger image size. Much the same happens if I re-size the image in PhotoShop and save it. However, online help is at hand. (more…)

Deferring Parsing of Javascript in WordPress

So, I have been configuring WordPress with WooCommerce, and discovering quite a lot as I go. I had optimized the loading speed of the web site by deferring parsing of the javascripts to later in the page, using this code in my child theme functions.php file:

1
2
3
4
5
6
7
8
if (!(is_admin() )) {
  function defer_parsing_of_js ( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
  }
  add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

The above code breaks the SyntaxHighlighter Evolved plugin, so I have switched to the WP-Syntax plugin, together with the WP-Syntax Editor Integration plugin. The original code I used to defer loading of javascript broke the WordPress Lightbox functionality. You can read about the code I used at the Uzelac Media website. Note that the code above ‘fixes’ the improper use of apostrophes and quote marks – the code on the linked page, if copied and pasted as is, will not work. Use the code shown above instead.

[Edit: I have since removed this code from my functions.php file and used a plugin called Autoptimize instead.]