Split Name WordPress Function

by Flash | Oct 12, 2013 | Tips, WordPress

Recently I ran into a road block when working on a website where I needed to take the names of gourmet chef’s, add them as the page title, then display them split onto two lines. I thought CSS word-break might bail me out, but no joy; was not working for my situation. I then Googled for solutions and found a StackOverflow post that suggested CSS word-spacing. That failed miserably as well. The solutions was to code a WordPress function then apply it to where I was echoing out the titles.

// split name
if (!function_exists('the_title')) {
	function the_title($name) {
		if($name!='') { return get_the_title($name); }
		else return false;
	}
}

if (!function_exists('split_name')) {
	function split_name($name) {
		if(strpos($name,' ')!==FALSE) {
			$name_arr = explode(' ',$name);
			if(count($name_arr)==2) { return $name_arr[0].'<br/>'.$name_arr[1]; }	
			elseif(count($name_arr)==3) { return $name_arr[0].' '.$name_arr[1].'<br/>'.$name_arr[2]; }
			else { return $name; }	
		} else { return $name; }
	}
}

Here is a look at my template code:

<?php echo split_name(get_the_title()); ?>

WordPress Comments Disabling

by Flash | Sep 16, 2013 | Tips, WordPress

Disabling Comments Globally :: Have you been getting tons of comment spam, those pesky comments that talk more abut Gucci bags than the do about any of your website or blog subjects? Did you know that commenting ability can be  disabled (or hidden or turned off, however you wanna couch it). Here is a quick tutorial about managing comments for WordPress websites and or blogs, either globally or on a per page and or per post basis.

Comment management in WordPress is is not theme related – turning off comments is a WordPress feature that is just a bit hidden at first and not very well documented. It will work no matter what theme you’re using.

Disable WordPress Commenting Globally

Navigate to your website or blogs admin; the WordPress Dashboard, next in the left navigation panel find Settings =>Discussion .  Find the option on the ensuing scree “Allow people to post comments on new articles”.  This setting is checked by default. You can un-check this option to turn off entirely; well, with some noted exceptions.

Exceptions

Posts and or pages that have already been written before the time you change this option will remain unaffected.

Spam Bots that find your website theme’s comment form and auto submit it even though it has been hidden from public view.

Disabling Comments Per Post/Page

But most of you probably want greater power. You want micromanagement. You wanna choose one by one the pages or posts that have comments enabled. Well, that’s very easy. The option has been there all along, only that it’s not visible. Yet…

Either create a a new post or page, or edit an existing one and then, in the top right corner of your page look for the Screen Options tab. Click on it to reveal a host of hidden options. The option related to WordPress discussion/commenting is titled “Discussion” and it is not enabled by default. Enable this option and then below the page/post content editor a new meta box will be revealed as pictured below:

Un-checking the Allow Comments check box will turn off commenting – hide the Add a Comment form for individual pages or posts.

A Plugin Solution

While I often caution about excessive plugin use, if you are not an offender you may want to go this route. Please be aware that any plugin may conflict with your theme’s code or with other plugins, now or in the future given WordPress core and plugin updates that are sure to occur.

The Disable Comments plugin will allow a site administrator to globally disable all comments, including pingbacks and trackbacksLear more from the WordPress codex. Comments can be disabled for specific post types only – posts, pages, or attachment pages. The plugin’s effects are reversible simply by disabling the checked options.

WordPress 3.6 Media Action

by Flash | Sep 13, 2013 | Tips, WordPress

The latest version of WordPress, “Oscar” (or version 3.6 to the less romantic) was released just over a week ago. By now a huge chunk of active WordPress users will have migrated to the latest / greatest version of WordPress. (3.6.1 as of this writing)

This new Oscar version was named in honor of Canadian jazz pianist and composer Oscar Peterson, WordPress 3.6 features more than just a new theme and improved revisions. Oscar includes better auto-save and post locking, native support for audio and video embeds via an HTML5 media player, as well as improved integration with Spotify, Rdio, and SoundCloud.

What’s New?

The newly added user features are as follows:

• The new Twenty Thirteen theme puts focus on your content with a colorful, single-column design made for media-rich blogging.
• Revamped Revisions save every change and the new interface allows you to scroll easily through changes to see line-by-line who changed what and when.
• Post Locking and Augmented Autosave will especially be a boon to sites where more than a single author is working on a post. Each author now has their own autosave stream, which stores things locally as well as on the server (much harder to lose something) and there’s an interface for taking over editing of a post.
• Built-in HTML5 media player for native audio and video embeds with no reliance on external services.
• The Menu Editor is now much easier to understand and use.
• A new audio/video API gives you access to metadata like ID3 tags.
• You can now choose HTML5 markup for things like comment and search forms, and comment lists.
• Better filters for how revisions work, so you can store a different amount of history for different post types.
• Tons more listed on the Codex, and of course you can always browse the over 700 closed tickets.

Supported Audio

MP3 for audio and MP4 for video are pretty standard but the MediaElement.js player supports all of these file types.

Supported Video

Keep in mind that video files are often very large in size. It is usually recommended that you host video on a service like YouTube or Vimeo since their servers are optimized for streaming video. It will also save you the cost of disk space and bandwidth. See Embedding from Other Sites below.

Using URL

Smartly, you uploaded an audio or video file to another server, say Amazon S3 or a file hosting service. In that case, you can’t use the process above. Instead, simply provide the URL to the file in your content. WordPress will read its extension (.mp3, for example) then automatically show the media player. Just enter the URL to your media file (unlinked) on a line of its own. Keep in mind that video files are often very large in size. It is usually recommended that you host video on a service like YouTube or Vimeo since their servers are optimized for streaming video. It will also save you the cost of disk space and bandwidth. See Embedding from Other Sites below.

Smartly Use Video URL

Maybe you uploaded an audio or video file to another server, say Amazon S3 or a file hosting service. In that case, you can’t use the process above. Instead, simply provide the URL to the file in your content. WordPress will read its extension (.mp3, for example) then automatically show the media player. Just enter the URL to your media file (unlinked) on a line of its own. Consider this a bonus. You might also want to embed a video from a site like YouTube. This has been possible before WordPress 3.6 with a very handy feature called Embeds. It’s not new, but I find many users are completely unaware of it and struggle at copying/pasting blocks of HTML embed code, which often requires the help of a plugin. That’s too much work! Instead, just paste the URL of the page showing the video.

Shortcodes

MediaElement’s great, but we don’t want to be locked in to one external library forever. Instead of using MediaElement-specific markup everywhere, we expose audio and video markup through shortcodes: [ audio ]and [ video ].

For the following scenarios:

• I have an old post that has a video in the Media Library attached to it, and I want to use the new shortcode:
• I have the URL for a video, from the Media Library or external, that I want to play:
  [ video src="video-source.mp4" ]
• I have a source URL and fallbacks for other HTML5-supported filetypes:
  [ video width="600" height="480" mp4="source.mp4" ogv="source.ogv" webm="source.webm" ]

Same goes for audio:

• I have an old post that has an audio file in the Media Library attached to it, and I want to use the new shortcode: 
• I have the URL for an MP3, from the Media Library or external, that I want to play: [ audio src="audio-source.mp3" ]
• I have a source URL and fallbacks for other HTML5-supported filetypes:
  [ audio mp3="source.mp3" ogg="source.ogg" wav="source.wav" ]

Shortcodes focus on the “what” and abstract the “how.” If you want to use a library that is not MediaElement, you can! Just look at what to filter: here

Example :: There is a YouTube video at http://www.youtube.com/watch?v=mmRPSoDrrFU that you want to embed. Simply paste that into your content on a line of its own and the YouTube player will show in its place when you publish. Be sure that the URL is not linked.

YouTube

YouTube video at http://youtu.be/zTI5seuGi20 becomes video below:

Vimeo

Same method using Vimeo URL:

SoundCloud

Same method for SoundCloud

https://soundcloud.com/hillsongmusic/cornerstone-1

Audio

Dock of the Bay – inserted by simple url (https://flashalexander.com/mp3/dock_of_the_bay.mp3)

At the time of writing, WordPress includes support for about 20 sites. Here’s the list ofsupported sites. New versions of WordPress increase support, with Rdio and Spotify recently being added in 3.6.

Display Code for WordPress Featured Images

by Flash | Apr 7, 2012 | Tips, WordPress

The WordPress Featured Image is a great tool where ones pages and posts can be easily illustrated with a pre-configured display of any selected image that has been uploaded to the WordPress Media Library. As a WordPress theme developer, I often have to find new ways to display the featured image, or in the case of editing somebody else s WordPress theme, I may find myself using the feature image function in combination with other display tools, such as timthumb.php or ???

My preferred method is to grab the url of the featured image, then use that to construct what will be needed given the design brief. The following is my code to grab the featured image URL:

Display URL Example

<?php if (has_post_thumbnail( $post->ID )) : ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image; ?>" />
<?php endif; ?>

Easy peasy. How about getting it to display as an image? Note I’ve added an image class to help me style how the image will be displaying.

Image Display Example

<?php if (has_post_thumbnail( $post->ID )) : ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img class="myFeatured-image" src="<?php echo $image; ?>" />" alt="Featured Image" />
<?php endif; ?>

Let us link that displayed image to something. In this example I’m showing the featured image in a lightbox effect:

Hyperlinked Example

<?php if (has_post_thumbnail( $post->ID )) : ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<a href="<?php echo $image; ?>" title="Featured Image" rel="fancybox"><img class="myFeatured-image" src="<?php echo $image; ?>" />" alt="Featured Image" /></a>
<?php endif; ?>

Showing the featured image full size then linking the same image to appear in a lightbox effect is silly at best. What generally occurs is displaying an image thumbnail, then having that link to the full size image. To achieve this I use the popular (and now secure) timthumb.php script found at Google

TimThumb.php Example

<?php if (has_post_thumbnail( $post->ID )) : ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<a href="<?php echo $image; ?>" title="Featured Image" rel="fancybox">
	<img class="myFeatured-image" src="http://your.path.to.timthumb.php?src=<?php echo $image; ?>&q=100" />" alt="Featured Image" />
</a>
<?php endif; ?>

Notes

In the above example, I’ve added q=100 which sets the rendered jpg quality to 100%. There are more variables that can be added, including how and where to crop. You will need the GD library installed on your server (who doesn’t these days). Learn more about the timthumb script and its primary developer Ben Gilbanks from Ben’s TimThumb website