Tips on Making Your Gravity Forms as Accessible as Possible

I’m currently using gravity forms and struggling with the accessibility of it. It sounds like there are no plans to make it accessible, but I know a lot of people use this plugin, so let’s make the best of it. Continue reading “Tips on Making Your Gravity Forms as Accessible as Possible”

Putting It All Together: Creating a WordPress Theme Options Page Resources

There are some good theme option tutorials already out there, but I found a lot of them either too elaborate for my needs or incomplete. As a result, I thought I’d break it down how I used various tutorials in order to complete my page.

Loading Your Theme File

To actually load your theme options page, make sure that it is loaded as part of the theme setup. If you’re using an existing theme, you should see a:

add_action( ‘after_setup_theme’, ‘themename_setup’ );
This or something similar tells WordPress to load the themename_setup function more or less as the theme is being loaded/applied. Refer to the function reference page if necessary.

Somewhere in the function that is called, themename_setup, add a line to load your theme options:

require( get_template_directory() . ‘/inc/theme-options.php’ );
Refer to the PHP Manual require page if necessary.

All the code talked about in the tutorials would go in this one file. If a theme-options file already exist, consider whether you would rather make a new one or simply modify the existing one. If you only have 1-2 options, also consider adding options to existing options, such as Writing, Discussion, etc. if appropriate.

Recommended Create a Theme/Plugin Options Page Tutorials

Make your options page: Presscoder’s Tutorial (second half of post) or Otto’s Tutorial (simpler, less to read through, but less complete)

One thing in particular, I preferred Presscoder’s validation code.

The one thing I’ve been having problems with is setting the default options, and some other people I have found also have problems with the register_activation_hook, in which case, try using add_action as explained by Chip Bennett.

At the bottom of Otto’s post, he also briefly explains how to add options on existing pages instead of making a new one.

First half of Presscoder’s post gives a good overview of the WordPress functions and easy copy/paste example code for the various types of form options (e.g. textarea, checkbox).

A full example of an options page can also be found on Presscoder’s post near the bottom (just above “In Summary”).

To get the “Options/Settings Updated” box when a user has submitted/saved their options: Search for “Settings Updated Notice” on page 3 of Chip Bennett’s tutorial.

Displaying Your Options

Obviously, this depends on what kind of options you had (textbox, checkbox, etc.). The simplest example is if you have a textbox or textarea and you want to simply output the user’s input. In the appropriate place, insert:

<?php $array_name = get_option(‘option_name’); echo $array_name[‘key’]; ?>
Refer to get_option function reference if necessary.

More Resources

Chip Bennett obviously wrote much more than what I just refer to, but it goes into much more complex options than I cared to and covers how to implement multiple tabs on one settings page. If you’re interested in more functionality, I definitely recommend his tutorial.

If you prefer to have a prebuilt helper, Olly Benson has created a sort of template or framework with reusable code. Read more on his blog (though I haven’t actually tried using it).

For more, the WordPress Settings API page has a list of tutorials.

Modifying WordPress Comments Form Fields: Beyond the CSS

I ended up playing around with the CSS some more too to make the form even smaller, but I was also asked to change the form fields and decided to put in some placeholders. While the WordPress documentation for comment_form is pretty good, the example doesn’t clearly tell you how to change form fields. It’s possible I find it less than intuitive because I’m not a programmer.

In my case, I wanted to change the title from “Leave a Reply” to “Leave a Comment”. I also wanted to change the form fields to have placeholder text and make the comments box smaller.

Changing it Once

If you only want to change it in the one file, you can specify the new values just above where you call comment_form().

Let’s start with changing the easy stuff. Much like the WordPress example, just make an array with whichever values you would like to change from the default, and call the comment_form function with your array, which in this example, the form header and comment field are changed.

