If you are creating a WordPress site for a user, you want to make sure everything is as easy as possible for them. One trick that can make things easier is to have images automatically resize when they are used for a featured image in WordPress. Resizing images may be easy for developers and graphic designers, but some end-users don’t have the skills or time to resize an image to fit perfectly in your design. Luckily, this is simple to set up.

The Process

1. The first step is to put the following line of code in the WordPress theme’s functions.php file. If you do not know how to access the functions.php file, see my post on how to access key WordPress theme files.

   1	add_image_size($name, $width, $height, $cropBoolean);

   The add_image_size(); function has 4 parameters. $name is the name that you want to call your image with. $width is the width you want the image to crop to in pixels. $height is the height you want the image to crop to in pixels. $cropBoolean is a true or false parameter. If set to true the image will crop itself automatically.

   In the example below, the name I use to call the cropped image is “featuredImageCropped”. The height and width are 250px and 200px respectively, and the image is set to crop.

   1	add_image_size('featuredImageCropped', 250, 200, true);

2. The next step is to reference the new image size in your theme. Place the following code wherever you would like to see your cropped image:

   1	<?php the_post_thumbnail('featuredImageCropped'); ?>

Conclusion

There you have it. Now when you add a featured image to a post, the image will not need to be resized or cropped beforehand. WordPress will do it for you!

Filed under: Code, Web Development, Wordpress by Keith
Comments are fun, leave one! »

This is the fourth installment on my series of posts on the Web Developer Toolbar. This post focuses on the forms series of tools. If you do any work with forms in your website endeavors you will find this section of the toolbar very useful. I must admit that I have been working with forms for years and it wasn’t until writing this post did I realize just how useful the form tools are.

In case you missed it, be sure to check out the introduction to this series which overviews the web developer toolbar and shows you how to install it.

Display Form Fields – This button will show fields associated with each element in a form. It will show what type of element it is, its “id”, and its “name”.

Show Passwords – Clicking this tool will remove character hiding on passwords so that you can see passwords typed in a password field.

View Form Information – This is one of my favorite tools. Click this button and it will show you all form information in a table. This is great for when you are coding a PHP mailer and you want to see all information right in front of you at once.

Convert Form Methods from GETs to POSTs (or vice versa) – This is a rare tool, but can help a bunch in some instances. A form that uses “POST” is used for when the data is used for something, such as storing or updating data, ordering a product, or sending an email. A form that uses “GET” simply just collects the data. The data is retrieved and encoded by the browser into a URL.

The Convert Form Methods tool will convert your form depending on your testing needs.

Convert Select Elements to Text Inputs – This tool will allow you to change dropdown form menus into text boxes so that you can type whatever you would like instead of using the dropdown. This may save you time if you are a power user or are testing a form with a lot of select elements.

Enable Auto Completion – Sometimes websites disable auto completion for forms, especially on login forms. Select this option and you will be able to auto complete forms that you use often.

Clear Radio Buttons – You guessed it, this will clear all radio buttons in a form.

Make Form Fields Writable – You may sometimes find a form field where a field is read only. For example, there may be an email form with the subject line already filled in with read-only text. Use this tool to write whatever you want in a read-only textbox.

Populate Form Fields – This is another one of my favorite tools out of all the Web Developer Tools. This button will fill in all form fields for you so that when you are testing a form that you are developing you don’t have to go through each field and put in dummy content. Try this one out; it’s pretty cool!

Removes Maximum Lengths – This will allow you to write more than the maximum length when form inputs restricts the amount of characters you are allowed to use.

Conclusion

This is one of my favorite sections of the Web Developer Toolbar. There are some great resources for testing out your own development and there are also some nifty tricks to interact with other forms that you didn’t build. Try some!

Filed under: Web Developer Toolbar, Web Development by Keith
Comments are fun, leave one! »

Events Manager Extended is a great WordPress plugin that allows you to do all sorts of things events related on your website.

I recently was trying to figure out a way to only display an event end date if there was one, otherwise don’t display it at all. Luckily, Events Manager Extended has a feature just for that!

How to do it

When you go to the Settings menu, you will see a “Default event list format” section. This is where you style the events in a list if you so choose.  To have an end date add to your list only if there is an end date set, use the following code:

1

[events_if tag="#ESC_{j M Y}" notvalue="#ESC@_{j M Y}"] This date is only printed if different from start date: #@_{- j M Y} [/events_if]

This code checks to see if both the start date and the end date are different. If they are, then it displays the code inbetween the [events if] tags.

It doesn’t stop there!

You are not limited to using conditional tags only in event lists. You can use them in most of the format settings of Events Manager Extended.

There are so many different ways to use these tags. To see more details on them check out the Events Manager Extended plugin site.

Filed under: Code, Web Development, Wordpress by Keith
2 Comments »

Are you having issues with things overlapping your embedded Youtube videos? I recently embedded a Youtube video on a website and saw that my CSS drop down menus were overlapping the video. I tried setting some z-indexes and didn’t have much luck. Luckily I stumbled on a simple solution.

The Solution

Just add ?wmode=transparent to the end of the Youtube URL. For example:
Before

<iframe width="480" height="360" src="http://www.youtube.com/embed/oHg5SJYRHA0" frameborder="0" allowfullscreen></iframe>

After

<iframe width="480" height="360" src="http://www.youtube.com/embed/oHg5SJYRHA0?wmode=transparent" frameborder="0" allowfullscreen></iframe>

Yep, that’s all it takes!

Filed under: Code, Miscellaneous, Web Development by Keith
Comments are fun, leave one! »