Wordpress Leaks

The Factory Method Pattern

The Simple Factory Pattern is actually derived from a pattern known as the Factory Method Pattern which is a slightly more complicated version of the pattern that we’re going to be reviewing.

According to Wikipedia, the Factory Method pattern is defined as follows:

The factory method pattern is an object-oriented creational design pattern to implement the concept of factories and deals with the problem of creating objects (products) without specifying the exact class of object that will be created

Sounds a bit complicated, doesn’t it?

The truth is, it’s actually a really powerful design pattern but it would take a much longer article to discuss it, and it’s a bit out of scope for the purpose of this series.

So, as mentioned, we’re going to take a look at a version of the pattern that’s paired down a little bit and should be more generally applicable to less complicated projects.

Before we do that, let’s come up with a definition of the Simple Factory Pattern:

The Simple Factory pattern returns a specific set of data or a specific class based on its input.

Ah the risk of making a pun, simple, right?

A Note About the Simple Factory Pattern

The truth is, many software engineers refer to the Simple Factory more as an idiom than a full-blown pattern; others consider this a pattern.

For what it’s worth, I see it as a very simple pattern. It has a specific use case that can be easily identified when to use it during the course of development which we’ll review later in this article.

Regardless, I bring this up so that if you see this used as an idiom (or a pattern) used throughout various articles on the Internet, or even in conversation, you’ll know that the developers in question are referring to the same programming strategy – just in a different way.

So Why Does This Matter in WordPress?

Just as design patterns in non-WordPress specific projects, such as larger applications, the design patterns provide a tried and true way to solve a common problem.

It helps to abstract our code a bit, keep our project easily maintainable, easily readable, and can actually help us to keep our code lean. This may result in us actually having more files in our project, but each file should have fewer lines of code.

This means that each file should have a specific purpose that should be clear, not only to us, but future developers as well.

/>

What It Looks Like

Now, before we dive into the diagrams, talking about classes, and the strategies required to implement the actual pattern, I want to mention that we’re going to be taking a simple approach to this.

The thing is, the readership of this blog spans a wide array of experiences – we have some people who are learning to write code; others who are seasoned veterans.

In order to appeal to the majority of the readership, we need to strike a balance. So for those of you who have been involved with software engineering for years, this may seem overly simplistic; however, don’t skim it – perhaps you’ll pick up something new.

For those of you who are beginners or even intermediate programmers, pay close attention to what we’re discussing as it can provide dividends in future (or even existing) work.

The Purpose of the Simple Factory

So imagine this scenario: You’re working on a function that takes in a set of input – usually some type of unique string or integer – and you have this long if/else statement or perhaps you have this large switch/case statement that continues to grow as your project grows.

The problem is that the conditionals become a pain to manage. In fact case conditionals, or the case blocks, may actually end up doing as much work as a certain function should do.

This is where the Simple Factory comes into play. What we can do is abstract the details happening in each of the conditionals into their own class thus making it much easier to maintain and keeping the code much leaner.

And that is the Simple Factory Pattern.

A Look at the Pattern

So here are the key features of the Simple Factory Pattern:

• Notice that the Plugin class has a private reference to the Factory class
• The Factory class encapsulates all of the logic to return an object of the type User
• The User class is a base class for three other classes: Admin, Volunteer, Reader, and the idea is that each of these types are subclasses of users with unique functionality of their own
• The Plugin will receive a certain type of input that it will pass to the Factory
• The Factory will examine the input and then, based on its value, will return one of the three user types

Nothing too complicated, right? Honestly, I think that the diagram is a bit more complicated than the principles at play. It really provides a lot of flexibility especially whenever you’re looking to introduce another User type like an Editor or something similar.

Note: This is not to be confused with WordPress’ built-in user types. This is simply an example to show what the pattern would look like.

A Working Example

Now that we’ve taken a look at the diagram for the pattern, let’s take a look at the source code in action. Below, we’ll look at the source code for each class and then I’ll provide a download to a fully documented demo after the discussion.

The Plugin

First, let’s look at the plugin class. Remember, this is nothing more than a prototype of what the pattern looks like. It’s not the same thing as a fully developed WordPress plugin.

