6 Stages of Debugging

  1. That can’t happen.
  2. That doesn’t happen on my machine.
  3. That shouldn’t happen.
  4. Why does that happen?
  5. Oh, I see.
  6. How did that ever work?

Featured Image Replacement

Use this snippet of code to display an image when the featured image isn't set. Works with images inserted in posts (and galleries!).

It took me a few days, but  I finally got this working! I have a photo gallery theme I’m working on, and I’d like it to always display a featured image in the loop. Here were my requirements:

  1. If the featured image isn’t set, look for images within the post and display the first one.
  2. If an image isn’t in the post but there’s a gallery, display the first image from the gallery.
  3. If there is no image and is no gallery, display a default image.

Setting a default image when the featured image is blank (3) was pretty easy.  Looking for an image within the post (1) was fairly doable. But, finding an image within a gallery (2) was giving me problems.

What happens when WordPress has you drop a gallery in a post is shortcode processing. That means the code looks something like this (with brackets instead of curly braces)…

{gallery link="file" ids="1,2,3,4,5,6"}

…until you visit the page it sits on. Then, WordPress processes that line to show your gallery based on the IDs of the images added.

So, with the ability to call an image from its ID, I was able to implement wp_get_attachment_image_src to return the image I needed from the gallery!

Here’s what you do:

Add a Function to your functions.php File

Open up your functions.php file and drop this bit of code into it (change
sharons_new_image to whatever you prefer):

function sharons_new_image() {
	global $post;
	ob_start();
	ob_end_clean();
	$galID = str_replace('ids="', '', strstr(strstr($post->post_content, 'ids="'), ',', true));

	$first_img = strstr($post->post_content, '<img');
	$first_gal = wp_get_attachment_image_src( $galID, 'full' );
	$header_image = get_header_image();
	$loop_default_image = home_url() . '/wp-admin/images/w-logo-blue.png';

	if(!empty($first_img)) {
		$returnimage = $first_img;
	} else if(!empty($first_gal)) {
		$returnimage = $first_gal[0];
	} else if(!empty($header_image)) {
		$returnimage = $header_image;
	} else {
		$returnimage = $wp_logo_image;
	}
	return $returnimage;
}

looks in your post ($post->post_content) for the first instance of img=".

$galID is looking for the first number after ids=" (the rest of that code is cutting out any other text still remaining).

$first_gal is looking for the image based on the ID found in $galID.

get_header_image() is the WordPress default code for calling the header image (set within the Theme Customize window).

If you don’t have a header image set, I’ve set the WordPress logo as the default at $loop_default_image. This image will be called if no other image is found. If you want to set it to a specific image, you can replace $loop_default_image = home_url() . '/wp-admin/images/w-logo-blue.png'; with something like this:

$loop_default_image = get_template_directory_uri() . '/images/loopimage.jpg';

This code above looks in your theme’s “images” folder for an image called “loopimage.jpg”. Customize this link as needed.

Call the Function in your index.php File

Next, we need to tell our theme’s index.php page to use this function. Most themes may have the_post_thumbnail() somewhere; if yours doesn’t, you can add it manually (usually above the the_excerpt() or the_content() line).

Change your the_post_thumbnail() to look like this instead:

<?php if (has_post_thumbnail()) {
	the_post_thumbnail();
} else {
	echo '<img src="' . sharons_new_image() . '" />';
} ?>

That’s it! If you have questions or problems, leave them in the comments. Thanks!

