On June 22, 2011, Jorge Pedret, a freelance web developer, came up with a solution to the Gravity Forms placeholder problem with a clever function and script that could be added to your theme’s functions.php file. Unfortunately, the solution he posted didn’t work with non-html 5 compliant browsers, such as IE 7 and IE 8.

On September 15, 2011, WP Beginner reposted Jorge’s solution, yet it still didn’t work on IE. Luckily, an astute reader of WP Beginner, chood531, solved the problem and posted some code on pastebin, however, the code was only partial, so unless you’re paying special attention, you might not put one and one together, as I did not because it’s late on a Friday night, and it’s been a loooong week. So, I thought I’d do others the favor of post the code in it’s entirety here.

What you need to do is copy the code below and paste into your WordPress theme’s functions.php file and upload.

<?php
// Gravity Forms placeholder text

/* Add a custom field to the field editor */
add_action("gform_field_standard_settings", "my_standard_settings", 10, 2);

function my_standard_settings($position, $form_id){

// Create settings on position 25 (right after Field Label)

if($position == 25){
?>

<li style="display: list-item; ">
<label for="field_placeholder">Placeholder Text

<!-- Tooltip to help users understand what this field does -->
<a href="javascript:void(0);" tooltip="&lt;h6&gt;Placeholder&lt;/h6&gt;Enter the placeholder/default text for this field.">(?)</a>

</label>

<input type="text" id="field_placeholder" size="35" onkeyup="SetFieldProperty('placeholder', this.value);">

</li>
<?php
}
}

/* Now we execute some javascript technicalitites for the field to load correctly */

add_action("gform_editor_js", "my_gform_editor_js");

function my_gform_editor_js(){
?>
<script>
//binding to the load field settings event to initialize the checkbox
jQuery(document).bind("gform_load_field_settings", function(event, field, form){
jQuery("#field_placeholder").val(field["placeholder"]);
});
</script>

<?php
}

/* We use jQuery to read the placeholder value and inject it to its field */

add_action('gform_enqueue_scripts',"my_gform_enqueue_scripts", 10, 2);

function my_gform_enqueue_scripts($form, $is_ajax=false){
global $is_IE;

?>
<script>

jQuery(function(){
<?php

/* Go through each one of the form fields */

foreach($form['fields'] as $i=>$field){

/* Check if the field has an assigned placeholder */

if(isset($field['placeholder']) && !empty($field['placeholder']) && !$is_IE){

/* If a placeholder text exists, inject it as a new property to the field using jQuery */

?>

jQuery("#input_<?php echo $form['id']?>_<?php echo $field['id']?>").attr('placeholder',"<?php echo $field['placeholder']?>");

<?php
}
elseif($is_IE) { ?>

jQuery("#input_<?php echo $form['id']?>_<?php echo $field['id']?>").attr('value',"<?php echo $field['placeholder']?>");

<?php
}
}
?>
});
</script>
<?php
}
?>

Empty your browser cache and when you go to edit a Gravity Form field, you’ll now see the following new field:

Be sure to read the excellent instructions by WP Beginner on how to Add Placeholder Text in Gravity Forms Drop Down field - just scroll down a bit in the post  to the very ed (ignore the code stuff and use the code below instead that works in IE).

Please comment below if you continue to have problems or write to me via my Contact form if you need personal assistance. If I can help you in less than 15 minutes, then I’m happy to do so for free. If the problem is more involved than that and requires me to login to your site and do the fix for you, then I charge $75/hour. Usually, I can solve these problems in less than 1/2 hour.

Verify the following:

1 – Index.php location and settings

Please check: Which index.php file did you move and where did you move it? The index.php file you moved should start with the following code:

<?php
/**
* Front to the WordPress application. This file doesn't do anything, but loads
* wp-blog-header.php which does and tells WordPress to load the theme.
*
* @package WordPress
*/

/**
* Tells WordPress to load the WordPress theme and output it.
*
* @var bool
*/
define('WP_USE_THEMES', true);

/** Loads the WordPress Environment and Template */
require('./mywp/wp-blog-header.php');
?>

Check the require line in your file. Be sure that the / are in the right place and that the subdirectory name is correct. Most people make a mistake and either don’t edit the require line and put their subdirectory name in it or make a mistake with the syntax and have an extra slash, no slash, an extra period, etc.

Next, where did you put this index.php file? Some people have put it in the root of the hosting account instead of in the domain root — which is the public_html folder on most hosts. If you moved this file outside the public_html folder, that won’t work. Some people’s hosting accounts are really wildly configured, and their host does not have a straight forward path for you to figure out where the heck your domain root is. So, to keep things simple, you would have wanted to move the index.php to the directory just above your subdirectory that contains the WordPress application.

Finally, some people have inadvertently moved the index.php file in their theme’s folder rather than the index.php file in the subdirectory. If you don’t see the require line above in your index.php file, then you moved the wrong file.

2 – WordPress General Settings

The next most common mistake is to not set the General Settings in the WordPress Dashboard correctly. Here is how they should have been set:

If a mistake was made here, then you might not be able to see your site or you won’t be able to login to your site. It is pretty common to have made a mistake with these settings or forgotten to make the change here. To fix this, you will need to login to your phpMyAdmin application via your web hosting control panel. Take note of your database username and password in the wp-config.php file and check the following:

Login to the database and go to the wp_options table and click the browse tab.

The first option is is for siteurl (which is totally inconsistent with the General Settings field label). This should be set to the URL with the subdirectory:

Go to the next page of the table and check the home value. This should be the URL to the main site URL without the subdirectory name:

3 – .htaccess

Some web hosts will have issues with the .htaccess commands once your index.php file is in the public_html file. If this is the case, you should still be able to login to WordPress via the subdirectory, and your home page will display correct BUT your links to the other pages will show a “Page Not Found” error. (Please note: even though you are showing the pages of your site from the main domain url, you will still need to login via the subdirectory url – e.g. http://yoursite.com/mywp/wp-admin – and all of your images on the site will still be located in the http://yoursite.com/mywp/wp-content/uploads.)

So, if you are having troubles with your “pretty permalinks” in other words, the home page of the site displays okay, but your subpages display a File Not Found message, then login to your WordPress dashboard and go to Settings > Permalinks and click Save Changes. This should cause your .htaccess file to be updated correctly. If this does not work, you may need to move the .htaccess to the root directory and manually replace the current WordPress mod rewrite directive with the code below. (Note: you will need to show invisible files via your FTP application or use the web host’s file manager to see this file.)

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

IMPORTANT NOTE: If you are on a Windows hosting account (please check this before commenting below), you will NOT have an .htacccess file. You will need to install a web.config file to use the Microsoft’s Rewrite Module. For more information, please read: http://codex.wordpress.org/Using_Permalinks#Permalinks_without_mod_rewrite. If you are on GoDaddy and have Windows hosting, please read: http://wordpress.org/support/topic/godaddy-iis-and-removing-indexphp-in-url?replies=20#post-1507468

To determine if the permalinks is the issue with why your internal page links are displaying as Page Not Found, try to use the Default permalinks (Permalinks > Settings) and see if you can view all your interior pages fine. If you CAN view all your pages using the Default permalink settings (in other words, the pretty urls are turned off), then the issue is related to the .htaccess file on Linux/Apache hosting or not having a web.config file and rewrite rules enabled on a Windows server.

You may need to check with your web host about how to make this work properly. Some, such as Yahoo web hosting really are not good WordPress hosts, others require that /index.php be part of the permalink structure. So, if the default permalinks work, and you’ve tried creating and editing your .htaccess (Linux) or web.config file (Windows), then call your web host.

4 – PHP Version Called in the .htaccess file

One person who wrote to me had their php version command in their .htaccess file. They had deleted the .htaccess file after moving WordPress, so the PHP directive calling for the correct version of PHP was removed, and their site therefore was running PHP 4, and the latest WordPress will not run in PHP 4. This is something you can check with your web host, and they can give you the line that goes in your .htaccess file to call for the correct version of PHP. It will look something like this:

AddHandler application/x-httpd-php5s .php

5 – Old Site Files Interfering with New Site

Several people installed WordPress in a subdirectory because they had an existing site in the main url. When they followed these instructions to move the index.php file the WordPress subdirectory to the main site directory, they left the old site files in the main directory and therefore, the browser kept trying to open the old index.html file rather than the index.php file. To fix this, simply create a new folder called _OLD in your main directory and drag all of your old site files into this folder. Download this folder and then delete it from the server after you’ve verified that the site is functioning correctly. Do not leave these old files on the server unless you have excluded them from search engines via a robots.txt file.

6 – Redirecting Old URLs

Whether you had an old .html site up or had your current WordPress site in the subdirectory indexed by Google, you’ll want to do redirects on these pages that Google may have indexed.

If you had an old .html site and the WordPress site was “private,” after you’ve completed this process, be sure to change the Privacy settings in the WordPress dashboard, so Google can now index these new WordPress urls. Install the Redirection plugin and create redirects on the old .html URLs to their new WordPress URLs. Install the Google XML Sitemap plugin and generate a new sitemap and submit it to Google Webmaster Tools. This will help prevent any 404 Page Not Found errors. Google will eventually re-index your site with the new URLs, so you shouldn’t have those old URLs come up in search engine searches after a few weeks.

If your current WordPress installation was indexed by Google with the old URLs, eg http://yoursite.com/mywp/about and now it is http://yoursite.com/about, then you will need to do the same as above for those old URLs. If you have a LOT of these old URLs, ie, you had a large, active blog before you followed these instructions, I’m testing out an .htaccess command you can use to rewrite all the URLs. I’ll post it here when I’ve tortured tested it.

7 – Protecting the WordPress Directory from Browsing

Since we removed the index.php file from the WordPress directory, now that directory can be “browsed,” which is not good. To prevent this, add the following line to your .htaccess file:

Options All -Indexes

OR install the Silence is Golden Guard plugin

OR create a new blank index.php file in the WordPress directory which contains the following code:

<?php
// Silence is golden.
?>

8 – Internal Hyperlinks

Please note that this process does preserve all the image links in your site. However, you will need to reset any INTERNAL hyperlinks, including any manually entered hyperlinks in the Appearance > Menus.

Some themes have hardcoded the link to the Home page incorrect and you may need to set that correctly in the header.php file of your theme.

A good plugin for finding these broken links is the Broken Link Checker.

I have also used the Search and Replace plugin, but use it with caution, because you don’t want to replace your good image links.

Typically, I will search for <a href=”http://yoursite.com/mywp

and replace with <a href=”http://yoursite.com/mywp

then I’ll do another search to make sure I didn’t break any image links with <a href=”http://yoursite.com/wp-content

and replace with <a href=”http://yoursite.com/mywp/wp-content since the wp-content is and always will be in the mywp (aka the subdirectory).

Q: I’ve just started a blog. I’m new at it. The blog is set up using the Genesis theme Lexicon. I would like tags to show under my posts, but for some reason they don’t. Maybe this particular theme doesn’t enable it. How can I address this? I am not a coder so is there a plugin or something easy I can do. Also, can you tell me how to add widget-isable footers to my blog, please? In the theme I use, there are no footer widgets.

Thanks in advance.

Regards,
Gary

Genesis StudioPress Themes

A: I am an affiliate for Genesis, and I really do love their themes! StudioPress, the providers of the Genesis Framework and child themes, has a great community of support with thorough documentation and tutorials:

• Genesis Tutorials
• Genesis Development and Tutorials
• Genesis Support

Below are a few plugins, tips, and reference links which will take you a long way to customizing your Genesis child theme easily and quickly.

Genesis “Hooks”

To control the content that displays on your posts and pages, I highly recommend the Genesis Simple Hooks plugin. It allows for easy control of the Genesis theme “hooks” so you can add or remove any Genesis functionality from your theme without needing to be a “coder” to do so.

The “hooks” are different areas of the site where you can insert or remove functionality or content, such as “before header,” “after header”, “before post”, “after post,” etc. Please refer to the Genesis Hook Reference for a description of all of these areas. These are also well described in the Genesis Simple Hooks Plugin.

Genesis Shortcodes

There are numerous “shortcodes” you can use in the Simple Hooks plugin (which will display in the Genesis area of WordPress after you install it). Refer to the Genesis Shortcode Reference to find the code to display the content you want on your sites. Add the shortcode to the appropriate area in the Simple Hooks plugin. For example, to display the post tags below each post, enter the post_tags shortcode in the simple hook “genesis_after_post_content” hook and click Save Changes. Badabing, badaboom, your tags will display at the bottom of the post:

Genesis Footer Widgets

To add widgets to your Genesis footer, you will need FTP access to your site and a text editor to edit the child theme’s functions.php file. Then, you can follow these instructions from the Genesis Tutorials site: Adding Widgets to the Genesis Child Theme Footer

Or, you can use this handy plugin to automatically add three footer widgets to your Genesis child theme: Genesis Footer Widgets.

Genesis Sidebars

Also, if you want different sidebars on different pages or posts, install the Genesis Simple Sidebars plugin. This plugin will let you create different sidebars easily which you can choose on a per page/post basis.

Genesis Simple Edits

This Genesis Simple Edits plugin creates a new Genesis settings page that allows you to modify the post-info (byline), post-meta, and footer area on any Genesis theme. Using text, shortcodes, and HTML in the textboxes provided in the admin screen, these three commonly modified areas are easily editable, without having to learn PHP or write functions, filters, or mess with hooks.

Other Genesis Plugins

You can find many other helpful Genesis plugins on the WordPress.org Plugin Repository.

TimThumb is a popular image resizing utility used on millions of sites worldwide. It is inherently vulnerable because it allows hackers to upload and execute arbitrary PHP code in your timthumb cache directory.

To prevent this from happening, it is urgent that you either update your TimThumb script to the latest version, remove it or edit it and set the $allowedSites array to be empty.

I already know several people whose sites have been hacked from this vulnerability. My WordPress Firewall plugin alerts show that robots are surfing the net and targeting all WordPress sites looking for this script to exploit. It does not matter that your site is unpopular or receives no visitors or that the theme containing it is not active. Hackers don’t care if you don’t use your site any longer. If you have this script, you will likely get hacked sooner or later.

How do you know if you are at risk?

1 – First, login into your site using your FTP application or SSH (SSH instructions here).

2 – Check ALL the files in your themes folder on your server to see if you have any file named timthumb.php or thumb.php (different theme developers named this differently).

3 – Open the file in your html editor and look for

* TimThumb script created by Ben Gillbanks, originally created by Tim McDaniels and Darren Hoyt
* http://code.google.com/p/timthumb/

If that is in the file, then you are looking at the correct file.

Here are a list of free themes on the wordpress.org site that contain(ed) this script: http://blog.sucuri.net/2011/08/timthumb-security-vulnerability-list-of-themes-including-it.html

Also, all Elegant Themes downloaded prior to August 2011 contain this script. Elegant Themes has updated all of their themes to no longer use this script.

How do you fix it?

1 – Go to http://timthumb.googlecode.com/svn/trunk/timthumb.php and copy all of the code on the page.

2 – Open your theme’s timthumb.php file and delete the content. Paste the code you just copied into it.

6 – At the very end of the code in the file, be sure that it ends with a ?> to close the PHP function. (For some reason the googlecode does not have the ending ?> – go figure.)

7 -Next, set allow external sites to false. This will prevent image fetching from external sites.

if(! defined('ALLOW_EXTERNAL') )         define ('ALLOW_EXTERNAL', false);            // Allow image fetching from external websites. Will check against ALLOWED_SITES if ALLOW_ALL_EXTERNAL_SITES is false

8 – Next scroll to the top of the file and start to slowly scroll down until you see an area that says $allowedSites.  Remove all of the sites listed in the array:

Before:

$allowedSites = array (
'flickr.com',
'picasa.com',
'blogger.com',
'wordpress.com',
'img.youtube.com',
'upload.wikimedia.org',
'photobucket.com',
);

After:

$allowedSites = array (

);

9 – Save and upload the file.

10 – Repeat for ALL timthumb.php files found on your server, even the ones for themes you are not using.

Note: If you are not using the theme, then you should probably remove it from the server. Also, do NOT leave a backup of the OLD timthumb.php file on your server. If you want to keep a backup, then store it on your local computer, not on the server.

More Information and Resources

• Scan your site at http://sucuri.net
• Read more about how this vulnerability was discovered at: http://markmaunder.com/2011/08/01/zero-day-vulnerability-in-many-wordpress-themes/
• Subscribe to WP Security Lock to stay on top of the latest WordPress Security issues: http://www.wpsecuritylock.com/
• Install the WordPress Firewall Plugin: http://wordpress.org/extend/plugins/wordpress-firewall-2/

1 – Install Cleaner Gallery Plugin

The Cleaner Gallery plugin creates valid HTML code (which the default WordPress gallery does not) and ingrates with many lightbox-type plugins. (Lightbox displays a large version of an image on top of the web page and fades out the rest of the web page. For an example of lightbox effect, see the Demo on the Slimbox 2 site: http://www.digitalia.be/software/slimbox2/.) (Note: the Cleaner Gallery plugin may not play well with some themes, so deactivate this plugin and skip on down to #2 if you find that the gallery doesn’t work properly after you’ve installed it.)

To install the plugin:

1. Login to your WordPress dashboard and go to Plugins > Add New.
2. In the search field, type Cleaner Gallery.
3. Click Install Now for the Cleaner Gallery plugin by Justin Tadlock and click the OK button when asked if you want to install the plugin.
4. Click the Activate Plugin link.

2 – Choose a Lightbox Plugin

There are several lightbox plugins which work with Cleaner Gallery. The important thing when selecting a lightbox plugin is to find one that has been recently updated and installed by many other people — these two things demonstrate that the plugin is going concern for the developer and likely to stay updated. Each lightbox plugin works a little differently in terms of how the image enlarges, how the navigation displays, how the caption and image title display, etc. You can check the functionality of the following plugins and then decide which one you want to use:

• Fancybox for WordPress by José Pardilla: http://wordpress.org/extend/plugins/fancybox-for-wordpress/| View Demo (scroll down to see the Images Demo).
• WP-Slimbox2 Plugin by Greg Yingling (malcalevak): http://wordpress.org/extend/plugins/wp-slimbox2/. See demo at: http://www.digitalia.be/software/slimbox2/
• Floatbox Plus by Oliver Schaal: http://wordpress.org/extend/plugins/floatbox-plus/. See demo at: http://randomous.com/floatbox/demo
• wp-jquery-lightbox by Ulf Benjaminsson: http://wordpress.org/extend/plugins/wp-jquery-lightbox/. See demo at: http://game.hgo.se/blog/motion-capture/
• Lightbox 2 by Rupert Morris: http://wordpress.org/extend/plugins/lightbox-2/
• Thickbox: You can use the thickbox script that comes with WordPress and not have to install anything. See demo at: http://jquery.com/demo/thickbox/

3 – Install Your Choice Lightbox Plugin

1. Login to your WordPress dashboard and go to Plugins > Add New.
2. In the search field, type the name of the plugin you chose from the above list in step 2. There are many plugins with similar names, so if you type the name exactly as the text in bold above, you’re more likely to find the correct plugin. Be sure to match the plugin author name as well. (If you want to use the Thickbox script that comes with WordPress, you don’t have to install a plugin.)
3. Click Install Now and click the OK button when asked if you want to install the plugin.
4. Click the Activate Plugin link.

4 – Set the Cleaner Gallery Settings

1. Under Appearance, click Cleaner Gallery.
2. In the Default Gallery Settings, choose display Thumbnail and Images should link to full image. You can set other settings as you prefer.
3. If you are using the built-in WordPress Thickbox, check the two Thickbox checkboxes under Script and Style settings. If you are using one of the other plugins listed above, choose the plugin name from the list under External Image Script.
4. Click Update Settings.

5 – Set the Lightbox Plugin Settings

Look under the Settings area for the lightbox plugin you installed in step 3 above and set whatever settings you’d like for the lightbox effect. For example, using the Lightbox 2 plugin, I like to set the option to have the images dynamically resized so they fit within the browser window.

6 – Upload Images and Insert Gallery

1. On the post or page where you’d like to display your gallery, click the Add an Image icon to the right of Upload/Insert just above the visual editor toolbar.
2. Upload multiple images by shift-clicking to select a group of images.
3. After the images have uploaded, click Save Changes.
4. The Gallery tab will automatically be selected. In the Gallery Settings area, choose link thumbnails to Image File and the number of columns you’d like, then click Insert Gallery.
5. The gallery will insert a shortcode on your page or post which will display as a camera with a photo. To see the shortcode, click the HTML tab.
6. Update or Publish your post and view the results. If you have any trouble with this, try using a different lightbox plugin or deactivating the Cleaner Gallery plugin. The results vary depending on the theme you are using. If your theme already has a lightbox effect installed, you may not need to install a lightbox plugin and can just do this step 6 in order for your gallery to display.

Below is a gallery of images from my recent trip to Peru.

In order to exclude the screenshots above from this gallery, I went into the HTML tab and modified the short code to remove these image IDs (which you can find by going the Media > Library and editing the image. The image ID displays in the browser URL. Here’s my modified shortcode: [ gallery link="file" columns="4" exclude="395,397" ] (Note: I put spaces after the brackets so you can see the code, otherwise, you’d just see the images again. You can exclude more than one image by separating the image IDs with commas.) For more information about the Gallery shortcode, see http://codex.wordpress.org/Gallery_Shortcode