WordPress HTML5 Video Shortcode

Add a Shortcode for HTML5 Video to WordPress

A tutorial with example PHP code adding a shortcode to a WordPress based web site allowing video to be inserted into post using the HTML5 video tag, no extra Javascript library required. The html5_video shortcode adds the HTML video tag to a post to playback video in HTML5 enabled browsers. The latest versions of the popular browsers (Internet Explorer, Chrome, Firefox, Safari and Opera) support the video tag. Once the code is added to the site’s WordPress theme it can be used like this:

The html5_video shortcode parameters (options) are:

  • webm – The URL to the WebM version of the video, optional.
  • mp4 – The URL to the MPEG version of the video, optional.
  • ogg – The URL to the OGG version of the video, optional.
  • resize – If set to yes the width and height values are applied, optional, defaults to no.
  • width – If resize is set yes the width, in pixels, to display the video, optional, defaults to 200.
  • height – If resize is set yes the height, in pixels, to display the video, optional, defaults to 150.
  • poster – The URL for the poster image (the picture displayed before the user presses the play button) for the video, optional.
  • preload – The setting to use for the preload attribute, HTML5 values are noneautometadata, optional, defaults to metadata.

This html5_video shortcode is an alternative to the WordPress native Embeds support for some video hosting sites.

Changing the Theme’s Functions.php File

WordPress Editor OptionWordPress uses themes to style a web site. Part of the theme is a code file called functions.php. In this file code is called by the theme at various points as the user navigates the web site. Additional code is added to the file to extend a themes functionality. Here a function is defined to add the shortcode to allow for HTML5 video embedding in a post. You will need to edit the theme’s function.php file to add the new code. This can be done via the Editor under Appearance when administrating the site. Important: Before changing any web site files make a back up!. Continue reading

A to Z Index and Site Map for WordPress

The Code We Used For Our Website Index

Over the months and years a WordPress site will grow and grow with pages and posts. Older posts become buried under the new content and may not be easy to find for someone browsing your site. It is good to have a page that allows for easy navigation to older content, sometimes referred to as a site map. One has been added to this site, see our Index page. Our site map is more of a site index, it lists each category and the posts in each category in alphabetical order. There are WordPress plug-ins available for similar functionality though some can be overly complex. It can be difficult to find a straightforward way to index a site when searching for the answer on the web. Information on producing a site map or index page will often throw up articles on the sitemap.xml file format, which is used by search engines to help index a site. That file is important for your site and one is recommended, however, your web site visitors would appreciate a page with a site index that they can use when needed. We are sharing with you how we did it, so you do not waste time and can concentrate on your normal web site activity.

How to Add a Site Map with an A to Z Index to your WordPress Website

The index that we use on this site lists all the categories in alphabetical order and shows the number of posts in each category. Below that each category is shown with every post listed, again in alphabetical order. Clicking on a category in the first list will take you to its list of posts. Each list entry for a post will link to the post itself. Finally there is a list of the site pages.

Continue reading

Add a Favicon to a WordPress Theme

Example of a FaviconFavicons are those little icons to the left of the browser’s address bar, usually it is a small representation of the company’s logo. The icon is also shown to the left of the page title and in the bookmarks (favourites) list. It was introduce by Microsoft when it released Internet Explorer 5 in 1999 and is now widely supported. All the other major browsers allow the use of different graphic formats (.png, .jpg, .gif) as well as icon files, though for best results an icon file should be used (there are still some older browsers out there), see the Favicon article at Wikipedia.org. Here at Eye we use the Greenfish Icon Editor, though others are available, to produce icon files. Once the file has been produced drop it into the root of your site (the same location as the index.php file). To ship it with a WordPress child theme add a function to place the correct link tags in the head element of the web page. Read on to see how it is done. Continue reading

Need a Web site? Use a CMS to Make Life Easier

We are into the fourth decade of the personal computer, and the third decade of the Internet, by now computers are a breeze to use and easy to understand, yes? Sometimes you wonder why getting stuff done can take so long to do and is just too complicated for what should be straightforward. Websites are just a few pages of words and pictures, they must be just as easy to put together as any other document. Well they are if you use the right tools. Continue reading

Quickly Create a WordPress Child Theme

WordPress (from WordPress.org) is a free software package to make it easy for people to manage their own websites. It allows for easy blogging and content management. Most web hosting companies provide simple WordPress installation for domains purchased through them. Plus there is the dedicated WordPress site for blogging (WordPress.com).

The look of a site using WordPress is controlled by the current “theme” it is configured to use. WordPress comes with the Twenty Eleven and Twenty Ten themes. There are thousands of themes available with many free and paid for “premium” themes. A theme can be changed to fine tune it to your own requirements. The best way to do this is to created a “child” theme that references the theme you want to change and make the required changes in this child theme. Continue reading

Useful WordPress Additions

Eye uses WordPress to build web sites. It’s not just good for blogging sites but is great as a Content Management System (CMS). Over the (many) years of building web sites we have moved from hand coding HTML, to Dreamweaver and then Joomla!, but WordPress is the preferred tool. As a blogging system it’s great out of the box. As a pure CMS it needs a few extras to give it more flexibility. Here are extras found to be useful:

Plugins

Jetpackjetpack.me
eShopquirm.net
Better SearchBetter Search Home Page
Solve Media CAPTCHASolve Media
Simple Ads ManagerSimpleLib
CodeArt Google MP3 Player
Crayon Syntax Highlighter

Theme Moding

The tutorials at Voodoo Press ( http://voodoopress.com/) were used to help develop the Twenty Eleven child theme used on this site.

Site Index aka Site Map

Our WordPress based site has an Index, aka a Site Map, that was developed from various posts spread around the web. See the article A to Z Index and Site Map for WordPress, the code can be downloaded.