factory = new Simple_Factory();
	

	public function get_user( $permission ) 
		return $this->factory->get_user( $permission );
	

}

?>

Notice that the plugin is relatively simple:

• It includes the simple-factory.php script in the header of the file
• It then defines a constructor in which it sets the $factory property to an instance of the Simple_Factory
• The only method available in the plugin is get_user which returns a user based on a type

We’ll see how this comes into play after we’ve examined all of the other classes.

The User

The User is an abstract base class that provides a basic constructor and an abstract function that must be implemented by all other subclasses.

role = $role;
	

	abstract public function get_role();

}

?>

Note that this class is intended to be subclassed by a variety of other classes, each of which we’ll look at in detail momentarily.

The Administrator, The Reader, and The Volunteer

The following four classes are all separate files each of which subclass the User base class. I’ve opted to include them all here together because there’s so little deviation from their actual implementation that it should be easy enough to follow.

The Administrator

role = "Administrator";
	

	public function get_role() 
		return $this->role;
	

}

?>

The Reader

role = "Reader";
	

	public function get_role() 
		return $this->role;
	

}

?>

The Volunteer

role = "Volunteer";
	

	public function get_role() 
		return $this->role;
	

}

?>

As usual, leave me questions in the comments; otherwise, review the code then be sure to read up on The Simple Factory which is the next section – it ties all of this together.

Also, remember that all of this code will be shared at the end of the article along with code comments that describe exactly what’s happening.

The Simple Factory

The Simple_Factory class is really the crux of the entire pattern. Here is where all the decisions are made and the appropriate objects are returned.

Note that the Simple_Factory includes the base user class and its subclasses and then works to return the appropriate type of user based on the incoming set of permissions.

/>

The Advantages of the Simple Factory Pattern

Though it should be a bit obvious by this point in the article, the Simple Factory Pattern provides a number of advantages especially if you’re used to working with large conditionals.

• It provides an elegant way to abstract your code so there’s less visual clutter
• It allows you to introduce specialized, focused classes with a single purpose (which is great if you follow the SOLID principles)
• It makes the code more maintainable as there’s a single place where classes are instantiated, and each class serves a single purpose

Overall, this is one of my favorite patterns simply for the matter of code organization and specialization that it can bring to the table.

/>

Conclusion

Finally, you can checkout the entire source code – complete with documentation and installation instructions – on GitHub using this link.

At this point, we’ve taken a look at three patterns:

1. The Observer Pattern
2. The Singleton Pattern
3. The Simple Factory Pattern

This series could go one for a while; however, I think that we’ve covered enough ground at least to get many of us started with implementing patterns into our work.

So in the last article in the series, we’ll recap what we’ve learned and I’ll also recommend some other patterns, their purpose, and some further points of research that should continue to aid you in continuing to learn about design patterns and their advantages not only in WordPress development, but general software development, as well.

Original from: http://feedproxy.google.com/~r/Wptuts/~3/5pBVx7cN4do/

“Share This” for Instant (And Free) Content Promotion

In the golden era of social media, it would be silly not to encourage people to share your content on social networks like Facebook, Twitter, Pinterest, or Google+.

Yes, we live in a social world and it’s not just something we do among our friends. I wrote this quick tip in Turkey, my editor published it in Australia and while a German reader gave it a five-star rating, an Iranian reader shared this quick tip on Twitter and a Korean friend of his retweeted his tweet. Just ten years ago, this wasn’t possible at all.

Think of this example and think about your own blog. It doesn’t have to be an international magnificance but you can reach a serious amount of people with the power of social media. With WordPress, it’s ridiculously easy to go viral – as long as you create quality content and allow your visitors to share that quality.

Plugins to Offer a “Share This” Section

As you can imagine, creating a “Share This” section manually is relatively easy. You could just get the “widget codes” of the social networks you like and replace the URLs with and inside the widget code, if necessary.

Then it’s all HTML:

But there’s an even easier way to create this section: with plugins. These plugins will most probably suffice for your blog and will fit your theme like a glove:

