All posts in “Tutorials”

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.

Tutorial: Create a WordPress Theme from Scratch

WordPress plugin template: Shortcodes Toolbox

Wordpress plugin template shortcodes toolbox

WordPress is one of the web’s most beloved and used CMS platform. And we cannot agree more with this,… why? It’s easy to use, great free themes, huge support community and the best of them, it’s open source. For those who are not so familiar with WP, or maybe they need just another reason to switch to WP, WDC brings you an exclusive tutorial/freebie.

In this article we will try to explain the process of creating a WordPress plugin and also give you an exclusive plugin template freebie on which you can work, extend the plugin according your needs or use it for learning purposes. In the tutorial part we will cover a simple yet very useful topic called “shortcodes”. We all love those quick tags right? They make our publisher life easier so why not to built a custom plugin, personalized for our needs.

For an easier comprehension of the process we will name this base plugin “Shortcodes Toolbox”. Enjoy and share this article!

1. Plugin presentation and file structure

Introduced in WordPress 2.5 is the Shortcode API, a simple set of functions for creating macro codes for use in post content. ”Shortcodes Toolbox” allows you to add shortcodes into WordPress pages and/or post using short tags. Add buttons, links, related posts etc. without any HTML or CSS knowledge.

Let’s dive into it: Firstly we need to create the file structure. Create  a directory called shortcodes-toolbox. In this directory create a file called shortcodes-toolbox.php.

2. Basic plugin information and format

In order to proceed creating a WordPress plugin we need to keep in mind some basic rules. The most important step is adding the plugin information. Edit the previously created shortcodes-toolbox.php file and add the following lines:

<?php /*
Plugin Name: Name Of The Plugin
Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
Description: A brief description of the Plugin.
Version: The Plugin's Version Number, e.g.: 1.0
Author: Name Of The Plugin Author
Author URI: http://URI_Of_The_Plugin_Author
License: A license name e.g. GPL2
*/
?>
If you wish to publish the plugin on the official WordPress.org repository too you will need to follow some guidelines. For more information follow this link. For personal use, these are all the steps you need to make to have a functional plugin.

 

3. Functions and WP path definitions

It’s time to get into some PHP coding. First we need to define the WP paths and any CSS or JS files we intend to use. To have an example let’s create a file called style.css and place it into a directory called css (located in the main directory we created in the first step). So we end up with a file structure like shortcodes-toolbox/css/style.css
Let’s continue with the shortcodes-toolbox.php file editing and more precisely let’s add the WP paths. Add the following lines:
if(!defined('WP_CONTENT_URL'))
define('WP_CONTENT_URL', get_option('siteurl') . '/wp-content');
if(!defined('WP_CONTENT_DIR'))
define('WP_CONTENT_DIR', ABSPATH . 'wp-content');
if(!defined('WP_PLUGIN_URL'))
define('WP_PLUGIN_URL', WP_CONTENT_URL. '/plugins');
if(!defined('WP_PLUGIN_DIR'))
define('WP_PLUGIN_DIR', WP_CONTENT_DIR . '/plugins');

class STbox {
function cssStyles() {
$stPath = WP_PLUGIN_URL.'/'.plugin_basename(dirname(__FILE__)).'/styles/'.'/';
echo ' 			'."\n";
}
}

4. Plugin functionality

We can call this the heart of the plugin: the functionality part. To keep it dead simple let’s add some basic functionality like links, custom download buttons (styled via CSS) and a related posts feature. Keep in mind that these are just some basic examples and you have the freedom to add anything you like, or modify it according you needs.

Now let’s add some more PHP sparkle into the shortcodes-toolbox.php file:

/* Simple URL function */
function URL($atts, $content = null) {
	extract(shortcode_atts(array(
		"url" => 'http://'
	), $atts));
	return '<a href="'.$url.'">'.$content.'</a>';
}