//for long defaults, such as the comment_field, I suggest copy/pasting the default and then modifying it
= array(
‘title_reply’ => ‘Leave a Comment’,
‘comment_field’ => ‘<p><label for=”comment”>’ . _x( ‘Comment’, ‘noun’ ) . ‘</label><textarea id=”comment” name=”comment” placeholder=”Eggy approves!” cols=”45″ rows=”4″ aria-required=”true”></textarea></p>’

Changing the other fields makes things a tad more complicated. For other fields, you need to specify another array, then apply your new values in the comments array.

//required variables for changing the fields value
$commenter = wp_get_current_commenter();
$req = get_option( ‘require_name_email’ );
$aria_req = ( $req ? ” aria-required=’true'” : ” );

//name the array whatever you want; I strongly suggest copy/pasting the default then modifying it
$new_fields = array(
‘author’ => ‘<p>’ . ‘<label for=”author”>’ . __( ‘Name’ ) . ‘</label> ‘ . ( $req ? ‘<span>*</span>’ : ” ) .
‘<input id=”author” name=”author” type=”text” placeholder=”Eggy the Ram” value=”‘ . esc_attr( $commenter[‘comment_author’] ) . ‘” size=”30″‘ . $aria_req . ‘ /></p>’,
’email’ => ‘<p><label for=”email”>’ . __( ‘Email’ ) . ‘</label> ‘ . ( $req ? ‘<span>*</span>’ : ” ) .
‘<input id=”email” name=”email” type=”text” placeholder=”” value=”‘ . esc_attr(  $commenter[‘comment_author_email’] ) . ‘” size=”30″‘ . $aria_req . ‘ /></p>’,
//in this case, we’re applying filters, so it changes all the values. If ‘url’ is not specified, then it gets removed.

$comments_args = array(
‘fields’ => apply_filters( ‘comment_form_default_fields’, $new_fields ),
‘title_reply’ => ‘Leave a Comment’,
‘comment_field’ => ‘<p><label for=”comment”>’ . _x( ‘Comment’, ‘noun’ ) . ‘</label><textarea id=”comment” name=”comment” placeholder=”Eggy approves!” cols=”45″ rows=”4″ aria-required=”true”></textarea></p>’

For a full list of default values in comment_form(), take a look at the Codex Function Reference.

Changing the Defaults

To change the fields for all comment forms, meaning it will change the default values and will be applied whenever you call comment_form(), you can change the defaults using a filter in the functions.php file.

//name it whatever you want
function alter_comment_form($new_defaults) {

//required variables for changing the fields value
$commenter = wp_get_current_commenter();
$req = get_option( ‘require_name_email’ );
$aria_req = ( $req ? ” aria-required=’true'” : ” );

//name the array whatever you want
$new_fields = array(
‘author’ => ‘<p>’ . ‘<label for=”author”>’ . __( ‘Name’ ) . ‘</label> ‘ . ( $req ? ‘<span>*</span>’ : ” ) .
‘<input id=”author” name=”author” type=”text” placeholder=”Eggy the Ram” value=”‘ . esc_attr( $commenter[‘comment_author’] ) . ‘” size=”30″‘ . $aria_req . ‘ /></p>’,
’email’ => ‘<p><label for=”email”>’ . __( ‘Email’ ) . ‘</label> ‘ . ( $req ? ‘<span>*</span>’ : ” ) .
‘<input id=”email” name=”email” type=”text” placeholder=”” value=”‘ . esc_attr(  $commenter[‘comment_author_email’] ) . ‘” size=”30″‘ . $aria_req . ‘ /></p>’,
//in this case, we’re applying filters, so it changes all the values. If ‘url’ is not specified, then it gets removed.

$new_defaults[‘fields’] = apply_filters(‘comment_form_default_fields’, $new_fields); //changing default fields to the new values in your array
$new_defaults[‘comment_field’] = ‘<p><label for=”comment”>’ . _x( ‘Comment’, ‘noun’ ) . ‘</label><textarea id=”comment” name=”comment” placeholder=”Eggy approves!” cols=”45″ rows=”4″ aria-required=”true”></textarea></p>’;

$new_defaults[‘title_reply’] = ‘Leave a Comment‘; //changes the form header text

return $new_defaults;

add_filter(‘comment_form_defaults’, ‘alter_comment_form‘); //basically tells it to replace the existing defaults with your new defaults value (where applicable)

If you only want to change the fields or if you want to do it separately from the comments_form_defaults (especially if only changing one field), then you can set new values in a similar way to the new defaults, say:

function alter_comment_form_fields($new_fields) {
return $fields;
add_filter(‘comment_form_default_fields’, ‘alter_comment_form_fields‘); //make sure to use comment_form_default_fields

Note: In this case, since we’re using the add_filter for the fields (instead of apply), it will only change the values specified.

Since this example only changes the url field, I could’ve actually used the specific field filter (i.e. comment_form_field_url) instead. Near the bottom of the Codex Function Reference page is a list of filter hooks related to comment_form.

The Result

As I mentioned, I edited the CSS further since my last post on editing the TwentyEleven comment form, so now it’s even smaller. It’s now 124px shorter and 84px less wide than my last version for a total of 367px shorter (and 84px less wide).

WP Comments Form Edited version 2

I was also recently reading about adding ‘character’ or ‘personality’ to a website and thought having fun placeholder text would be one small way to do that. (Eggy the Ram is the university’s mascot.)

When CSS Positioning Kills Functionality: Changing the Look of a WordPress Comments Form

When editing our theme, I had an interesting time editing the styling of the comments respond/reply form.

I was essentially modifying the WordPress TwentyEleven comments form, which looks like this:

WordPress TwentyEleven Comments Form

The form is huge though, especially since the blog posts we typically have are fairly short, I was afraid the comments form might end up bigger than the blog posts!

I figured the “quick” fix would be to simply lessen the amount of space between form fields. I did it the quick and dirty way, using:

#respond comment-form-field { margin-top: -30px }

Unfortunately, that broke the form fields. You could only activate the form field by clicking on particular areas of the field, which ended up being less than half of a field’s box.

It took me a while to figure out that the labels on each field would normally show above a field, but were repositioned on top of a form field. While this looks pretty, each label was taking up the equivalent space above a field; so if the whole field was repositioned to be closer to the above element, the space where the label would be overlaps the form field and thus block mouse behaviour. When a user tries to select the field, they’re actually selecting the paragraph element of the label:

Quick Fix Comments Form

In particular, this behaviour will happen any time an element overlaps another and its z-index is higher, literally positioned on top of the visible element below.

In the end, I restyled it with the labels above the fields so the gaps don’t look so big in between the fields. I also scaled it down somewhat, so that the end result is 243px shorter (in height) than the original and 123px shorter than even the ‘quick fix’ version. The end result:

Edited Comments Form

It still seems too large in comparison to a short post, so it will probably be restyled again later to be less wide as well and possibly scaled down even more. UPDATE: I wrote another blog post on further modifying the comments form, mostly using PHP.

Additional Information

For more on styling forms, check out WordPress’ article on Styling Theme Forms.

For those interested, here are the changes I made (classes that weren’t touched at all are not included):

#respond {
  padding: 1.625em 0 1.625em 1.625em;
#respond input[type="text"],
#respond textarea {
  (no change except removed text-indent)
#respond .comment-form-author,
#respond .comment-form-email,
#respond .comment-form-url,
#respond .comment-form-comment {
  margin-top: -10px;
#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-comment label {
  -moz-border-radius: 3px;
  border-radius: 3px;
  left: -10px;
  top: 4px;
  padding: 3px 5px;
  (mid-width removed)
#respond .comment-form-author .required,
#respond .comment-form-email .required {
  font-size: 1.5em;
  top: 33px;
/* added */
#respond .logged-in-as,
#respond .must-log-in,
#respond .comment-notes {
  margin: 0.3em 0 1em;
  text-indent: 2em;
#respond .form-submit {
  margin-top: -10px;
#respond input#submit {
  font-size: 1.15em;
  margin: 20px 0 0;
  padding: 5px 15px;
  left: 15px;
#reply-title {
  font-size: 1.4em;
  margin: 0;
  (removed font-weight and line-height)

Sometimes it’s the Browser, not your Code

As a beginner coder, I generally assume that if something goes wrong it’s my code. While it’s true that a website needs to be coded in such a way that it’s interoperable, sometimes the problem originates in the browser. This may seem obvious to any web programmer, but it wasn’t to me, mostly because the assumption really is, “I’m not an expert, so the mistake must be something in my code.”

Font-size Chrome Bug

In my case, I was having issues with font sizes, and this is such a basic part of CSS that it never occurred to me that it was a browser issue. Lo and behold, it turns out the current version of Chrome (17.0.963.79) rounds font-sizes to the nearest whole number, and I was doing calculations based on Chrome. Because of this bug, the site I was formatting looked very different.

For example, say I have:
h2 { font-size: 1.2em; }
h3 { font-size: 1.17em; }

Firefox: h2 = 19.2px , h3 = 18.7167px
IE9: h2 = 19.2px, h3 = 18.68(?)px
but Chrome: h2 and h3 = 19px

See jsFiddle example.

While these differences are so small you can barely tell in the example, you can imagine that on an entire website, it has a pretty big effect especially if it’s a base font size. In the end, I filed a Chrome bug report and it’s being looked at.

Sometimes it’s a Mystery

In our website’s book banner, there is a little styling trick in order to make it look nicer. What really got me was that it was using absolute positioning (which generally I avoid). However, if you make it relative, it no longer does what it’s supposed to.

Have something like this in the CSS:
span {
position: absolute;
top: 1em;
left: 1em;
border: 10px solid transparent;
border-right: 10px solid blue;
span+span {
position: relative;
left: 2em;
the HTML should then have an empty block: <span></span><span></span>

Result: results in one arrow and one trapezoid
If you want to play with it, it’s on jsfiddle

So far, I haven’t found an answer, so I’ve simply recoded it to make it work in the new layout. Now the strange thing is that it works on MAC, but breaks using the same browsers on Windows.

MediaWiki Image Link Workaround

So, in playing around with my user page and trying to make it look pretty, I found out that you can link an image to an internal or external link like you might normally do instead of the File: page. That’s great, but the problem I found was that except for the basic internal and external link, when you linked the image to something that inherently has a little icon next to it (e.g. mailto link gives you a little e-mail icon), then it would show the icon next to the image (see below left).

So, it turns out that there is a workaround to hide the icon (see above right). You can add this bit of code to the main.css file:

#bodyContent .plainlinks a {
background: none repeat scroll 0 0 transparent !important;
padding: 0 !important;

Or if the CSS Extension is installed, you can hack it by using the same code, but you’ll probably want it to be context dependent if you can.