• Jetpack by WordPress.com – WordPress’ own “feature pack” comes with a variety of little plugins, including a sharing section which provides an elegant bar at the bottom of your posts, right after the post content. If you’re already using Jetpack (like me), this is probably the best solution for you.
• Digg Digg – Digg Digg might be considered as a “more comprehensive solution” for sharing, in comparison to Jetpack’s share buttons. It allows you to put the buttons before or after the content, or even as a floating bar along with the content. It also lets you choose big or small buttons to fit better with your design. If you like to take control with many, many options, this plugin is right for you.
• Share Buttons by AddThis – It looks like yet another plugin that gives you share buttons. However, along with a membership on AddThis.com, this plugin shows you in-depth analytics of how your content is shared. If you’re interested in your content’s sharing statistics, this is the plugin you should use.

There are, of course, many more share plugins out there and you may find some of them even better than the big guys above. My personal choice is Jetpack, but that’s because I use many other features of the plugin along with the share buttons.

I recommend experiencing as many choices as possible (including the one with just HTML) and decide which one is the best based on your findings.

Design Patterns Defined

For those of you who have never heard of or who have never used design patterns, it’s important to understand what they are before we actually begin using them in our work.

Wikipedia provides the following definition:

A design pattern in architecture and computer science is a formal way of documenting a solution to a design problem in a particular field of expertise. An organized collection of design patterns that relate to a particular field is called a pattern language.

Perhaps a more simplified definition would be:

A pattern is a design that can be applied to a problem in a specific situation.

If that’s still not clear, think of it this way:

• Whenever you’re building a piece of software, you’re likely to recognize that you’re solving a problem that you’ve already solved before. As such, you know how to solve it.
• Naturally, the solution to the problem will be a slightly more generalized form that’s applicable to how you’ve previously applied it.
• This generalized form of the solution can be considered the design pattern.

The general implementation and architecture will look exactly the same; however, the specifics of the implementation will naturally vary from project-to-project, but that’s simply the nature of the beast.

In the upcoming sections and upcoming articles, we’ll be taking a look at this in a bit more detail.

/>

Design Patterns in WordPress

If you’ve done any type of WordPress development involving the hook system – that is, you’ve written entire plugins, themes, or even a simple function and taken advantage of the add_action or add_filter functions – then you’ve used design patterns.

WordPress uses what’s called an event-driven design pattern. There are several variations of event-driven design patterns one of which we’ll review momentarily, but the gist of the patterns are all the same:

• Part of the pattern implements what’s known as a publisher
• Part of the pattern implements what’s known as a subscriber

Generally speaking, the publisher broadcasts a message that something has happened to all objects that are subscribed to that particular publisher.

Another way of looking at this is that, in software, whenever something happens we say that an event is raised. Perhaps the most common place we see this in web development is in JavaScript with things such as the mouse being clicked, a key on the keyboard being pressed, or something similar.

We then write functions that handle those functions, and these functions are appropriately referred to as event handlers because they are responsible for handling the case when an event happens.

Not terribly complicated, right? Honestly, sometimes I think the terminology can be more confusing than the actual implementation.

So anyway, in the context of WordPress – or any web application, for that matter – events aren’t limited to key presses or mouse clicks. Instead, it can happen during various parts of the page load lifecycle, when data is written to the database, when data is read to the database, and so on.

Ultimately, you can implement the pattern however you like so that you can provide hooks into which developers can register functions to fire as soon the event occurs.

This brings us full circle back to WordPress’ architecture: Hooks are placed throughout the code such that we’re able to register a function to fire whenever something occurs (that is, whenever an event happens).

/>

A Look at an Event-Driven Architecture: The Observer Pattern

There are a number of event-driven design patterns, one of which is known as the Observer Pattern. This particular pattern is also known as the Publisher-Subscriber Pattern or, more concisely, Pub-Sub.

In the simplest implementation of this pattern, there is a single publisher that is responsible for broadcasting messages to one or many subscribers. The subscribers are responsible for registering themselves with the publisher, and then the publisher is responsible for sending a message or taking action on all of the subscribers.

A high-level diagram would look something like this:

