WordPress Plugin: Publicize or Automatically Post to Facebook & Twitter

So, I recently discovered the WordPress Jetpack plugin set, which does a lot of the things I had previous looked for WordPress plugins to do, including custom css, share buttons, and extra widgets you’ll find on the .com version. The only thing I really wanted that was missing, was the “Publicize” feature to post to social media, such as Twitter.

Requirement

The one requirement I had was that one plugin should be able to post to multiple social networks instead of having separate ones for each social network. This mostly has to do with making it easier to use and maintain. While we only need Facebook and Twitter right now, we may need others in the future, especially something like G+, so I preferred to already have something installed instead of having to find yet another plugin later.

Results

  • Network Publisher: This plugin probably supports the most social media sites and even includes stats. I didn’t actually really test this one because it required signing up for an API key. From the plugin page, it seems to at least work though.
  • SocialPublish: This one also required creating an account, but I still don’t understand why this is necessary.
  • NextScripts Social Network Auto Poster & WP-AutoSharePost: These required setting up apps on each of the sites, which is fine but not what I was looking for.
  • Social by MailChimp: This only does Twitter and Facebook, which was my minimum requirement, but it works. Not the nicest interface ever, but I like that you can edit the messages individually before they’re posted. I disabled the comment display, so I’m not sure how well that works, but it’s not something we wanted.

So in the end, Social was the only that did what I wanted easily (i.e. without all the dev apps stuff) and without the requirement of creating an account elsewhere first. Still need to properly test it on a multisite setup, but it’s the closest thing I can find to WordPress’ Publicize.

UPDATE: WordPress JetPack now includes Publicize! Yay~

Branding the Library Website: Making a Flexible WordPress Theme

In moving our website to WordPress, I wanted to create a theme that could be used by our staff when working on online projects which would sit outside our main website, but in which we would host. Obviously they have the option of using other themes, but then someone (likely from our team) would have to make sure it meets accessibility guidelines, and as there are very few of those, I thought it best to just make our theme flexible.

No CLF

This is just a disclaimer that the main reason we could even do this is because we do not have a Common Look & Feel policy from the university administration, which most universities do. On the flip side, that’s one reason I wanted to do it. I would like that the library “products” are recognized as such. Doing it through a theme would also provide a more consistent user experience across the sites that use the library’s theme.

The Header

Our existing site already used a consistent header. However, it also includes the “Ask Us” logo, which would take you to the “Ask Us” page with all the myriad ways to contact the library for help. For other sites, it’s more likely that they will want to list specific contact instead, so I added an option to remove it.

new site header
New Header with Custom Menu and Google Search Bar

In addition, of course, for any sites using the theme, they will want the name of their site in the header, so I added a text box input for that in the options page and used font-face to pick a different font to make it stand out a little more.

The Menu

The navigation was built into the original theme so that you can either use a custom menu or it will fallback to using pages. However, the way our sites are made, some of the subpages menus would have been so long as to go past the end of the page, so I added the option to take out submenus.

new header with subsite title
Header with Subsite Title, Fallback Menu, and WordPress Search

Finally, the original website search bar redirects the user to the university’s Google search of the library’s directory, so I made the option to change it to the standard WordPress search bar to search within the current site.

The Footer

Since each site may have different links in the footer, I also made an option to include custom links in the footer, such that the ‘Home’ link is the only hard-coded link (which is always the link of the home page of the site you’re on).

new full footer
Full Site Footer with Custom Links and Social Media Icons

While it’s possible to make the social media buttons customizable, until there is a demand or need, I decided to simply put in the option to take them all out.

new basic footer
Hardcoded Part of Footer

The rest of the footer (copyright) is always there. Again, unless there is a demand or need, I didn’t make the copyright holder changeable.

Templating

As many sections of our website (e.g. catalogue/OPAC, Research Guides) are not part of the CMS, I am currently working on taking the WordPress template (minus the options) and creating a plain HTML and then a ColdFusion template to use in those sections.

New Site: Moved to WordPress CMS

We moved our site this morning to a new domain and it’s now running on WordPress. After a few issues with the redirect that central IT had to fix, it seems to be running smoothly.

There is still a lot of work to be done in terms of cleaning up content, especially since there are still many pages using tables for layout purposes (insert big cringe here). I also still need to finish going through the accessibility reports (only did the front page so far), and writing guidelines for staff. Training has still yet to happen for staff as well (since we focused on getting the site up first).

Spot the Differences

The website has actually changed very little on the front end. Think you can spot all the differences?

old home pagenew home page

I’ve made an answer key if you care to play (red = added/removed, blue = moved, orange = small difference).

Rationale

I think most people will understand the rationale in going to the CMS. The move in this case was much more for internal reasons, primarily so that staff can update pages. Of course, this actually should have a positive impact (at least in theory) as staff will be assigned pages and be responsible for keeping them current. Putting this system in place should also free up time of those involved in maintaining the website to do other things.

Finding a WordPress Image Slider Carousel Plugin (Again)

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)”

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.

The Downsides of a CMS in Keeping Up: WordPress & HTML5

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.

Giving Up Control & Relying on Developers

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.

WordPress & HTML5

Image Tags & Properties

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.

Text Formatting Tags

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.

Tables

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.

Layout & Forms

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.

Why Not Adopt HTML5

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.’

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
$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.

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=”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_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.)

How Hard Can Finding a WordPress Plugin Be? Part 2: Custom CSS & Social Media Sharing

Sadly, this was also harder than I expected. Honestly, in this case, the only requirement I had was that it worked.

Custom CSS Plugin

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:

  • My Custom CSS – I liked that it colour codes and has line numbers, but it broke when I got over 700? lines. New classes that I added would be empty. I’m also not a fan of the fact that it just adds it at the top of the page instead of as an external file.
  • Custom CSS Manager – Pretty much exactly like My Custom CSS, but I haven’t broken it. Still unhappy that it doesn’t load an external file instead though.
  • Your Custom CSS – Simple, but seems to work just fine, even puts your code into an external file, which I like. Didn’t test it to 500+ lines though like I did with the previous ones.
  • Best Custom CSS – Works fine, can edit CSS files through built-in WP editor, only doing it that way isn’t very intuitive. It also presets CSS files instead of allowing you to set your own unfortunately.
  • Site Specific CSS – Turns out, most CSS plugins only work in a single site since they write to an external file and the plugin always calls the same external file. Since we’re running a Multi-Site install, I ended up with the site specific CSS plugin. It’s simple (all it does is load a CSS file you link to), but it works! Since it’s just a link, you have to edit the files externally or put it into your theme root folder (or plugin folder) to edit it in the built-in editor.

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.

Social Media (Twitter, Facebook) Sharing Plugins

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:

  • Facebook and Twitter required
  • Share buttons (not sidebar widgets) at the bottom of each post (but not pages)
  • Have to be able to turn off the display of shares counters

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:

  • Facebook, Twitter, Google Plus One Share Buttons – Works, but does not have as many options the other plugins. I also didn’t like the counters showing above instead of next to the buttons, which would be more compact.
  • Twitter, Facebook, Google Plus One Social Share – This one works great and has a lot of options including a floating box of the share buttons. The problem I had with this one is that you have more than one row of buttons, it goes beyond the div because of the display setting. I reported it, but didn’t feel like hacking it, so I went with the last one.
  • Really Simple Facebook Twitter Share Buttons – This one works great, plus it lets you reorder buttons, and set the width spacing. While the more-than-one-row behaviour isn’t ideal, it works. It also has a via username for twitter. It even comes with a shortcode and selective exclude method.

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.

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)
}

How Hard Can Finding a WordPress Carousel Plugin Be?

UPDATE: I posted a newer analysis in June 2012.

A lot harder than I thought, I can tell you that.

Requirements & Options

I did have a few requirements:

  • work in a sidebar
  • have manual image selection (i.e. not only through featured image on posts)
  • be able to set an external link for each image
  • some sort of navigation i.e. arrows or buttons
  • works with other necessary plugins for our site
  • 2D, not a fancy 3D one (though in the future a 3D one might be nice for special collections & archives)

Preferred options include:

  • buttons or numbers to skip directly to a specific image
  • left/right arrow navigation on hover
  • caption text at the bottom of image
  • variety of choices for animation
  • shortcode to easily add into widget

Results

I tested a lot of plugins (at least a dozen), many of which didn’t work. My guess is that many are dependent on its own version of jQuery and other js files that conflicted with the built-in WordPress one or incompatible with the newest WordPress in some other way.

  • JJ NextGen JQuery Slider looked promising, but because NextGen messes with user permissions, it was conflicting with the user management plugin I had installed. I’m wondering now if I disable that part of the plugin whether it will work.
  • DOP Slider works but isn’t ideal since there’s no captioning and the arrows weren’t showing up for me.
  • WP jQuery Text and Image Slider works but is also not ideal since it has no captioning and would need styling done so it doesn’t put it into a frame.
  • Nivo Slider for WordPress worked great. It would need a shortcode added (but that’s easy enough) and the buttons aren’t showing, which is obviously a bug, but we could probably fix it if we wanted them.

Many of the plugins are based on the jQuery Nivo Slider, which is free. Why not just use that? Well, we want our users to be able to add images themselves, and not rely on our team. The Nivo Slider developers offer a WordPress version, but it’s paid. It’s a fairly small amount though so I might recommend purchasing it instead of having to customize existing plugins, especially if it’s a one-time payment.