Stories from my Life as a Technologist
UPDATE: Please consider not using a carousel at all: Death to the Website Carousel
I previously posted on this same topic not all that long ago, but that slider broke when we updated to the most recent WordPress (3.4) and since new plugins come out all the time, I thought I’d just find a new one. Continue reading “Finding a WordPress Image Slider Carousel Plugin (Again)”
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.
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.
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.
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.
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.
As a web developer, I cringe at deprecated code and try my best to keep up to date, which right now means familiarizing myself with HTML5 and CSS3. In reflecting on how best to update our website, I realized that with a CMS, naturally some things are out of my control.
Whether it’s the core or plugins, users of a CMS are reliant on its developers to keep things up to date. Is that lost of control worth the benefits? Generally, I would say yes, but that doesn’t stop me from wishing that the technology that we use to adopt new specifications.
I think it’s interesting that in HTML5 there is now the figure and figcaption elements. If they are taken advantage of, I think it definitely helps to parse information in a webpage and to identify text that is directly related to images.
One thing that does bother me about WordPress (which actually has noting to do with HTML5) is that it forces users to have a title, and leaves alt text blank by default. I don’t know what the best solution may be, but I would propose to insert the title text into the alt text by default and then allowing the user to change it. If they want to leave it blank, then there should be a checkbox to mark it “intentionally left blank” or something. Perhaps this could be an admin option, but I would definitely want something like that since I would really like to force our users to have alt text, but I don’t want to touch the WP core obviously.
It’s a bit of a minor thing and while some may argue the usefulness of the different semantic tags, users of the rich text editor would have no notion that they’re using <strong> instead of <b> or <em> instead of <i>. While I admit that even I struggle on the appropriate use of each (I have to look it up every time I think about it), if we want to see widespread adoption, then we need to get users to think about their writing and what they intend to do when using any of strong, em, b, i.
While we avoid tables and it should never be used for layouts, users will still want to insert tables to display data without resorting to an image. I’ve always wondered that WordPress doesn’t have a table insertion button even under the kitchen sink. What worries me is that then users who have a basic knowledge of HTML will insert it themselves using the HTML view with improperly formed code.
You might wonder why I’d lump the two, and that’s because, other than (using the default) comment form, both of these are dependent on a WordPress setup.
Forms will generally depend on the plugin. Similarly, whether the layout is in HTML5 is very dependent on the theme, along with many elements of accessibility.
Unfortunately, while HTML5 themes are relatively easy to find, most form plugins do not tell you whether they are using HTML5 or how much of it.
I do realize that while there are a number of advantages to HTML5, especially in terms of structure, it’s still in development. Working in an educational institution, it’s also more work and sometimes difficult in some cases to ensure backwards compatibility.
In particular, screen readers do not necessarily support all the new HTML5 elements and will frequently ignore whole chunks of text or have difficulty with reading links, etc. Even the newest versions of screen readers do not necessarily recognize elements and properties designed to make webpages easier for screen readers to interpret.
I would like to think that since WordPress talks about trying to be accessible that anything in the WordPress core will be updated once there is widespread adoption not only among browsers, but also screen readers. Obviously, adoption will take time though. For example, many form input types have been adopted by most browsers, but has not been adopted by IE at all (will be in IE10).
One can only hope that adoption will pick up once various part of the HTML5 specifications are ‘cemented.’
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.
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
$comments_args = 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>’
);
comment_form($comments_args);
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=”eggytheram@ryerson.ca” 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>’
);
comment_form($comments_args);
For a full list of default values in comment_form(), take a look at the Codex Function Reference.
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=”eggytheram@ryerson.ca” 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) {
if(isset($fields[‘url’]))
unset($fields[‘url’]);
return $fields;
}
add_filter(‘comment_form_default_fields’, ‘alter_comment_form_fields‘); //make sure to use comment_form_default_fieldsNote: 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.
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).
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.)
Sadly, this was also harder than I expected. Honestly, in this case, the only requirement I had was that it worked.
I tested a lot of plugins (pretty much every one I could find), many of which didn’t work and were simply incompatible with the newest version of WordPress. Here are some that worked:
I rejected a couple of CSS plugins that seem to be no longer in development (such as WordPress.com Custom CSS) even if they (mostly) work and I used a combination of how recent there has been an update and whether developers responded to forums posts as a criteria.
On the upside, it was quite easy to find a social media sharing plugin that worked. I did have a couple of requirements for this:
I didn’t test a lot of them since I found a couple that work, and I was happy with one in particular. Here are the results:
I’m open to suggestions on better plugins of either, especially CSS ones (for single and multi-site). Next might be form management, but if I can’t find a good free one, I might simply suggest paying for GravityForms (since it’s a one time payment).
UPDATE: Of course, then I finally find out about Jetpack almost all of which is free, including Custom CSS and Sharing. The only downside is that you need a wordpress.com account, and I am not connecting my personal account to work sites.