From a code perspective, the Publisher needs three things:

1. A way to maintain a list of the subscribers
2. A way for the subscribers to register themselves
3. A way to broadcast a message to all of the subscribers

Similarly, the Subscriber needs to be able to do two things:

1. Register itself with the Publisher
2. Optionally take action when the Publisher sends a message to it

There are a number of ways in which this can be implemented, but for all intents and purposes and to keep the example relatively simple, let’s say that the Subscribers will register themselves with the Publisher with the Observer’s register method and the function accepts a reference to the Subscriber and each Subscriber has an update method that the Publisher calls when broadcasting the message.

Publisher Code

class MyPublisher 

	/** The list of subscribers that are registered with this publisher */
	private $subscribers;

	/**
	 * Responsible for initializing the class and setting up the list of subscribers.
	 */
	public function __construct() 
		$this->subscribers = array();
	 // end constructor

	/**
	 * Adds the incoming subject to the list of registered subscribers
	 *
	 * @param  array  $subject  The subject to add to the list of subscribers
	 */
	public function register( $subject ) 
		array_push( $this->subscribers, $subject );
	 // end register_subscriber

	/**
	 * Notifies all of the subscribers that something has happened by calling their `update`
	 * method.
	 */
	public function notify_subscribers() 

		for ( $i = 0; $l < count( $this->subscribers ); $i++ ) 

			$current_subscriber = $this->subscribers[ $i ];
			$current_subscriber->update();

		 // end for

	} // end notify_subscribers

} // end class

The code above is about as simple as we can make it:

For those who are more experienced with object-oriented techniques, then you’ll likely see the need for creating a class interface for the Publisher, but that’s outside the scope of this particular tutorial.

Remember, the purpose is to simply provide an example of what a simple observer may look like.

Subscribe Code

Creating a Publisher is really only half of the implementation. Remember, we have to have something that actually, you know, subscribes to the Publisher to take action whenever something happens.

This is where the aptly named Subscriber comes into play.

class MySubscriber 

	/** The publisher to which this class registers */
	private $publisher;

	/**
	 * Responsible for initializing the class and setting up a reference to the publisher
	 */
	public function __construct() 

		$this->publisher = new MyPublisher();
		$this->publisher->register( $this );

	 // end constructor

	/**
	 * This is the method that the Publisher calls when it it broadcasts its message.
	 */
	public function update() 

		/** Implementation is based purely on however you'd like. */

	 // end update

} // end class

In short, this is it. Notice above that this implementation of the update function isn’t actually defined. That’s because it gives us the ability to provide unique behavior to this specific instance.

But remember, there’s a lot of code in WordPress core that is not object-oriented. Instead, it’s procedural. As such, the implementation of a pattern like this varies a little bit.

For example, an analogy in WordPress would be something like this:

function my_custom_subscriber( $content ) 

	$content = 'This is my custom content.' . $content;
	return $content;

 // end my_custom_subscriber
add_action( 'the_content', 'my_custom_subscriber' );

Notice that the syntax is a bit different, but we’re essentially doing a very similar thing:

• We have a subscribe function – my_custom_subscriber – and it’s registered with the the_content event
• When the the_content function fires, our custom function will fire.

Nothing too complicated, I hope.

One of the goals in this series is not only to provide a few examples of design patterns and how to implement them, but they are already in place in existing systems.

/>

The Patterns We’ll Examine

In addition to the event-driven pattern that we’ve examined above, we’re also going to take a look at two patterns that are common, practical, and highly useful in our day-to-day work.

Specifically, we’re going to take a look at the following patterns:

1. Singleton Pattern. In object-oriented design, the Single Pattern ensures that only a single instance of a class is created. This is useful so that we don’t accidentally create multiple instances maintaining their own sets of data ultimately giving conflicting results during a project’s lifecycle.
2. Simple Factory Pattern. If you have a collection of classes each of which are designed to handle a specific type of data (as opposed to have one large class do it), then the Simple Factory Pattern is useful for taking a look at the incoming data and then returning an instance of the proper class for processing the data.

Obviously, talking about software only goes so far without talking about diagrams and/or code so we’ll be taking a look at both of those in the upcoming set of articles.

/>

Conclusion

As you can see, the concept of design patterns isn’t anything terribly complicated and there’s a lot to be gained by using them in our work. Perhaps the greatest challenge that developers face is using design patterns for the sake of using design patterns.

Instead, it’s important to recognize that there are certain situations in which design patterns are applicable. That is to say that there are certain problems for which design patterns are the perfect solution. Experience is arguably the best teacher for knowing when to use a design pattern and when not to use it.

In the following articles, hopefully we’ll be able to cover enough territory to provide two solid examples of design patterns, when they’re applicable, how to use them, and how they can help us in our future work.

Original from: http://feedproxy.google.com/~r/Wptuts/~3/9OSVpqV7FhY/

With Tuts+ Premium you learn from expert instructors in every field, such as:

• Designer Justin Maller (Nike, Verizon, DC Shoe Co.)
• Illustrator Russell Tate (McDonald’s, Coca-Cola)
• Developer Burak Guzel (Software Engineer at Facebook)

Join now and get instant access to your very own library of courses, tutorials, and eBooks, available whenever you need them. Become part of a community of over 15,000 members and start getting better at the skills you care about. Our dedicated team adds new content weekly, so there’s always something fresh to sink your teeth into.

Join Tuts+ Premium

Original from: http://feedproxy.google.com/~r/Wptuts/~3/d9Lu7eBvZqk/

With Tuts+ Premium you learn from expert instructors in every field, such as:

• Designer Justin Maller (Nike, Verizon, DC Shoe Co.)
• Illustrator Russell Tate (McDonald’s, Coca-Cola)
• Developer Burak Guzel (Software Engineer at Facebook)

Join now and get instant access to your very own library of courses, tutorials, and eBooks, available whenever you need them. Become part of a community of over 15,000 members and start getting better at the skills you care about. Our dedicated team adds new content weekly, so there’s always something fresh to sink your teeth into.

Join Tuts+ Premium

Original from: http://feedproxy.google.com/~r/Wptuts/~3/d9Lu7eBvZqk/

Show You Have More to Say

If you keep your posts organized well with categories, you might find it useful to have a list of posts from the post’s category.

“Related Posts” is not always the answer: If you have a website where the posts are separated with categories, a “Related Posts” section might “break” this separation.

For example, if you have a blog about different occupational groups, you can’t show news about the textile sector as “Related News” under a post about informatics. A number of latest posts from the same category would be more relevant, right?

Creating a “More From This Category” List

As you may have guessed, listing latest posts from a post’s category will be much easier than displaying related posts based on a post’s tags. We just need to get the category of the post and list a number of posts from that category, excluding the post that the visitors have just read. The arguments that we can pass in the get_posts() function has everything we need.

ID );
    $first_cat = $categories[0]->cat_ID;
    // Let's start the $output by displaying the title and opening the 

    $output = '
' . $title . '
';
    // The arguments of the post list!
    $args = array(
        // It should be in the first category of our post:
        'category__in' => array( $first_cat ),
        // Our post should NOT be in the list:
        'post__not_in' => array( $post->ID ),
        // ...And it should fetch 5 posts - you can change this number if you like:
        'posts_per_page' => 5
    );
    // The get_posts() function
    $posts = get_posts( $args );
    if( $posts ) 
		$output .= '
';
		// Let's start the loop!
		foreach( $posts as $post ) 
			setup_postdata( $post );
			$post_title = get_the_title();
			$permalink = get_permalink();
			$output .= '
' . $post_title . '
';
		
		$output .= '
';
	} else 
		// If there are no posts, we should return something, too!
		$output .= '
Sorry, this category has just one post and you just read it!
';
	
    // Let's close the 
 and return the $output:
    $output .= '
';
    return $output;
}
?>

Done! You can include this function inside your functions.php file (or save it as a separate plugin) and echo it (as ) anywhere you want inside your single.php file.

Before We Start

As mentioned earlier, we will create a new TinyMCE plugin whose task is to add the new buttons we want. So which buttons are we going to add? We will try to add two simple buttons: Dropcap and Recent Posts, in which the former gives you the ability to convert a selected letter to a drop cap letter, and the latter will display recent posts. The code generates these buttons shown below.

Let’s create a new folder named wptuts-editor-buttons (of course, you can change it to something else if you want) in your theme directory (I’m using TwentyTwelve). Continue to create two new files, wptuts.php that invokes customized PHP, and the other named wptuts-plugin.js where the JavaScript code snippets will be located. Finally, open your theme’s functions.php file and include the newly created wptuts.php file in it. Note, remember to define its path exactly:

require( 'wptuts-editor-buttons/wptuts.php' );

Then we need to prepare some code for those two buttons:

• Dropcap – The ideal way of making a letter into drop caps is to simply wrap the user’s selected letter within a pre-defined HTML span class which styles that letter to look like drop caps. The CSS code of the class shown below, just appends it to your theme’s style.css file:

  		/* Add this code in style.css */
  		.dropcap 
  			float: left;
  			font-size: 80px;
  			padding-right: 7px;
  			line-height: 72px;
  		
  		

• Recent Posts – We will make a shortcode that will add a list of recent posts into the page, open the wptuts.php file and add the following code:

  		add_shortcode( 'recent-posts', 'wptuts_recent_posts' );
  		function wptuts_recent_posts( $atts ) 
  			extract( shortcode_atts( array(
  				'numbers' => '5',
  			), $atts ) );
  			$rposts = new WP_Query( array( 'posts_per_page' => $numbers, 'orderby' => 'date' ) );
  			if ( $rposts->have_posts() ) 
  				$html = '
  Recent Posts
  ';
  				while( $rposts->have_posts() ) 
  					$rposts->the_post();
  					$html .= sprintf(
  						'
  %s
  ',
  						get_permalink($rposts->post->ID),
  						get_the_title(),
  						get_the_title()
  					);
  				
  				$html .= '
  ';
  			}
  			wp_reset_query();
  			return $html;
  		}
  		

  We assume that when users click the Recent Posts button, the browser will popup a dialog asking them for the number of posts they want to show. After having that number, the editor will fill it as an argument into the above shortcode. For example, if we want to show seven recent posts, the shortcode is generated as follows:

  		[recent-posts numbers="7"/]
  		

/>

Registering a New TinyMCE Plugin

Assuming we already had the new plugin, then we need to register it with WordPress to integrate it into the TinyMCE editor. The code is shown below:

add_action( 'init', 'wptuts_buttons' );
function wptuts_buttons() 
	add_filter( "mce_external_plugins", "wptuts_add_buttons" );
	add_filter( 'mce_buttons', 'wptuts_register_buttons' );

function wptuts_add_buttons( $plugin_array ) 
	$plugin_array['wptuts'] = get_template_directory_uri() . '/wptuts-editor-buttons/wptuts-plugin.js';
	return $plugin_array;

function wptuts_register_buttons( $buttons ) 
	array_push( $buttons, 'dropcap', 'showrecent' ); // dropcap', 'recentposts
	return $buttons;

The important filter hook mce_external_plugins is used to hook the new plugin to TinyMCE. We need to pass a plugin ID (wptuts) and the absolute URL pointing to our wptuts-plugin.js file. The mce_buttons hook is used to tell the TinyMCE editor which buttons in our plugin we want to show. The dropcap and showrecent are the ID values of these buttons that we plan to create. Keep in mind these values, they will be used later.

/>

Setting Up TinyMCE Plugin

In general, I think the best way to extend or develop something on a platform is to consult the documentation for that platform. TinyMCE has its own wiki that you might find useful. By following an example of how to create a TinyMCE plugin, we have the following initialisation code:

(function() 
	tinymce.create('tinymce.plugins.Wptuts', 
		/**
		 * Initializes the plugin, this will be executed after the plugin has been created.
		 * This call is done before the editor instance has finished it's initialization so use the onInit event
		 * of the editor instance to intercept that event.
		 *
		 * @param tinymce.Editor ed Editor instance that the plugin is initialized in.
		 * @param string url Absolute URL to where the plugin is located.
		 */
		init : function(ed, url) 

		,

		/**
		 * Creates control instances based in the incomming name. This method is normally not
		 * needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
		 * but you sometimes need to create more complex controls like listboxes, split buttons etc then this
		 * method can be used to create those.
		 *
		 * @param String n Name of the control to create.
		 * @param tinymce.ControlManager cm Control manager to use inorder to create new control.
		 * @return tinymce.ui.Control New control instance or null if no control was created.
		 */
		createControl : function(n, cm) 
			return null;
		,

		/**
		 * Returns information about the plugin as a name/value array.
		 * The current keys are longname, author, authorurl, infourl and version.
		 *
		 * @return Object Name/value array containing information about the plugin.
		 */
		getInfo : function() 
			return 
				longname : 'Wptuts Buttons',
				author : 'Lee',
				authorurl : 'http://wp.tutsplus.com/author/leepham',
				infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/example',
				version : "0.1"
			;
		}
	});

	// Register plugin
	tinymce.PluginManager.add( 'wptuts', tinymce.plugins.Wptuts );
})();

Remember to add this code into the wptuts-plugin.js file. We’ve left the code comments for you to easily understand what’s going on. The above code just does two main tasks:

1. First, defining a new TinyMCE plugin in a safe way by calling TinyMCE’s create method. Our plugin’s behavior will be defined in the init and createControl functions. You can see that the plugin’s information is declared in the getInfo function too. Our plugin will have the name Wptuts and the ID wptuts as you can see.
2. Last, simply add our new plugin into the TinyMCE Plugin Manager.

/>

Creating Buttons

In the init function, we start to create our buttons. The code seen as follows:

(function() 
	tinymce.create('tinymce.plugins.Wptuts', 
		init : function(ed, url) 
			ed.addButton('dropcap', 
				title : 'DropCap',
				cmd : 'dropcap',
				image : url + '/dropcap.jpg'
			);

			ed.addButton('showrecent', 
				title : 'Add recent posts shortcode',
				cmd : 'showrecent',
				image : url + '/recent.jpg'
			);
		},
		// ... Hidden code
	});
	// Register plugin
	tinymce.PluginManager.add( 'wptuts', tinymce.plugins.Wptuts );
})();

By using the addButton method of the ed object, we tell the current editor that we want to create all these buttons. This method accepts two arguments:

• The first one is the button’s ID. In the previous section, we mentioned it. It must be the same as the one we defined before. Otherwise, it will not work properly.
• The second one is the object containing the button’s information, such as:
  • The button’s title
  • The most important: the task that the button will do. Take a look at the cmd property, it has the value of showrecent. That is the command’s ID which is executed every time it is called, we will go into detail shortly
  • The image of the button. Note that the URL parameter holds the absolute directory’s URL in which our plugin is located, this makes it easier to reference the image that you want. So you need to place your image into the plugin’s folder and ensure its name to is set precisely to the image‘s value.

Now, check the WordPress editor and we will see our buttons showing up. However, they do nothing right now.

/>

/>

Adding Buttons’ Commands

We’ve defined the name of the commands our buttons will execute, but have not yet defined what they will actually run. In this step, we will set up the things our buttons will do. Inside the init function, continue to add this code as shown:

(function() 
	tinymce.create('tinymce.plugins.Wptuts', 
		init : function(ed, url) 
			ed.addButton('dropcap', 
				title : 'DropCap',
				cmd : 'dropcap',
				image : url + '/dropcap.jpg'
			);

			ed.addButton('showrecent', 
				title : 'Add recent posts shortcode',
				cmd : 'showrecent',
				image : url + '/recent.jpg'
			);

			ed.addCommand('dropcap', function() 
				var selected_text = ed.selection.getContent();
				var return_text = '';
				return_text = '' + selected_text + '';
				ed.execCommand('mceInsertContent', 0, return_text);
			);

			ed.addCommand('showrecent', function() 
				var number = prompt("How many posts you want to show ? "),
					shortcode;
				if (number !== null) 
					number = parseInt(number);
					if (number > 0 && number <= 20) 
						shortcode = '[recent-post number="' + number + '"/]';
						ed.execCommand('mceInsertContent', 0, shortcode);
					
					else 
						alert("The number value is invalid. It should be from 0 to 20.");
					
				}
			});
		},
		// ... Hidden code
	});
	// Register plugin
	tinymce.PluginManager.add( 'wptuts', tinymce.plugins.Wptuts );
})();

Now, the ed.addCommand method will help us to add a new command. You need to pass the command’s ID and the callback function that will be executed if it was called by the ed.execCommand method. Note that ed represents the tinyMCE.activeEditor object. Let’s take a look at the callback functions:

• In the dropcap command, the desire we want is when a user selects a letter and clicks the DropCap button, the letter will then be transformed to drop cap form. So how do we get that letter? Well, the ed.selection.getContent method will do that for us. Next, once we’ve gotten that letter we just wrap it within a span element. Remember to set this element’s class value to dropcap that we’ve defined before, right? Finally, we have the complete text that needs to be inserted back into the editor. TinyMCE has a default command with the name mceInsertContent which is used to insert specific content into the editor, how to use it is shown above. The content will be passed as the third argument of the mceInsertContent method.
• A similar thing happens in the showrecent command as in the dropcap command, excepting we don’t need to get the user’s selected content. We just simply display a dialog asking the user how many posts they want to show up, then insert that number value in an appropriate shortcode syntax.

Registering Custom CSS for Buttons (Optionally)

Instead of adding pure text when the buttons insert contents into the visual editor, we can make it much more visual by registering custom CSS for our buttons. It depends on which type of content data, and you can choose an appropriate style. For example, our Dropcap‘s style can have the same as the one showing on the front-end. So you can take its CSS code in the very top of this post, then place it into the editor-style.css file (for default, see add_editor_style for detais).

For shortcodes, they might not have an HTML element themselves. How should we style them? Well, this situation is much more complex to achieve the result, it’s not impossible though (you can see some default WordPress button such as ‘Add media’). However, it can still be a tricky, by wrapping that shortcode in a HTML element and then styling that element just like above. It’s quite simple, not completely perfect though. In this post, we won’t focus on that complex processing.

/>

Results

Finally, the results we get are shown as following:

/>

Then, on the front-end:

/>

And the Recent Posts button works well too:

/>

/>

Conclusion

Okay, we covered a practice which is quite simple and easy to follow. You might notice that the Recent Posts button allows you to adjust a setting (the number of posts that will show). You certainly know that we used the default JavaScript, prompt, to achieve that. What if you want a more complex popup, which has many settings rather than only one? Well, in another post we will discuss this and try another approach.

Any feedback about this post will be appreciated. Thanks for reading, and see you later.

/>

Reference

• TinyMCE_Custom_Buttons
• Creating A TinyMCE Plugin

Original from: http://feedproxy.google.com/~r/Wptuts/~3/smdREbjvZMo/

“Disclaimer” to Warn or Inform Nicely

There are still some people left who think that “borrowing” a post without attribution is OK. Believe it or not, displaying a disclaimer is actually effective for them … if their intentions are good.

If you’re going to put a disclaimer under the post, it’s better to leave a friendly note instead of a dark warning. People tend to react to warm messages instead of cold “notices.”

Something like this would suffice:

	Thanks for reading the article! If you enjoyed it and want to post it somewhere else, it would be pretty cool if you also shared the link of this page as a reference. Thanks in advance for your kindness!

You could add this right after the content, or after other elements like the author info box or the “Share This” section – as long as it’s noticable, it’s fine.

Tip: You can also use it outside The Loop because we didn’t use the the_permalink() function and used echo get_permalink( $post->ID ) instead.

As I said, if the person who wants to “borrow” your post is right minded, they wouldn’t mind placing a link under (or above) the content to attribute to you, when they see this kind note. Plus, it kind of looks more professional (if you consider it important to look that way).

For the ill minded, unfortunately, we can’t do much. That said, we can trick them to include a reference to our website automatically. Check out WPBeginner’s post: “How To Add a Read More Link to Copied Text in WordPress”