Improving WordPress Media Library (#1)

This post is the first in what I hope will be many describing how I enhanced my media library and turned a WordPress install into a powerful photo organizing platform.

I love WordPress. It’s an amazingly powerful open-source CMS and it’s been my go-to for years. The one drawback I keep running into is how best to utilize its media library.

I have tons of photos and would love to organize them, but most plugins seem to have more than I need. I would rather improve my media library rather than install something that saves photos in a completely separate area.

Hi there. I absolutely adore this plugin called Media Library Assistant. It makes organizing photos so much easier than I ever thought possible. A big thank-you to David Lingren for creating such a genius piece of code!

Having said that, I wanted to assist in an issue I’ve tried to tackle quite a few times:

Convert the Upload Date to match the Photo’s Creation Date

Tonight, with the help of this plugin, I was successful! Please note, anyone who tries this, it is not for the faint of heart, as it required me to go into my database via PHPMyAdmin and make changes with a SQL statement (a harmless statement, but you have been warned). I highly recommend backing up your database just in case before trying this. 🙂

OK, here goes. I’ve wanted the upload date to match the photo date ever since I uploaded my first photo to WordPress when it was already past the date it was taken (which is forever). With the help of MLA, I was able to map the creation date, then update the upload date to match the newly saved creation date. Here’s how I did it:

Under Settings > Media Library Assistant, I went to the IPTC/EXIF tab and created a new mapping. These settings belong under Add a new Field and Mapping Rule:

  • I entered a Field Title of “Date Taken”.
  • The EXIF/Template Value was set to template: DateTimeOriginal
  • Priority was set to “EXIF”.
  • Existing Text was set to “Replace” (this is a preference, not a requirement).

I then clicked “Add Rule” and then “Map All Attachments, Custom Fields Now” button, and my dates were entered! Below is what my settings look like for this item:

mlasettings

Next, I had the problem of getting that date into the upload date field. Here’s where the tricky stuff starts to happen.

The post information is inside the “wp_posts” table, while the data for each post is inside the “wp_postmeta” table. So, the date is saved in one and displayed from the other. Here’s the SQL statement I wrote:

UPDATE `wp_posts`, `wp_postmeta`
SET `wp_posts`.`post_date` = DATE_FORMAT(STR_TO_DATE(`wp_postmeta`.`meta_value`, "%Y:%m:%d %H:%i:%s"), "%Y:%m:%d %H:%i:%s"),
`wp_posts`.`post_date_gmt` = CONVERT_TZ(DATE_FORMAT(STR_TO_DATE(`wp_postmeta`.`meta_value`, "%Y:%m:%d %H:%i:%s"), "%Y:%m:%d %H:%i:%s"),'+00:00','+04:00')
WHERE `wp_posts`.`ID` = `wp_postmeta`.`post_id`
AND `wp_posts`.`post_type` = 'attachment'
AND `wp_postmeta`.`meta_key` = 'Date Taken';

Now, there is a lot going on here. First, we’re telling the database to find the new Field Title (that’s the “meta_key” in the wp_postmeta table), take that date, and then update “post_date” in the wp_posts table to match. We’re also telling it to convert the format from YY:MM:DD hh:mm:ss to YY-MM-DD hh:mm:ss so that WordPress can have the correct date format. Then, since I’m in the EST time zone, change the “post_date_gmt” field to add four hours (see the +04:00 bit). Lastly I tell it to only do this with items that are attachments (this keeps it from accidentally updating a post). It worked wonderfully!

My goal is to try and get as much of this into MLA as possible. That way, I don’t have to keep updating the tables manually.

My only wish now is that I could do something similar to what Media Library Plus has available, which is allowing someone to upload images into any directory within wp_content/uploads. I ask for this, because I’d like my images from September 2015 to show up in the 2015/09 directory without me having to do it manually. If only there were a bit of code for that as well…. Maybe I’ll have a part 2 covering that bit 🙂

Keep WordPress Up-To-Date

If you have a WordPress install, check that you keep your plugins, themes, and version up-to-date. This post will describe how to check the status of these items and how to update them.

When you log in to the admin area of your site (http://yoursitelink/wp-admin), you might see one of these:

update01

You can also check the admin menu bar for additional updates (the number indicates total updates, including plugins, themes, and version):

update02

Go ahead and click “Please update now”, or you can click on the number in your menu bar.

I recommend updating items in this order:

  1. Themes
  2. Plugins
  3. WordPress version

After updating the WordPress version, you may see more numbers pop up. This indicates that a plugin or theme you have installed has an additional update to bring it into compatibility with the new WordPress version you now have.

For the WordPress version, you will see this window:

update03

Click “Update Now”. You should then see this window:

update04

Wait a moment, and the screen will refresh on its own. If it does not, click the “here” at the bottom of your screen. You should now see this (or something close:)

update05

The next section will only apply if you have more than one site within one WordPress install).

If you have a WordPress Multi-Site install, you may be asked to upgrade your network. This process brings all your sites into compatibility with the new WordPress version. Go ahead and click the “Upgrade Network” link on the next page:

update06

WordPress will automatically cycle through all your sites. If it cannot, you will be given a “next” button to click at the bottom of each page.

Once you have completed the Network upgrade, you are done!


Be sure to check on your WordPress install at least once a month. WordPress updates are almost always security updates, so keeping your install, plugins, and themes current will improve the security of your site.

Web Hosting on OS X

Included in this post is information on those errors and some general suggestions on setting up your own web hosting on your OS X machine.

Setting up your own WordPress installation can be fun and easy, and you can even set it up on your own home computer! When doing so, there are sometimes some very strange errors or screens you’ll start to see that you didn’t see before… for instance, you’ll be asked for FTP information when uploading a plugin or theme, or when you update your version of WordPress. You also may experience strange URL errors or problems browsing to certain areas. Included in this post is information and general suggestions on setting up your own web hosting on your OS X machine. Continue reading “Web Hosting on OS X”

Web Sharing in OS X Mountain Lion

Here's the second in a series of tips on how to get Mountain Lion to work for you. This post discusses the disappearance of "Web Sharing" from the Sharing panel, and what to do in its absence.

Open up the Sharing panel in System Preferences, and you’ll see that Web Sharing is no longer listed here.

sharing

Luckily, this is only a visual (GUI) change. You can still turn on web sharing by sending commands to Apache. The quickest fix I found is to use Terminal to send commands:

  1. Open Terminal to use the following commands. You’ll need to be an admin on the computer.
  2. You’ll need to begin all commands with “sudo”. You’ll be asked to enter your password the first time you type a command beginning with “sudo”). This is normal.
  3. To start Apache:
    sudo apachectl start
  4. Top stop Apache:
    sudo apachectl stop
  5. To restart Apache:
    sudo apachectl restart
  6. To list the version of Apache:
    httpd -v
  7. If you want Apache to load every time you restart, type this into Terminal:
    sudo launchctl load -w /System/Library/LaunchDaemons/org.apache.httpd.plist

If you run into any problems, feel free to comment on this and I’ll reply with solutions as I can find them.

New Post Notification

Here is a snippet of code to add to your site that will allow anyone who is a member of your site to receive an email notification whenever a new post is added. This is not a plugin; you really don't need a plugin to turn this feature on.

Here is a snippet of code to add to your site that will allow anyone who is a member of your site to receive an email notification whenever a new post is added. This is not a plugin; you really don’t need a plugin to turn this feature on. Continue reading “New Post Notification”

Tricks with CSS

There are some really great things that can be done with stylesheets these days. For instance, I've been looking for ways to stylize buttons and small graphics, gradient backgrounds, borders, etc. so as to lighten the load on a page. Here is one example of the work I've experimented with.

I saw a nice “download” button today, and thought I’d see if I could re-create it in CSS. Here’s the graphic:

Next, I decided to try breaking it down into elements. There is a dark border around the item, a green gradient background, white text and a green shadow around the text. I have a few tricks for completing this:

  1. For analyzing the image, you can use your own graphics software, or go to pixlr.com and upload the image (which is what I did). The border turns out to be close to #666. The shadow on the text is close to #351. The font used looks to be Helvetica (possibly Arial) and set to bold. The width is 110px and the height is 31px.
  2. The gradient is a little harder. I also have a trick for this. Inside pixlr, I cut down the image to where there is only the gradient showing (trim the border, then crop the image to just a section showing the green gradient). I use the Ultimate CSS Gradient Generator – this site allows you to upload an image that contains gradient. The site will analyze the gradient and spit out the CSS-equivalent code for you.

Click the link below to download the complete HTML page, including all CSS used and a copy of the graphic used above.