Skip to main content
CSS is fun and cool and I like it.

Insert Images within Figure Element from Media Uploader

For your functions.php file or a functionality plugin:

function html5_insert_image($html, $id, $caption, $title, $align, $url) {
  $html5 = "<figure id='post-$id media-$id' class='align-$align'>";
  $html5 .= "<img src='$url' alt='$title' />";
  if ($caption) {
    $html5 .= "<figcaption>$caption</figcaption>";
  $html5 .= "</figure>";
  return $html5;
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

It also takes what you enter as a caption and inserts it within the <figure> tag as a <figcaption>. Example inserted code:

<figure id='post-18838 media-18838' class='align-none'>
  <img src='//' alt='Title of image'>
Read article

Remove Admin Bar For Subscribers

You might want open registration on your WordPress site so that (for one small example) people can log in and leave comments on things without needing to type their name/url/email every time. But these users probably don't need to see the whole top admin bar as there likely isn't much use in it for them. Although do be sure to provide a link to edit their profile and log out.

This would be for your functions.php file or functionality plugin:… Read article


Allow SVG through WordPress Media Uploader

NOTE: As of 4.7.1 this isn't working exactly as published here anymore. Comment thread starts here. I'll update this once the best way to handle it becomes clear. This is the best I got so far.

For your functions.php file or a functionality plugin:

function cc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
add_filter('upload_mimes', 'cc_mime_types');

Without this, SVG files will be rejected when attempting to upload them through the media uploader.

Before WordPress 4.0, you also make them display … Read article


Turn Off Number Input Spinners

WebKit desktop browsers add little up down arrows to number inputs called spinners. You can turn them off visually like this:

input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 

Note that some other functionality still exists, like being able to increment the number via the scroll wheel on a mouse.

Top, on, Bottom, off.… Read article
icon-link icon-logo-star icon-search icon-star