/* Download button function, with multiple style posibilities (via CSS) */
function DownloadButton($atts, $content = null) {
	extract(shortcode_atts(array(
		"url" => 'http://',
        "color" => ''
	), $atts));
	return '<a href="'.$url.'">'.$content.'</a>';
}

/* Related posts function */
function RelatedPosts( $atts ) {
	extract(shortcode_atts(array(
	    'limit' => '5',
	), $atts));

	global $wpdb, $post, $table_prefix;

	if ($post->ID) {
		$retval = '<ul>';
 		// Get tags
		$tags = wp_get_post_tags($post->ID);
		$tagsarray = array();
		foreach ($tags as $tag) {
			$tagsarray[] = $tag->term_id;
		}
		$tagslist = implode(',', $tagsarray);

		// Do the query
		$q = "SELECT p.*, count(tr.object_id) as count
			FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ='post_tag' AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id  = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID
				AND p.post_status = 'publish'
				AND p.post_date_gmt < NOW()
 			GROUP BY tr.object_id
			ORDER BY count DESC, p.post_date_gmt DESC
			LIMIT $limit;";

		$related = $wpdb->get_results($q);
 		if ( $related ) {
			foreach($related as $r) {
				$retval .= '<li><a title="'.wptexturize($r->post_title).'" href="'.get_permalink($r->ID).'">'.wptexturize($r->post_title).'</a></li>';
			}
		} else {
			$retval .= '
	<li>No related posts found.</li>';
		}
		$retval .= '</ul>';
		return $retval;
	}
	return;
}

We are now with the core file of this plugin. Save everything and open-up the style.css file.

6. CSS styling

In order to have some pretty download buttons we need to add some CSS styling. Open the style.css file and add the following lines:

.green a:link, .green a:visited{
color:#ffffff;
text-decoration:none !important;
}

.black a:link, .black a:visited{
color:#ffffff;
text-decoration:none !important;
}

.green a:hover, .black:hover{
color:#ffffff;
text-decoration:none !important;
}

.green {
display: inline-block;
font-weight:bold;
font-size:1.2em;
background : -webkit-gradient(linear, left top, left bottom, from(#88c841), to(#73b338));
background : -moz-linear-gradient(center top, #88c841, #73b338);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px 20px;
text-align: center;
-shadow: 0px 1px 0px #6c0909;
color:#ffffff !important;
text-decoration:none !important;
}

.green:hover {
background : -webkit-gradient(linear, left top, left bottom, from(#73b338), to(#88c841));
background : -moz-linear-gradient(center top, #73b338, #88c841);
color:#ffffff !important;
text-decoration:none !important;
}

.black {
display: inline-block;
font-weight:bold;
font-size:1.2em;
background : -webkit-gradient(linear, left top, left bottom, from(#000000), to(#414141));
background : -moz-linear-gradient(center top, #414141, #000000);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px 20px;
text-align: center;
-shadow: 0px 1px 0px #6c0909;
color:#ffffff !important;
text-decoration:none !important;
}

.black:hover {
background : -webkit-gradient(linear, left top, left bottom, from(#414141), to(#000000));
background : -moz-linear-gradient(center top, #000000, #414141);
color:#ffffff !important;
text-decoration:none !important;
}

7. Installation and testing

We are good to go. Let’s try the newly created plugin. Create a zip archive of the main directory shortcodes-toolbox and upload it via your WPs administration panel (Plugins->Add new). After the installation is successful create a new post or page and add the following lines to test out the plugin:

[DownloadButton url="http://www.google.com" color="green"]Download Google Chrome[/DownloadButton]
[DownloadButton url="http://www.google.com" color="black"]Download Google Chrome[/DownloadButton]
[link href="http://www.yahoo.com"]Yahoo[/link]

Save the post and voila. We have two shiny download buttons and a simple link. Everything added via shortcodes.

We hope you enjoyed this quick tutorial and don’t forget to download the source files too. For any questions don’t hesitate to use the comment section and be sure to share this article with your perks. Have fun and stay tuned for more great articles!

Download
Incoming search terms: