All posts in “Coding”

Fixing The Twentythirteen WordPress Theme

By default the twentythirteen theme that comes bundled with WordPress is a great looking theme. It uses modern fonts and large orange coloured graphical accents.

Another benefit of using this standard theme is that you can be sure that a lot of work has been put into it – the WordPress brand depends on it!

Still I believe it has a few drawbacks for most : the comments feed is broken and it does not honour the setting to show summaries of posts on the frontpage instead of full posts. In this article I will fix both, it is really quite easy.

First of all the comments feed will actually return xml but it will do so with a 404 not found http response code which will cause the Google crawler to report it as a broken link on each and every page. This is not good for SEO. Fixing it involves hooking the feed_link action and return false if it is the comments-link :

add_action( 'feed_link', 'remove_comments_feed', 10, 2 );
function remove_comments_feed( $output, $feed ) {
  if ( strpos( $output, 'comments' ) > 0 )
    return;
  return $output;
}

This is simply added to the functions.php file of the theme (“wp-content/themes/twentythirteen/functions.php”).

Next we modify the summary-generation in the content.php file. You should look for the hardcoded if statement :

<?php if ( is_search() ) : // Only display Excerpts for Search ?>

it is line 33 in the file. You then force it to summarize for all the standard multiple-post views by changing it to :

<?php if ( is_search() || is_author() || is_tag()
       || is_archive() || is_home () ) : ?>

and you are good to go!

Apache Catch-all Default Site

Are you running several name-based virtual hosts on the same Apache server? If so you need to be aware that it can cause problems if there is ever a DNS record pointing to the server that is not also configured as a virtual host.

The reason for this is that by default Apache will send unmatched requests to the first site found in the configuration. This sounds like a good fallback until you realize that in practice the first site in configuration files is a rather arbitrary choice and also that the result is duplicate content!

Duplicate content is bad for SEO so you should really try to avoid it. As an example if you have example1.com setup as a site in your Apache configuration and also example2.com is setup in the DNS records – Apache will serve the exact same content (from site example1.com) to both example1.com and example2.com visitors!

Not only that but at least in Google Analytics it can distort your statistics as when this happens it will sometimes show as if example2.com is a referrer for visitors to example1.com when in fact is was simply because Apache served example1.com content to example2.com visitors.

Fortunately it is really easy to avoid when you know to look for it. What you do is simply to add this code in your httpd.conf file :

<VirtualHost _default_:*>
   DocumentRoot /var/www/html
</VirtualHost>

In this case the site in /var/www/html is shown when no virtual host matches in the hostname. This is where the default Apache site is stored so visitors will get a generic welcome to Apache page.

One important detail is that this section needs to be before the “Include conf.d/*.conf” line as otherwise it will not be the first site in configuration and you have not solved anything.

The ultimate CSS guide for email templates

15 Memorable jQuery Timeline Plugins

Shortening URLs in PHP with the bit.ly API

Simply replace yourusername with your bit.ly username and yourapikey with your API key which can be found at http://bit.ly/a/your_api_key

function shorten_url($url) {
    if (!$url) { return false; }
    $bitly_username = 'yourusername';
    $bitly_api_key = 'yourapikey';
    $url = urlencode(trim($url));
    $api_address = 'http://api.bitly.com/v3/shorten?login='.$bitly_username.'&apiKey='.$bitly_api_key.'&longUrl='.$url.'&format=txt';
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $api_address);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($ch);
    curl_close($ch);
    if (!$response) { return false; }
    elseif (substr($response,0,7) != 'http://') { return false; }
    else { return trim(strip_tags($response)); }
}

With the above function defined it’s really simple to generate your short links.

echo shorten_url('http://www.webdesigncrate.com/');
//returns http://bit.ly/fdk8GQ

How to set a YouTube video as your website background

Youtube video as website background

Browsing GitHub a while ago, we came across an excellent script which can really spice up any website. How would you like to add a YouTube video as your website background? Or maybe you just want an awesome header for you website? Sure, why not … Embed a YouTube video directly as background.

Why is this script so excellent? It’s just great, you can free your creative side, you can accomplish great things with it and of course it’s cross-browser compatible (from FireFox to Chrome,  Safari and Opera, and all Internet Explorer versions – yes, even IE6; not that we care that much about it, right?).  Now let’s into it.

About

The official name of this script is “jquery.mb.YTPlayer“ is a jQuery component that let you play a Youtube® movie in a chromeless player and use a movie as background of your HTML page.

Browser support:

  • Mozilla Firefox 2+
  • Google Chrome
  • Opera
  • Safari
  • IE 6+

Dependencies

  • jquery.metadata.js

The JS call

$(function(){
    $(".movie").mb_YTPlayer();
});

HTML constructor

<a id="bgndVideo" href="http://www.youtube.com/watch?v=uG2tV-X5NiQ"></a>

Meta data settings

*metadata are parameters setted in the class attribute of the TAG.

  • opacity: (int) 0 → 1;
  • isBgndMovie: {width:‘1990’,mute:false} // or false or true (in this case the movie will be width: ‘100%’ and mute:true by default);
  • ratio: ‘4/3’ // or “16/9” to set the aspect ratio of the movie;
  • quality: ‘default’ // or “small”, “medium”, “large”, “hd720”; (not implemented yet);
  • muteSound: true // or false (not implemented yet);
  • hasControls: true // or false (not implemented yet);
  • bufferImg: (string) Path to an image you whant to show while buffering;
  • ID: (string) the ID of the DOM element where you want the video background; if not specified it takes the “body”.

Using jquery.mb.YTPlayer

To initialize a YTPlayer as simple player:

  • set the meta data isBgndMovie of A tag to false;
  • set as HREF the url of the Youtube movie;
  • initialize the element or the elements: $(“.movie”).mb_YTPlayer();

To initialize a YTPlayer as background:

  • set the meta data isBgndMovie of A tag to true;
  • set as HREF the url of the Youtube movie;
  • set the opacity, the width, mute and the quality as meta data;
  • initialize the element or the elements: $(“.movie”).mb_YTPlayer();

To initialize a YTPlayer as element background (from v. 1.2.1):

  • set the meta data isBgndMovie of A tag to true;
  • set as HREF the url of the Youtube movie;
  • set the opacity, the width, mute, the quality and the ID of the element you want as target of the background movie as meta data;
  • initialize the element or the elements: $(“.movie”).mb_YTPlayer().

Download, Demo and Links

Finally, we have setup for 2 very simple demos of this spectacular jQuery component and a downloadable *.zip file to have the code prepared for you.

Also, here are some useful links:

We hope you will enjoy this component and once you implement it somewhere in your projects we would love to take a look at it. So let us know via de comment section your projects URL or your feedback, questions and so on. Also don’t forget to share with your friends if you like this and stay tuned for more awesomeness on WDC.

Download
Incoming search terms: