Custom post type standards

There has been some talk recently of setting some standards for custom post types in the WordPress community. Actually, this has been an ongoing discussion for a few years. I think I’ve made it clear that I’m a fan of this idea. So, I wanted to present my take on this discussion.

I also want to expand on this a bit because this is something I’ve been preaching for years. However, I don’t think I’ve ever explained what I mean completely.

What can we standardize?

When most people talk about standardizing custom post types, what they’re usually referring to is standardizing on a post type name. That’s a good start because WordPress stores this in the post_type field for a post. Therefore, a post is directly tied to its type.

It makes sense to have some standards on some common post types. Here’s a few:

  • testimonial
  • portfolio_item
  • recipe
  • faq
  • event
  • product

That’s a really, really good idea, right? Let’s standardize on some post type names so that there’s at least some portability between different plugins. It’s fairly easy to create a working group of standard names. An official page on the WordPress Codex wouldn’t hurt.

However, I’d argue that a little common sense also goes a long way. If you’re making an “events” plugin, don’t name your post type justin_event. Name it event. This isn’t really brain surgery, and I don’t think the WordPress developer community needs that much hand-holding to figure this out. But, if we do, let’s start that Codex page.

The only reason for any type of standards for post type names is so that it helps foster healthy competition between various plugins trying to fill the same space. This is so users can more easily switch between plugins to find the one they like the best.

We’ve been talking about the wrong problem.

While naming standards have been a problem, that’s not that big of a hurdle to overcome. That’s not the problem anyway. Brian Krogsgard explains the big problem perfectly in his article on post type standards:

For years we’ve been talking about the importance of not “locking in” users to CPTs bundled with themes. At some point, that gained decent adoption, but people still tended to just package the same code that was in their theme and put it in a separate plugin — a fine practice for sure. But it’s not a practice that makes it much easier to go from one portfolio theme to another …

People are still using their own, separate code rather than adopting existing solutions, preferring a solution built in-house instead of joining together with others. That’s the reason we don’t have standards. It really has little to do with post type naming conventions.

Standards are created after we’ve made them and they’ve been adopted by enough people. In other words, we create standards by building good plugins, getting users to install them, and having theme authors integrate with them.

A look at a standard that exists.

I want to provide a real-world example of an existing standard so that I can fully explain my meaning.

If you’re doing anything with e-commerce and WordPress right now, you’re either using WooCommerce or you at least took a long and hard look at it before deciding on a different solution. WooCommerce is the standard for e-commerce in the WordPress community. I don’t think anyone can argue that point.

Why is it the standard? Well, it’s got a whole heck of a lot of users and a wide adoption rate by theme authors who are building themes for it. That pretty much makes it the standard.

Does anyone know what the post type name is (I didn’t before writing this post)? Not that it really matters since they’ve established the standard in this space, but the main post type used is product. That fits right in with my common sense approach mentioned earlier for naming standards. If you’re a plugin developer who wants to compete in this space, you sure as hell better name your “product” post type product and follow all the other standards that WooCommerce has already established (post types, metadata, taxonomies, etc.).

Here’s the thing about post types though. They’re not really about registration (i.e., naming them). Post types are about implementation. What I mean by this is that we create standards by building the best plugin for the specific scenario. We can talk in circles about proper names all we want, but it’s not really getting down to the point.

Now, let’s get to the real point.

It’s not really about post types is it? Take a moment and think about it. Think about WooCommerce for a moment. Do you really care what post types it creates?

No. I didn’t think so.

What matters is building solutions. They’ve got a solution that works as evidenced by both the user and developer community around the plugin.

Ask a single non-developer WooCommerce user if they care at all about this discussion.

Shameless self-promotion

Hey, it’s my blog, so I’m going to point out my own plugins. Here’s a few solutions I’m working on. I’d love to get both plugin and theme developers on board these projects to help make them more of a standard in the WordPress community.

  • Whistles (GitHub) – Tabs, toggles, and other fancy bells-and-whistles. (need UI/UX developers).
  • Custom Content Portfolio (GitHub) – Portfolios (could use input from theme authors).
  • Restaurant (GitHub) – Restaurant management (lots of room for add-on plugins; definitely commercial plugin potential).

I’ve also got a few other projects in the pipeline. The only way these upcoming projects and those listed above will gain any traction is by use. What good is a Restaurant plugin if no one is building themes that will beautifully display the food menu items?

You want standards? Help me out. Help each other out. Let’s join together and build cool stuff.

The post Custom post type standards appeared first on Justin Tadlock.

How to Move a Site from WordPress Multisite to Single Install

Are you trying to split your WordPress multisite network into individual WordPress websites? Moving a single to its own domain is a challege that a lot of multisite admins come across. While running a multisite network has its own advantages, sometimes a single site may outgrow the network and need its own space. In this article, we will show you how to move a website from WordPress multisite network to its own single install of WordPress.

Important: Since you are going to do some serious changes to your site, it is necessary to create a full WordPress backup before you do anything else.

Step 1: Exporting a Single Site in WordPress Multisite Network

The built-in WordPress import/export functionality works the same way in multisite as it does on a single site install. We will be using the default tools to export the data from a site on WordPress multisite network.

First you need to login to the dashboard of the single site you want to move, and then click on Tools » Export. Next, you want to make sure that all content is checked and click on the Download Export File button.

Exporting a single site from WordPress multisite network

WordPress will now create an XML file containing all your data and send it to your browser for download. Save the file in your computer because you will need it in later steps.

Step 2: Installing WordPress

Now that you have exported the files, you will need to set up a separate install of WordPress. Here is our tutorial on how to install WordPress. Once you have installed and setup WordPress, you can move on to importing your child site.

Step 3: Importing Child Site to New Domain

Login to the WordPress admin area on the new location where you want to move your child site and then go to Tools » Import. On the import screen, WordPress will show you a number of import options.

Click on WordPress to install WordPress importer

You need to click on WordPress which will bring up a popup to install WordPress Importer plugin. Simply click on the Install Now button to start the installation. After that, you need to click on Activate Plugin & Run Importer.

On the next screen, you will be asked to upload the WordPress export file you downloaded earlier from WordPress multisite in Step 1 of this tutorial.

Uploadd WordPress export file you downloaded earlier

WordPress will now ask if you would like to import users as well. If you do nothing, then WordPress will import all users which is recommended if you do not want to change authors.

You will also see Import Attachments option, and you want to make sure it is checked so that WordPress can download images from your posts and pages (Don’t worry if it misses out some or most of your images. You can import them separately afterwards).

WordPress will now start importing your content. This will take a few minutes depending on how much content you have. Once it is done, you will see an ‘All done, Have fun’ notification.

That’s all. You have successfully imported data from a multisite network child site to an individual WordPress install. There are still a few things left to do.

Step 4: Setting up Redirection

If you were using custom domains for each site in your WordPress multisite network, then you don’t have to setup any redirection.

However if you were using subdomains or directory structure in your WordPress multisite, then you need to setup redirection, so that users coming to your old URLs are redirected to your new site.

Make sure that your old site on the multisite network and the site on new domain both are using the same permalink structure.

Redirecting From Subdomain to New Domain

For subdomain installs, you need to use this code in the .htaccess file of your WordPress multisite.

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^subdomain\.example\.com$ [NC]
RewriteRule ^(.*)$ http://www.example.net/$1 [L,R=301]

This code redirects visitors coming to any page on subdomain.example.com to http://www.example.net. The $1 sign at the end of the destination URL ensures that your users land on the same page they requested.

Redirecting From Directory to New Domain

For directory based multisite installs, you will need to paste the following code in the .htaccess file of your WordPress multisite.

Options +FollowSymLinks
RewriteEngine On
RewriteRule ^childsite/(.*)$ http://example.net/$1 [R=301,L]

This code simply redirects any users coming on http://www.example.com/childsite/ to http://example.net. The $1 makes sure that your users land on exactly the same page or post they requested.

Don’t forget to replace childsite and example.net with the name of your sub-site and its new location.

You can also use the Safe Redirect Manager plugin to setup redirection if you don’t like the code method.

Step 5: Troubleshooting the Migration

Moving a site is not a routine task, so it is likely that you will come across some issues. But don’t worry, there is solution for every issue that you may come across.

If your WordPress export file is too large, then you can split large XML file into smaller pieces.

If your images didn’t import correctly, then you can try importing them as external images.

See other common WordPress errors and how to fix them.

That’s all, we hope this article helped you move a single site from your WordPress multisite network to it’s own individual WordPress install.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

To leave a comment please visit How to Move a Site from WordPress Multisite to Single Install on WPBeginner.

What WPLift Learned From Not Moderating Comments

Oli Dale of WPLift, decided to leave comments open while having Akismet be the only anti-spam measure used. The result is 8,000 comments, most of which are spammy in nature. He sifted through 8,000 comments and published the results where he outlines the various techniques spammers are using to try to get past the filters.

One of the things Dale noticed was the amount of pingback/trackback spam the site received. He decided to disable the feature on past and future posts. He’s not the first to disable pingbacks and trackbacks. Several sites are turning the feature off since their usefulness has steadily declined and in some cases, can be used to generate a Distributed Denial of Service attack. Earlier this year however, updates to Akismet were added to help prevent this type of attack from occurring.

Average Amount Of Spam Caught By Akismet Every Hour
Average Amount Of Spam Caught By Akismet Every Hour

The results of his assessment are not surprising, especially to those who administer their spam queue on a daily basis. At the Tavern, we use Akismet while occasionally using the Cookies For Comments plugin. Although Cookies for Comments has done a fantastic job of thwarting spam comments before they reach Akismet, some visitors have reported that they are unable to leave comments. Despite it being disabled for two months, I haven’t noticed an influx of spam into the queue.

If managing the queue is one of your biggest concerns or time sucks, consider turning on the silent discard feature within Akismet. Not only does this feature save you time, the folks at Akismet said that “enabling the feature can result in significant reductions in your storage and resource usage requirements.”

akismet discard spam feature

The longer I administer the Tavern, the more aggressive I become with approving comments. A few years ago, I might have approved comments with legitimate looking Gravatars, names, and URLs that say ‘Great Job‘ or ‘Awesome list of themes‘. Now, I send them to the trash without even thinking about it.

Ultimately, the last line of defense for spam comments is you, or the person administering your website. Despite Akismet’s algorithms and its large user base, it’s not perfect and will likely always need the human element. By knowing what to look for and setting up your system to automatically discard comment spam, your site will be in a better position to battle against spammers, leaving you with more time to engage with your audience.

Tom McFarlin On The Differences Between A WordPress Developer and Implementor

In a post recently published by Tom McFarlin, I learned about a new segment of WordPress developers called implementors.

Implementors are generally described as those who look for and use existing solutions to solve problems. Developers on the other hand, approach problems from a different mindset. In a comment left on the post, Julien Maury summarizes the two beautifully:

An implementor will say first “ok I’ll check if there’s some good plugins to do that” whereas a developer will say first “I’ll check if I can do it”.

In the early years of using WordPress, I learned enough to produce the infamous white screen of death. I relied on plugins and themes to accomplish tasks for websites that I built. Just because I’m able to take existing pieces of a puzzle and put them together to make a complete WordPress website, doesn’t mean I’m a developer. However, the term implementor describes me quite well and has a nice ring to it.

I think of developers as those who have the knowledge and skill set to invent solutions to problems. It’s a skill that I envy and respect. An implementor is a good way to differentiate yourself from developers without it sounding demeaning. Some of those who work with WordPress, such as Jimmy Smutek, are already wearing the badge with honor.

Eventually, as my understanding and knowledge grows, maybe I’ll reach a place where I will confidently refer to myself as a developer but, for now, I’m proud to be an implementor and happy for the distinction.

Which term more aptly describes you, a WordPress implementer or developer?

6 WordPress Plugins That Make Migration & Mass Content Creation Simple

There comes a time in every online marketer or website owner’s life when it’s time to move your website and find a new home. Whether it’s because of a poor performing  web host provider or rebranding to a new domain name. Migration can be a pain and without the right tools and knowledge it’s very easy to lose data and create a situation where your site is down and unavailable for days. Losing you potential revenue and visitors.

wordpress themes

Migration is oftentimes technical requiring you to backup and restore databases, move images and other files into their correct directory structures, move and reactivate plugins and widgets. It’s heavy stuff, especially if you have a site rich with thousands of articles and images.

Thankfully, WordPress makes things much easier by allowing the creation of plugins that help take the hassle out of moving. Helping to ensure data integrity and as little downtime as possible.

Here we go:

Widget Importer & Exporter

The Widget Importer and Exporter is nifty little plugin that you can use to create export files containing your widgets that can be shared and uploaded to other WordPress sites. Widget creation has always been a very common problem as usually when WordPress sites are migrated, it’s required to manual copy and create every single widget item individually.

It has a variety of practical applications. It can aid in the process of moving widgets from one site to another and also makes life easier if any of your themes or settings change that could potentially mess up your plugin settings (with Widget Importer & Exporter, you can re-import them en masse and save time). The plugin also takes conflicting and non-existing sidebars into consideration and handles them very well.

Widget Importer and Exporter does exactly what it claims to do and receives a ton of positive reviews.

All-in-One WP Migration

The All-in-One WP Migration plugin allows you to export your database, media files, plugins, and themes in one session and is multisite compatible. You can also apply unlimited find and replace operations on your database and the plugin will also fix any serialization problems that occur during find/replace operations. This is very useful for easily renaming to new domain details and any other prefixes you might want to change as part of the migration process.

screenshot-1

It certainly is an all-in-one solution for WordPress migration and is also well accepted by the community.

WP-DBManager

If you’d like to simply make a copy of your WordPress database then WP-DBManager is an excellent tool packed with additional features to help maintain the health, integrity and security of your database and its backup files.

Although it’s not geared towards being a migration tool, it can save you in the instance of your site being hacked or for some reason becoming corrupt. It’s additional features such as automated scheduled backups, database repair and optimization can be a life saver when you need a backup most. It ensures that you have a copy of your database for restoration in case something tragic happens.

An excellent free backup tool that should accompany every WordPress installation.

Duplicator

Duplicator promises to migrate, backup, copy and clone any WordPress installation from one location to another. The plugin, however, is geared towards more advanced / technical WordPress users and they actually warn not to initiate any of the features without having an above average knowledge of WordPress.

With the demo below, you’ll see that the plugin offers a lot of feedback and scanning capability to help determine file and database sizes and other key info points.

A great tool for every WordPress enthusiast.

WordPress Move

WordPress Move is slightly less powerful than the other plugins I mentioned and requires a bit of customization and tweaking which includes adding FTP access credentials for your new site’s domain. You will also need to have the plugin installed and configured at the destination WordPress installation.

Though less powerful it’s still worth a mention and may prove useful for your preferences.

For Mass Content Creation:

Bulk Page Creator

If you ever need to create a multitude of pages you’re in luck. Bulk Page Creator allows you, from a single screen, to create as many pages you as like, customizing page titles and even specifying a template for content on each page.

bulk page creator

This plugin is a great time saver and is essential if you’re working with a large content site.

Have you ever used the plugins we’ve discussed? We would love your feedback on your experience in the comments below.

CSS Dropdown Menu in WordPress

In this tutorial I am going to show you how to build a pure CSS drop down menu in WordPress. I will walk you through the steps of creating a menu in WordPress, customizing it with CSS, and then printing the menu in your theme file. This tutorial requires that you have access to edit your WordPress theme files and also a basic understanding of HTML and CSS. I will walk through the process step-by-step so don’t worry if you have never edited a wordpress theme file before.

Note: I will be using WordPress 3.9 and the Twenty Thirteen theme for this tutorial, but all the steps should be the same for any WordPress 3 website.

Demo

Here is what our menu is going to look like when we are finished:

Source Files

Here is a zip file that contains all the necessary code for this tutorial.

Demo: WordPress Dropdown Menu – Version 1.0 (3 kB zip)

Create a Menu in WordPress

Chances are you already have a menu built in WordPress. WordPress 3 has an easy to use, drag-n-drop interface for you to create a menu structure. If you haven’t already, go to Appearance > Menus to build and save a custom menu. Make sure to give your menu a name and remember it for later.

WordPress Admin Area - Appearance - Menus

Add a Custom Walker Class to functions.php

Before we can print our menu in a WordPress theme file, we need to add a WordPress Walker Class to our functions.php file. This piece of code will clean up the HTML output of our menu so that we can more easily create the CSS styles. Simply copy and paste the Walker code into your functions.php file which should be right inside your theme folder. If a functions.php file does not exist, create it and then paste the Walker Class code in.

class CSS_Menu_Maker_Walker extends Walker {

	var $db_fields = array('parent' => 'menu_item_parent', 'id' => 'db_id');
	
	function start_lvl(&$output, $depth = 0, $args = array()) {
		$indent = str_repeat("\t", $depth);
		$output .= "\n$indent<ul>\n";
	}
	
	function end_lvl(&$output, $depth = 0, $args = array()) {
		$indent = str_repeat("\t", $depth);
		$output .= "$indent</ul>\n";
	}
	
	function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
	
		global $wp_query;
		$indent = ($depth) ? str_repeat("\t", $depth) : '';
		$class_names = $value = '';
		$classes = empty($item->classes) ? array() : (array) $item->classes;
		
		/* Add active class */
		if (in_array('current-menu-item', $classes)) {
			$classes[] = 'active';
			unset($classes['current-menu-item']);
		}
		
		/* Check for children */
		$children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
		if (!empty($children)) {
			$classes[] = 'has-sub';
		}
		
		$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
		$class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
		
		$id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args);
		$id = $id ? ' id="' . esc_attr($id) . '"' : '';
		
		$output .= $indent . '<li' . $id . $value . $class_names .'>';
		
		$attributes  = ! empty($item->attr_title) ? ' title="'  . esc_attr($item->attr_title) .'"' : '';
		$attributes .= ! empty($item->target)     ? ' target="' . esc_attr($item->target    ) .'"' : '';
		$attributes .= ! empty($item->xfn)        ? ' rel="'    . esc_attr($item->xfn       ) .'"' : '';
		$attributes .= ! empty($item->url)        ? ' href="'   . esc_attr($item->url       ) .'"' : '';
		
		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'><span>';
		$item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
		$item_output .= '</span></a>';
		$item_output .= $args->after;
		
		$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
	}
	
	function end_el(&$output, $item, $depth = 0, $args = array()) {
		$output .= "</li>\n";
	}
}

Print Menu in a Theme File

We now have a menu built and our Walker Class is in place. It’s now time to print our menu inside a theme file. To do this we will be using the wp_nav_menu() function. Using PHP we will call this function and pass it the parameters of our menu so that it can print out the HTML structure. The menu parameter is the name of the menu you created back in step 1. The container_id will add a CSS ID to the menu HTML which we will use in our CSS styles later. The Walker parameter is telling the wp_nav_menu() function to use our custom WordPress walker class to print the HTML.

<?php wp_nav_menu(array(
	'menu' => 'Main Menu', 
	'container_id' => 'cssmenu', 
	'walker' => new CSS_Menu_Walker()
)); ?>

Place this PHP code in one of your theme files. Where ever you place it is where your menu will be printed out. I am using the default WordPress Twenty Thirteen theme so there is a theme file called header.php which is where I will place the code.

If you have done everything correctly up to this point you should see an unstyled HTML list being displayed in your theme. If you are not seeing your menu printed out, double check the previous steps.

WordPress Menu displayed without any CSS

Add the CSS

Now it’s time to add the styles to our menu and see the fruits of our labor. Go ahead and open up the CSS file for your theme. It might be in a folder called css/styles.css or just a file in the root directory of the theme. You can copy and paste all the CSS below into your theme’s CSS file at once if you want. I will be breaking the CSS up into parts in order to explain it more easily.

Notice we are using the same ID that we specified in the wp_nav_menu() function, #cssmenu.

This first bit of CSS is just some simple resets to make sure that each browsers is starting from the same point.

#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
	border: none;
	margin: 0;
	padding: 0;
	line-height: 1;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

This next bit of CSS will be styling the first level of our drop down menu. One thing to note about this code is the CSS3 gradients that we are using for the background. If the user’s browser doesn’t support gradients, then we just fill in the background with the color #3c3c3c.

Another style worth noting is the use of the :after pseudo class. This lets us add the faint border colors around each menu item which give the design some depth.

#cssmenu {
	height: 37px;
	display: block;
	padding: 0;
	margin: 0;
	border: 1px solid;
	border-radius: 5px;
	width: auto;
	border-color: #080808;
}
#cssmenu,
#cssmenu > ul > li > ul > li a:hover {
	background: #3c3c3c;
	background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c3c3c), color-stop(100%, #222222));
	background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
	background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);
	background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%);
	background: linear-gradient(top, #3c3c3c 0%, #222222 100%);
}
#cssmenu > ul {
	list-style: inside none;
	padding: 0;
	margin: 0;
}
#cssmenu > ul > li {
	list-style: inside none;
	padding: 0;
	margin: 0;
	float: left;
	display: block;
	position: relative;
}
#cssmenu > ul > li > a {
	outline: none;
	display: block;
	position: relative;
	padding: 12px 20px;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
	font-weight: bold;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	border-right: 1px solid #080808;
	color: #ffffff;  
}
#cssmenu > ul > li > a:hover {
	background: #080808;
	color: #ffffff;
}
#cssmenu > ul > li:first-child > a {
	border-radius: 5px 0 0 5px;
}
#cssmenu > ul > li > a:after {
	content: '';
	position: absolute;
	border-right: 1px solid;
	top: -1px;
	bottom: -1px;
	right: -2px;
	z-index: 99;
	border-color: #3c3c3c;  
}

At this point your menu should look something like the image below. If it doesn’t, circle back and double check all the CSS is correct.

WordPress Menu displayed with CSS for the parent menu

Next we need to style the sub menus. We will want them to be hidden by default and then shown when the user hovers over the parent item. This can be accomplished using pure CSS.

First we will want to set all the sub menu UL to display: none;. Then we will use the :hover pseudo class on the sub menu to display: block;. This has the effect of hiding and showing the sub menu when the user hovers over a parent item.

#cssmenu ul li.has-sub:hover > a:after {
	top: 0;
	bottom: 0;
}
#cssmenu > ul > li.has-sub > a:before {
	content: '';
	position: absolute;
	top: 18px;
	right: 6px;
	border: 5px solid transparent;
	border-top: 5px solid #ffffff;
}
#cssmenu > ul > li.has-sub:hover > a:before {
	top: 19px;
}
#cssmenu ul li.has-sub:hover > a {
	background: #3f3f3f;
	border-color: #3f3f3f;
	padding-bottom: 13px;
	padding-top: 13px;
	top: -1px;
	z-index: 999;
}
#cssmenu ul li.has-sub:hover > ul,
#cssmenu ul li.has-sub:hover > div {
	display: block;
}
#cssmenu ul li.has-sub > a:hover {
	background: #3f3f3f;
	border-color: #3f3f3f;
}
#cssmenu ul li > ul,
#cssmenu ul li > div {
	display: none;
	width: auto;
	position: absolute;
	top: 38px;
	padding: 10px 0;
	background: #3f3f3f;
	border-radius: 0 0 5px 5px;
	z-index: 999;
}
#cssmenu ul li > ul {
	width: 200px;
}
#cssmenu ul li > ul li {
	display: block;
	list-style: inside none;
	padding: 0;
	margin: 0;
	position: relative;
}
#cssmenu ul li > ul li a {
	outline: none;
	display: block;
	position: relative;
	margin: 0;
	padding: 8px 20px;
	font: 10pt Arial, Helvetica, sans-serif;
	color: #ffffff;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
#cssmenu ul ul a:hover {
	color: #ffffff;
}
#cssmenu > ul > li.has-sub > a:hover:before {
	border-top: 5px solid #ffffff;
}

That’s it! If you did everything correctly you should have brand new WordPress drop down menu. If things don’t seem right check out the troubleshooting below.

Finished Product

Here again is the complete WordPress dropdown menu:

Source Files

Grab the source files here (zip file contains functions.php and styles.css):

Demo: WordPress Dropdown Menu – Version 1.0 (3 kB zip)

Troubleshooting

If your menu doesn’t seem to be function correctly, or it looks a little off then it is possible you are experiencing residual styling from your WordPress theme. This means that there are other CSS styles in your theme that are conflicting with our menu styles. The only way to fix this problem is to track down the other CSS styles and remove them. Your best bet is to use the Firebug extension for Firefox and inspect the CSS styles manually. Once you find the conflicting styles remove or delete them.

Web Development and WordPress Online Training

The end of my PHP course at the Software University is near, and I’m planning a new program for WordPress development.

I’ve been teaching courses since 2006, take a look at my training portfolio. Few of the companies where I have trained employees are: VMware, SAP Labs, Software AG, Melexis, and I have also trained groups at CERN – the European Organization for Nuclear Research, and Saudi Aramco – the world’s most valuable company.

mario-peshev-training-courses

I am a seasoned teacher at several universities and technical schools, and I have presented at several WordCamps around the world, such as: Edinburgh, London, Oslo, Sofia, Porto, the Netherlands, Norrkoping, Hamburg.

I have several training programs for web development and WordPress development, and my new class will be studying a custom program for 10 online students. The complete format for each week is the following:

  1. 2 hour of video materials
  2. homework assignment for each student
  3. 4 tickets/emails from each student regarding technical issues related to the course, including custom issues with your website, server infrastructure questions, etc.

The table of contents and the course scope/duration will depend on the majority of the trainees.

It’s a paid training program that would be adjusted to your skills and requirements.

Apply here and send me what topics are you interested in. Applications would be open in the next 3 weeks, and the selected candidates will start the training program on Aug 12.

Training costs would depend on the scope and and course duration. Let me know of your preferences via the contact inquiry.

The post Web Development and WordPress Online Training appeared first on Mario Peshev on WordPress Development.

VaultPress Begins Offering 5 Day Free Trials Through Jetpack

VaultPress, the WordPress security monitoring and backup service has created a way for new users to try the service for free. Beginning with VaultPress 1.6.2, you can try VaultPress Lite for five days through a seamless connection with Jetpack. The idea is to make it as easy as possible to get started using the service.

New Users Presented With A Free Trial Offer
New Users Presented With A Free Trial Offer

Since I already have VaultPress installed and it’s connected to my Jetpack account, the trial offer is not available. Follow these steps in order to take advantage of the offer.

  1. Create a new WP site that hasn’t used VaultPress before
  2. Install/activate/and connect Jetpack on the site with a WordPress.com account
  3. Install the VaultPress plugin and activate it. It will present you with an option to use the WordPress.com account you are connected with in Jetpack

Once connected, you’ll see the following screen letting you know your account is successfully using the free trial. If you don’t add billing information to your VaultPress account, the subscription will be canceled after five days.

Confirmation Of The Free Trial
Confirmation Of The Free Trial

Leveraging The Self-Hosted WordPress Community

I think the free trial is a great idea. It’s also a good move as it provides a way for VaultPress to tap into Jetpack’s large user base. While Jetpack provides many of the features WordPress.com users enjoy every day, it’s also a strategic business move for Automattic. It enables them to get more paid subscribers to the various services the company operates such as VaultPress.

In an interview with TechCrunch earlier this year, Matt Mullenweg made it clear that Jetpack will be a large focus of the company going forward.

Besides mobile, the company also plans to focus on Jetpack — its tool for bringing cloud-hosted features from WordPress.com to self-hosted WordPress blogs.

Indeed, he believes that as cloud providers get better, more people will host their own WordPress sites. While WordPress.com hosts 50 percent of all WordPress sites today, he believes that number could be as small as 5 percent in a few years.

It also shows the long-term vision and thinking behind Jetpack when it launched in 2011 and why Automattic has made strategic partnerships with webhosting companies to bundle it with WordPress installations.

In an extended interview with Forbes, Mullenweg explains how Automattic makes most of its revenue. WordAds and the VIP program are each 10% of the total revenue Automattic generates while subscriptions make up 80%. With the majority of paid subscriptions being tied to WordPress.com users, I question how that revenue stream will be replaced if it ends up hosting only 5% of all WordPress sites. Jetpack is one of the answers since it makes available services with paid subscriptions to self-hosted users.

The trial is part of a soft launch beta period and may be extended beyond five days once it’s completed. Will you take advantage of the free trial? Is five days enough time to determine the value of a VaultPress subscription?

How to Add a Contact Form Popup in WordPress

Recently we got an email from a user asking: How do I put my contact form in a popup for my WordPress site? This is a common trend on many sites where when a user clicks on the contact button or link, instead of going to a new page, the contact form opens in a popup. In this article, we will show you how to add a contact form popup in WordPress that will work for just about any contact form plugins. We will also show you how to only open the popup when a user clicks on link or button to ensure the best user experience.

A modal popup in WordPress

Getting Started

For this tutorial, you will need to install and activate two plugins:

First, you need OptinMonster with the Canvas Add-on. OptinMonster is the best WordPress popup and lead generation plugin.

Disclaimer: OptinMonster is created by WPBeginner’s founder, Syed Balkhi.

Next, you will need to have a contact form plugin such as Gravity Forms, Contact Form 7, Ninja Forms, etc.

For the sake of this article, we will be using our favorite contact form plugin: Gravity Forms

Let’s get on with creating a contact form popup in WordPress.

Step 1: Creating a WordPress Popup using OptinMonster

First thing we need to do is create a modal popup using OptinMonster.

You need to create a new optin by clicking on OptinMonster in WordPress admin menu, and then click on Create New Optin button.

Creating a new optin in OptinMonster

On the Setup tab, you need to choose Canvas Popup as your optin type and then click on the Next Step button. If you don’t see Canvas, then it means that you don’t have that addon installed. Please install it using the addon screen.

Select Canvas popup as your optin type in OptinMonster

Once you select Canvas, it will bring you to a configuration screen. You need to give this popup a title which will only be used internally and will help you identify this particular popup.

After that you can enter a value for optin loading delay. If you want the popup to load when user clicks a link or to load using exit intent, then leave the delay time to 0.

Optin cookie duration is set to 7 days by default. This means that once a user sees the canvas popup optin and decides to close it, then they will not see it for next 7 days. Because we’re going to use the click method, you should set the cookie duration to 0 as well.

Configuring your canvas optin

Once you are satisfied with the configuration settings, click on Save and Design Optin button to proceed to next step.

On the design tab, first you need to click and choose your optin theme. At the time of writing this article, there is only one White Board theme available for the canvas popup. You need to select it and then click on the Design Customizer button.

Choose your optin theme and then open design customizer

The design customizer screen is divided in two panes. On your right, you will see a preview of your lightbox popup and on your left you will see sections like Dimensions, HTML, CSS, and Effects (effects will only appear if you have the effects addon installed).

Optin design customizer in OptinMonster

By default, the dimensions for your canvas popup are set to 700 x 300px. You can change them to meet your needs.

You will notice that Canvas is blank by design. It’s done that way, so you can add just about anything you want while using the power of OptinMonster. You can add a signup form, facebook like box, surveys, coupon codes, or like we’re doing in this example a contact form.

Now that you have chosen your dimensions, let’s add our contact form inside it.

Start by clicking on the HTML tab to expand it. This is where you will paste the HTML code, or your shortcodes.

Here is a sample HTML we used to create the modal popup shown in the screenshot above.

<h3>Do You Have Any Questions?</h3>

<p>Want to ask us more about our services? Simply fill out this form and we will answer quickly. Alternatively, you can also call us at 5555-5555.</p>

Oops! We could not locate your form.

Notice that we have embedded a Gravity Form shortcode in there as well. If you are using another contact form, then simply replace the shortcode with your contact form shortcode.

Once you have entered the required HTML, click on the CSS tab to add styling to your modal popup.

Each of your CSS rule is required to use the prefix given just above the CSS box.

CSS prefix you need to use with each CSS rule

Here is the CSS we used to create the modal popup shown in the screenshot above.

html div#om-lku3gv5wny-canvas #om-canvas-whiteboard-theme-optin-wrap {
background:#fff;
border:10px solid #F5F5F5;
color:111;
}
html div#om-lku3gv5wny-canvas .gfield { 
list-style:none; 
}
html div#om-lku3gv5wny-canvas input[type=text]{
width:420px;
}
html div#om-lku3gv5wny-canvas input[type=submit] { 
background:#ff6600;
color:#FFFFFF;
padding:5px;
width:420px;
margin-left:40px;
}

html div#om-lku3gv5wny-canvas textarea {
height:80px;
width:420px;
}

Depending on what you are adding in your popup, you can use Google Chrome’s Inspector tool to find out which CSS classes or elements you need to edit.

Using Google Chrome's Inspect Element feature

Once you are done editing the popup styling, click on the Save button on top of the customizer and hit close to exit.

You will be back at the design tab, so you need to click on the Manage Output Settings button to finalize your settings.

The output settings screen is where you configure the optin’s output option. All you need to do here is check Enable optin on site. We will cover how to open popup with a link in the next step.

If you want the popup to load automatically based on timer or exit-intent, then you can load optin globally or use other conditionals accordingly.

Output settings for your optin

Save your settings when you are done.

Step 2: Open Contact Form Popup with a Link

Launching a popup with a link is really simple thanks to the MonsterLink functionality that OptinMonster has. Each popup has a unique ID to identify it. You can find your canvas popup’s unique slug by going to the optin screen and clicking on the gear icon next to the canvas popup you just created.

Copy the unique optin slug

Now you will need to use this unique optin slug to create a link, like this:

<a href="#" class="manual-optin-trigger" data-optin-slug="lku3gv5wny-canvas">Click me!</a>

You can use this link in your WordPress posts, pages, widgets, and even your templates. Clicking on the link will open your contact form in a popup window.

That’s all. We hope this article helped you boost your conversion rates by using a contact form popup in WordPress.

We use OptinMonster on WPBeginner, as it helped boost our email subscribers by 600%.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

To leave a comment please visit How to Add a Contact Form Popup in WordPress on WPBeginner.

Exploring The Idea Of An Internet Archive Specifically For WordPress Content

It seems like each time a WordPress podcast disappears, there is one or more to take its place. A few weeks ago, the WP Bacon podcast announced the end of their show to concentrate on other projects. However, a recent search in iTunes for WordPress Podcasts show there is almost an endless amount of content to listen to.

Variety of WordPress Podcasts To Listen To On iTunes
Variety of WordPress Podcasts To Listen To On iTunes

Although websites can be archived by the Internet Archive web crawler to be preserved, podcasts don’t have that luxury since they are audio files. It’s disappointing knowing that some WordPress podcasts will be lost to the ether, never to be heard from again. It’s an even harder pill to swallow if the podcast has 50-100 episodes. It would be great if there was a resource on WordPress.org that acted as a digital archive of WordPress history for text, video, and audio. An enhanced version of the Internet Archive but specifically for WordPress.

Results For WordPress.org In The Wayback Machine
Results For WordPress.org In The Wayback Machine

Make Sure Your Site Is Not Blocking The Internet Archive Web Crawler

The Internet Archive uses web crawlers or spiders to automatically scan and download websites. You can manually trigger the spiders to crawl your site by searching for it using the Wayback Machine. If the site is already indexed, you’ll see a list of results. If not, the Internet Archive will attempt to crawl the site and display the results within six months.

It generally takes 6 months or more (up to 24 months) for pages to appear in the Wayback Machine after they are collected, because of delays in transferring material to long-term storage and indexing, or the requirements of our collection partners.

A robots.txt file at the top-level of a domain is enough to block the Internet Archive from crawling the site, so please don’t use it. The Archive Team explains the history of robots.txt and why it’s dangerous to preserving the web.

Robots
photo credit: gruntzookicc

How To Upload Audio To The Wayback Machine

In order to upload audio to the Internet Archive, you’ll need to register for an account to obtain a virtual library card. Once you’ve registered and activated your account, browser to https://archive.org/upload/. This is the submission form you’ll use to upload audio to the Internet Archive. Select the audio file or drag to the screen to begin the process.

With the audio file selected, you’ll need to fill in additional details such as the description, subject tags, date the work was created, etc. Please be as detailed and descriptive as possible. This is where publishing decent show notes helps as you can just copy and paste the relevant material into the submission form.

One thing you’ll want to pay particular attention to is the license. If the work is not considered in the public domain, CC0 is the least restrictive license. While you can choose to be more restrictive, I recommend being the least restrictive license as possible to remove doubt on how the content can be reused. As an example, I uploaded episode 154 of WordPress Weekly.

The Wayback Machine Audio Upload Form
The Internet Archive Audio Upload Form

Once the upload process is complete, the Internet Archive creates a page dedicated to the piece of audio content. From this page, visitors can read information and listen to the uploaded audio file. I also searched the audio section of the Internet Archive for WordPress Weekly and was able to locate Episode 154 of the show.

Internet Archive Search Results For WordPress Weekly Audio
Internet Archive Search Results For WordPress Weekly Audio

If you’ve produced at least 25 or more episodes of a WordPress podcast and have decided to call it quits, could you please consider uploading the shows to the Internet Archive. I realize it’s manual labor and takes time, but at least your hard work of preparing for each show and the information discussed will not go to waste!

Uploading Video To The Internet Archive

Although the Internet Archive has a section devoted to video content, you’re required to have the source files for upload. These are not only larger, but  require more time and labor to obtain. I doubt YouTube.com is going anywhere, anytime soon, but if you want your WordPress centric videos to be archived, this is where you’d upload them.

Why Archiving WordPress Information Is Important To Me

I think of WP Tavern as a site with a continuous mission of documenting what’s happening within the WordPress ecosystem. Our job is never completed and I value the archived content as if it were gold. When I read posts from the archive, I’m reminded of how many projects that have come and gone over the past few years. It doesn’t matter if it’s text, audio, or video, each piece of content about WordPress whether it’s published on WP Tavern or not is important, especially when looking at the big picture.

My hope is that websites that write about WordPress on a routine basis do their best to archive content, even if they decide to shut down. For example, if WPCandy disappears from the web, a large gaping hole of WordPress history will go with it. During the height of WPCandy’s success, I spent time away from WP Tavern. The Tavern doesn’t have any relevant content from that time period. When piecing together stories to make sense of decisions and trends, historical content is important. Once those holes are created, it’s nearly impossible to fill them.

A lot has happened since the birth of WordPress over 10 years ago. Much of WordPress’ earlier history is documented fairly well but the events and milestones between the beginning and the present are spread throughout many sites in text, video, and audio. As someone who writes about WordPress for a living, it’s important that as much WordPress history as possible is archived. It sucks to view an article about WordPress with a bunch of potentially relevant information to a recent topic of discussion only to discover a 404 error.

How important is it to you that there is a proper archive of historical content related to WordPress and it being available to the public? Is the Internet Archive good enough or would you like to see something catered specifically to WordPress?

The $15 WordPress gig

Three weeks ago I received the following message on LinkedIn:

Hello, I’m looking for someone who could customize a WordPress plugin we bought. It’s a car reservation system, we need to change the pricing model and add a few extra SQL tables that would operate with the plugin.

The contact is a manager of some small agency, in his 50s, so I replied with my usual template for people who get in touch with me as I do dozens of WordPress things here and don’t look like scam – that I can forward that to my peers and share it in the relevant group if he has a post or at least a detailed project description, where scope, deadline and budget would highly increase the chance of finding a decent candidate. What I got as a response was quite stunning:

Thanks, the plugin costs $25 so I estimate the change would probably cost around $15.

That’s the kind of mindset that blows my mind. Really.

WordPress is free and Open Source

That conversation reminds me of a great post from Morten named “WordPress is not easy - and that’s okay”. Especially that quote: “We paid a WordPress developer $200 to build us a new theme and we’re having some issues”. 

It also reminds me of Clients from Hell and other relevant resources, where I’ve contributed with real stories myself. Or the Freelance Freedom webcomic for the poor freelancer struggling with people who try to do business without being able to think clearly in the first place.

You know, I’ve heard people saying: “But freelancers should work for free, why else would they call themselves free lancers?”. There are real people out there who believe that freelancers are like charity workers, dedicated to helping people with everything for free, and they often use open source which is also free and is meant to be used so that the “smart” people could exploit that and make piles of money.

worst contract ever

 

There have been hundreds of discussions about that sort of  clients, and who’s responsible for educating them. Admittedly, I’m not very well aware of automobiles, or apartments. Still, I would be ashamed to just go to a car store or real estate broker with: “I want a car/apartment” providing them with: “I don’t have a budget” or “My budget is $200″.

However, there are different divisions of management consulting and their experts are willing to help potential clients to narrow down their requirements and form a decent specification, and also give them some rough numbers for the possible cost of whatever they want. However, if those consultants are charging $100 – $800 per hour and those clients want to spend $15 on something, there’s clearly something going wrong down the way. That’s why some cheap clients send “Request for proposal” forms to some agencies who do the heavy lifting for free and then send those documents to other freelancers to get the cheap number and work.

Yes, I’ve seen that quite a lot of times, and it’s terrible. And perspective matters.

You know what? I’ve also worked in companies who do Java and .NET development and I haven’t heard of many similar scenarios there. Why, you ask? Because those technologies are targeting the large businesses, the enterprise, the “fat” clients and still most of them run away from the “insecure” Open Source and their childish hippie philosophy of doing stuff for free. It doesn’t seem serious, and very few serious brands actually rely on the open platforms. Good thing that at least numerous governments slowly migrate to Linux and open CMS/LMS systems.

A WordPress Product Business Model

Disclaimer: I’m going to speculate here a lot about numbers, based on my personal observations and generalization. I don’t believe there are any numbers available for the public whatsoever, so I’ll go with my assumptions.

So, our client claims that when a plugin costs $25, then the customization can’t cost more than that said plugin, right? I guess that we should all be “freelancers” then, since we use WordPress, which is open source, hence our work can’t cost more than the platform we build on…

Anyway, so let’s talk rough numbers.

I was unable to find customer numbers for some of the larger plugins, although sources like Gravity Forms have shared some numbers: “Over A Million WordPress Sites Are Already Using Gravity Forms.“. That probably translates to over a hundred thousand customers. CodeCanyon shows some public numbers where the first 5% of plugins sell more than 1000 times.

Keep in mind that there are different ways to sell a WordPress plugin, different pricing models (one-time vs. recurring payments), different price range ($5 or $500/product) etc. Also, the uniqueness, complexity, richness of features and elaborate documentation + vivid community are key factors for bringing more sales to a product.

If we try to narrow this down to a product that is complete, well developed and extensible, and is sold in a marketplace, it would probably generate 500-5000 sales in the first 6-18 months. The price could be $20 – $120. Again, it’s all speculation: if your product is a simple “yet another gallery” built in 1h adding nothing in particular for the customers to be willing to buy it, and if you sell it through your blog with 50 unique visitors a month, then it won’t generate any sales, naturally. On the other hand, if it’s a decent plugin and you set up a site, share it in the social networks etc. or use a marketplace to distribute it, then you can quickly gain some speed and revenue accordingly. The price could also be $0 – $1000 even, but let’s talk some general rough numbers (even if we include extensions to existing plugins for extra features that are needed).

Assumingly, the $25 plugin that the client mentioned is a car service plugin, which makes it fairly rare and probably wanted, as there are enough car dealership stores around the world, it’s fairly cheap and doesn’t have that much competition. So if that plugin has made 2000 sales for the first year, that translates to $50’000. Or that’s how much do other customers value that plugin in general. That also includes some marketing costs, documentation, and (usually) support.

If changing the pricing model, adding a few tables, doing comparison etc touch about 2-5% of the overall features, that would cost $1000 – $2500 alone. If we refer to the previous example where costs are also allocated to support, docs and such, well guess what? Client communication, management, testing and plugin research are also added up to the end service which could translate from 5% to 60% of it, therefore the number is completely realistic, if not incredibly lower.

And what’s the difference between $15 and $1000 – $2500? It’s about 100 times lower than the realistic cost of the required service, in a regular market. And by regular market I mean a market where WordPress isn’t evaluated as “free so everything else should be free or nearly free”, but a general custom based platform or a proprietary software.

I’d still point out that it depends on numerous factors and the numbers are hypothetical. A different type of research could point out different numbers, geographical location has it’s role too, and most freelancers have no idea how to estimate anyway. Still, if we decide to take on the project, we have to communicate that project with the client, get the actual specifications, research the plugins and implement the changes, test it and ship it, that would likely be 5 – 50 hours of work at your rate. So unless you charge $0.3/h, I don’t think that this would be the project of your dreams.

The Actual WordPress Pricing

Brian Krogsgard just posted his thoughts on “How much should a custom WordPress website cost” and it’s one of the best pricing articles I’ve read lately. He’s outlining rough numbers for freelancers and agencies based on their experience and location, and it’s a good example of what’s happening out there.

That’s the type of thing that customers should refer to before approaching freelancers, consultants or agencies. What do you do before buying a car or an apartment? You browse car dealership websites, housing and real estate listings and generally form your opinion on how much does it cost based on some factors.

Some agencies provide rough numbers, packages and bulk prices for websites, which is cool. We’ve tried to provide some rough hours for smaller tasks in one of our projects even though every week potential clients keep ignoring those numbers and submit the N/A budget at the end.

Chris Lema has a great book called “The Price is Right” that sheds some light on pricing. He regularly writes on pricing and speaks about it at conferences. Other consultants have reviewed that subject additionally, and Troy Dean – another favorite consultant of mine – had his talk named “101 Ways to Demand Higher Fees” that also touches on a lot of marketing (which is what most consultants and freelancers forget occasionally).

The guys at WPML posted another resource on “Why Drupal Developers Make x10 More than WordPress Developers“. I specifically enjoy this one as Drupal is also an open source CMS just like WordPress, yet this research is proven to be true in many areas, and lots of agencies work with high-end clients as the platform is selling itself as an enterprise thing for serious projects, and not as a blogging platform for small business websites.

I’ve also written on Pricing and Product Marketing since we need to market ourselves properly, reach out to our target group, and find our niche, whether it’s a “quick dirty jobs to save small projects” or “boutique elite agency for badass high-end projects”. Either way the global underpricing is easy to be inherited as a philosophy by the majority of the clients, which is hurting the ecosystem and the overall quality of products and services we do provide as agencies, consultants, or freelancers.

If you have any real numbers for your larger plugins or themes that are not publicly available, I’d be happy to hear you out, just send me your comments or get in touch via the contact form.

The post The $15 WordPress gig appeared first on Mario Peshev on WordPress Development.

#3 Grabbing media like a boss

Video post in the Socially Awkward WordPress theme

Now that Hybrid Core version 2.0 has been officially released, I thought it’d be a good idea to continue this series of posts highlighting cool stuff from the framework.

In this post, I want to introduce you to a feature we call the “Hybrid Media Grabber” because it can be pretty useful for theme authors who want to do awesome stuff with media.

An idea was born

Way back when I was a partner at DevPress, Tung Do had this awesome design (like he always has). Unfortunately, there were parts of it that none of us on our team really had the skill level to code without making it hard for the user and not portable to other themes.

Does this sound familiar to any other developers? Yeah, those pesky designers don’t know the limitations of the software.

What we needed was an easy way to get a video (YouTube, Vimeo, self-hosted, etc.) for a post and put it wherever we needed it for the theme’s design. That’s a bit of problem for a couple of reasons:

  • We could use custom fields, but that wouldn’t be portable to other themes.
  • The user could stick it in the content, but that’d make it hard to get out.

After our team parted ways, this idea stuck with me. I also found that I needed it for one of my own projects later.

Eventually, WordPress got lots of new stuff for working with media, which made this idea look a lot more realistic. I was motivated to get this thing done and first used it in Socially Awkward, a media-focused WordPress theme.

What does the media grabber do?

Well, it grabs media.

More precisely, it grabs media related to a post. It first looks within a post’s content for media that’s been added by the user. If no media is found, it’ll look for media attached to the post.

The ability to do this is cool for a couple of reasons:

  • You can get a post’s media without showing the full post content.
    • Use it in a widget.
    • Show it alongside excerpts on archive-type views.
  • You can split this media from the post content on single post views.
    • Show it above the content.
    • Show it somewhere else on the page.

It’s the audio/video equivalent of featured images, which has a lot of potential. Video theme, anyone?

The feature supports a lot of different methods of adding media that the user might have used:

  • Plain ol’ HTML <video>, <iframe>, and <object> tags.
  • [embed] shortcode.
  • WordPress auto-embeds.
  • [audio] and [video] shortcodes for self-hosted media.
  • The Jetpack plugin’s audio/video shortcodes.
  • Attached media files.

What does the future hold?

Right now, the media grabber only supports audio and video. However, I could easily see the day when other types of media are supported.

I’m also willing to work with plugin authors who have custom shortcodes for adding media. Jetpack integration was phase one. It’d be nice to integrate with other plugins too.

The post #3 Grabbing media like a boss appeared first on Justin Tadlock.

WP Quick Install Script Offers a Fast Way to Install WordPress, Plugins, and Themes

wp-quick-install

WP Quick Install is an interesting new tool from Julio Potier, Jonathan Buttigieg, and Jean-Baptiste Marchand-Arvier, the folks behind WP Rocket. As part of supporting their commercial caching plugin, the WP Rocket team works extensively with clients. WP Quick Install is a tool they use internally and decided to share with the community.

Its creators claim that the script is the easiest way to install WordPress. You download the tiny script and then upload it to where you want your installation. The new installation screen allows you to add themes and plugins to your site as well as configure some of the most common settings. It even allows you to do a few extra handy things like auto-remove the default content created by WordPress, ie. page, post, comment, themes, etc.

“We set up a fresh WordPress installation almost every week, both for our clients and for testing purposes,” Marchand-Arvier told the Tavern. “It’s always the same (when we don’t have SSH): download the zip, unzip, upload via ftp, install our favorites plugins, remove the default content, etc. So we developed a tool to do this for us.”

Marchand-Arvier said that the team created the tool for the sake of convenience and wanted to share it to give back to the community. He confirmed that they have no plans to build a commercial product around it but simply want to release as many free plugins and scripts as they can while developing for WordPress.

Bulk Install Plugins and Themes While Installing WordPress

In addition to all the usual database details, WP Quick Install allows you to select search engine privacy settings, media thumbnail sizes, revision and autosave settings, enable debug mode, and disable the theme and plugin editors. Any theme that you include in the install folder can also be automatically activated:

theme-info

The automatic plugin installation part of the script is likely to save users the most time. It allows you to specify extensions by their slugs and automatically activate them upon installation:

extensions-information

WP Quick Install may seem like a long installation form to fill out, but the good news is that you can include a data.ini file to pre-populate the installation form or to generate content (posts, pages, etc).

Multisite Support Coming Soon

In the future, the WP Rocket team plans to add network creation to the script. “We want to keep it simple, but of course we definitely want to improve this tool,” Marchand-Arvier said. “We are currently working on multisite deployment. The script is on GitHub and it’s open to contributions.”

The tool is convenient if you prepare a data.ini file to pre-populate the installation form, but its primary shortcoming is that it doesn’t let you select the language before doing anything else. The script uses the WordPress 4.0 language API to manage the dropdown selection, allowing you to install in any language. However, it doesn’t automatically change the language in the installation process. This forces the user to complete the lengthy form in English. Hopefully, this aspect of the script will be improved in the next version.

The WP Rocket team created WP Quick Install chiefly for novice developers. “We aren’t pretending to replace the classic WordPress installation,” Marchand-Arvier said. “But today we believe that it’s the easiest way to install WordPress, especially if you don’t use WP-CLI or wget to install.” Check out the demo video below and let us know in the comments if you think the script can help you speed up your installations.

WordPress Products and Demos

Last year at WordCamp Sofia I gave a talk named “Choosing the right WordPress theme”. Contrary to the first guesses title-wise, since I’m not a designer at all, my topic was focused on the different sources to find a theme, based on a given set of requirements.

Few of my slides were referring to the product piracy – the humongous number of products being pirated. Or probably the high percentage of users using illegal products.

I know of thousands of people using non-licensed operating systems or other cracked products. It’s a painful experience really, and it’s hard for a product company to plan for these or implement thousands of protection mechanisms against that.

Including WordPress

Since WordPress is Open Source, GPL-licensed and everything, all products comply to that rule and provide the source code for free when purchased. Except for a very small amount of examples violating the general rule. Which translates to – the first user buying the product can generally distribute it to everyone else, including the complete source code.

I’m an Open Source advocate which is one of the reasons I hang out with WordPress people all the time and breathe WordPress. It doesn’t reduce the amount of piracy whatsoever, and while piracy is a bad thing, I got a few decent examples why is that happening.

WordPress Themes

During my talk that I mentioned above I received the following comment:

Okay, we really like that theme X that looked awesome in their demo, but we have no idea whether we could make it look like that. So we’ve downloaded the theme from a warez website to try it out, it was hardcoded all over the place so we dropped it.

I was quite surprised at first, and then I gave it some thought and remembered a few times when I’ve seen that myself.

The $15 WordPress Plugin

Yesterday I saw a post in the local Facebook WordPress group. The message was the following:

Hello, I’m looking for a free version of the plugin X (link) as this one costs $15.

Shortly after all of the rant coming from a bunch of us, the post has been removed. I’ve shared my concerns about that idiocracy as well, and one my fellow WordPress developers replied with the following thing:

I’m asking friends for a test-run of a given plugin as often I find several alternatives that cost over $100 each and I can’t really see how they work.

My friend is a recognized frontend developer with several years of technical and PM experience around Europe.

Live Demos

Have you ever thought about the fact that numerous plugins and themes don’t let you “test drive” them? Some of them provide screenshots, and others even do videos, but very few of the plugins and themes have a demo site to play with their options or test something out.

When you’re out for a car, you’re allowed to take it for a test drive. Before you buy an apartment, you can check out everything – the area, the place itself, even the neighbors upstairs or next door (very important btw). A lot of premium services provide free trial to hook you up.

And a lot of plugins don’t have test sites. And whenever you see the actual demo, it looks nice. But who can say how long did it take for the demo to be built, and whether it’s possible with whatever content you want to place?

I was very excited when the team behind Toolset (where I was working few years ago) launched Discover WP. With the power of Types, Views, and CRED it was close to impossible to build the types of demos and screenshots so that everyone is convinced that whatever they need is possible. Giving a real test to that toolset was the kind of thing that changed everything, and that’s why I recommend it everywhere.

Sometimes you can try out a free version of a plugin. It might not be enough (due to the lack of complete features), or even deceptive in the negative way. Screenshots or videos are important, but insufficient. Live demos are what we should strive for.

Would you buy a product without even taking a quick peek around it’s features?

The post WordPress Products and Demos appeared first on Mario Peshev on WordPress Development.

How to Automatically Create WordPress Post from YouTube Video

Recently one of our users asked us for a way to automate the process of creating a new post in WordPress whenever they upload a new video on their YouTube channel. Adding a YouTube video in WordPress is extremely simple, but it requires you to manually log in, create a post, and then embed the video. In this article, we will show you how to automatically create new WordPress post whenever a YouTube video is uploaded.

We will use a free tool called IFTTT to do this.

What is IFTTT?

IFTTT stands for “if this then that”. It is a powerful service that lets you automate certain tasks based on your specified criteria. For example:

If this happens: ‘A new video is uploaded to YouTube’.
Then do that: ‘Create new post in WordPress’.

The example above is called a recipe. You can create a recipe for many web based services. Check out our article on how to automate WordPress and social media with IFTTT for more examples.

Creating YouTube to WordPress Recipe in IFTTT

First thing you need to do is go to IFTTT website and sign up (it’s free).

Once you are logged in, you need to click on the Create button to start creating your first recipe.

Creating a new recipe in IFTTT

This will bring you to the create a recipe wizard. You need to choose a trigger by clicking on ‘this’ link.

Step 1 choosing an action

You will now see a number of channels that can be used with IFTTT. Scroll down or search for YouTube and click to select it.

IFTTT choose a channel

When you click on YouTube, it will take you to the next step asking you to activate a YouTube channel. You need to click on the activate button to allow IFTTT access to your YouTube account.

Activate YouTube Channel to continue

Once you have activated your YouTube account, you can choose a trigger. IFTTT will show you a few choices. For this example, you need to click on ‘New Video Uploaded’.

Choose New Video Uploaded as trigger for this recipe

This will bring you to the next step which usually allows you to choose fields from your selected trigger. However the trigger we have selected does not have any fields to choose from. Simply click on ‘Create Trigger’ button.

Finish trigger creation

You will now come to the ‘That’ part of your recipe. This is where you define the action to perform when the recipe is triggered. Click on ‘that’ to continue.

Click on that to define actions

IFTTT will now ask you to choose an action channel. Search for or scroll down to select WordPress.

Choose WordPress as the channel for your action

Again you will be asked to activate the channel. Click on the activate button and provide your WordPress site URL, username, and password.

Activate WordPress as channel in IFTTT

IFTTT will now show you actions you can choose to perform on your WordPress site. You need to click on ‘Create a Post’.

In the next step, you need to choose ingredients from YouTube channel to add into your WordPress post. As you can see in the screenshot below, we have chosen to add YouTube video title as the WordPress post title. We have used description and URL in the post area.

Adding ingredients to your recipe

As you scroll down, you can choose whether you want to publish the post immediately, publish privately, or save as a draft. Click on the ‘Create Action’ button to continue.

Select a post status

IFTTT will now display your recipe details. You need to save it by clicking on ‘Create Recipe’ button.

Finish recipe setup

Important: By default IFTTT has URL shortening turned on which means that your YouTube URL will be shortened by IFTTT and WordPress will not be able to embed your video. To solve this issue, you need to disable URL shortening in IFTTT. Start by clicking on your username on top right corner of the IFTTT dashboard and then click on Preferences. Next, scroll down to the URL shortening section and disable it.

Disable URL Shortening in IFTTT

That’s all, your IFTTT recipe is ready now. It will automatically check YouTube for new videos every 15 minutes. If it finds a new video, then IFTTT will automatically create a new WordPress post from that YouTube video.

We hope this article helped you create new posts in WordPress from YouTube video uploads. Don’t forget to check out our 9 useful YouTube tips to spice up your WordPress site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

To leave a comment please visit How to Automatically Create WordPress Post from YouTube Video on WPBeginner.

A Proposed Enhancement That Saves A Mouse Click When Upgrading WordPress Plugins

Four months ago, WordPress user Fredelig created a new ticket on WordPress trac suggesting the plugin update notification bubble load the page listing all of the plugins with pending upgrades.

In WordPress 3.9, clicking the notification loads Plugins.php which lists all of the activated plugins, including the ones with upgrades. This requires a second mouse click to show only the plugins that have an update available. Although it was too late to include in WordPress 3.9, it’s also missed the boat for 4.0.

Better Plugin Upgrade Notification Bubbles
Better Plugin Upgrade Notification Bubbles

On a related note, I’d like to propose an enhancement to the comment notification bubble. Clicking on the notification currently loads edit-comments.php which displays both approved and moderated comments. Ninety-nine percent of the time when I click on the notification link, it’s because I want to approve a comment pending moderation.

Although the task can be accomplished with the way it works now, sometimes the comment I need to approve is not on the first page and I have to click the Pending comments link. Having the notifications bubble load the pending comments first would save me a mouse click.

Do you have any pros or cons regarding the suggested enhancements?

Widget Context 1.0 Now Available

I have finally managed to publish the grand rewrite of the Widget Context plugin as version 1.0 to the official plugin repository. The new modular architecture allows other developers to create plugins that add new context modules for custom widget visibility rules. It also includes a new settings page that allows disabling context modules that you don’t use.

Widget Context 1.0 interface

Widget Context 1.0 user interface.

Widget Context settings panel with modules

Widget Context settings panel with available context modules.

For an example of how to create a context module please have a look at the default context modules that are included with the plugin.

Export as CSV for Storage for Contact Form 7 Plugin

Export of form entries for Contact Form 7

I have updated the Storage for Contact Form 7 plugin to add support for CSV export of the contact form entries. Now you are able to export either all or a selected set of entries filtered by their month of submission or the form used for submission.

Get your WordCamp Europe ticket now!

The tickets for WordCamp Europe 2014 are on sale – get your ticket now!

Few hundred dedicated WordPress enthusiasts and professionals already booked their flights and reserved their seats. The attendee list is growing and everyone is excited for the largest WordPress event in Europe.

If you’ve missed the big news, Sofia is hosting WCEU on September 27-29.  My colleague Stanko has shared a futuristic video about our culture and area, take a quick peek here:

The post Get your WordCamp Europe ticket now! appeared first on Mario Peshev on WordPress Development.

Blue Steel: A Free WordPress Theme Based on Roots

Roots is a WordPress starter theme that makes use of HTML5 Boilerplate, Bootstrap, and Grunt. Over the years Roots has garnered somewhat of a cult following and is still going strong with the release of version 7.0.0 last week. This release moves some of the theme’s trademark features into a plugin called Soil and adds Bower for front-end package management.

Blue Steel is a new open source theme built to run on top of Roots. It was inspired by the design of The Verge and, of course, the film Zoolander. Dhawal Shah introduced his new theme on the Roots discussion boards under a thread titled: “Is there more to a blog than being really really really ridiculously good looking?”

Blue Steel is the answer to that question. It was originally created for use on Class Central, a website dedicated to helping people discover free online classes (MOOCs) from top universities such as Stanford, MIT, and Harvard.

The theme is responsive and resizes down nicely to use mobile-friendly navigation. The homepage sports a flat, minimalist style with bold colors and features your latest content with room for a sidebar.

homepage

Blue Steel blog posts are styled with readable typography and attractive pullquotes.

blue-steel-blog-posts

This is not exactly your average plug-and-play style WordPress theme. In order to use it you must be familiar with both Roots and Composer. You will also be required to modify it to suit your own needs, but it does provide an excellent starting place for creating your own Roots-powered theme.

Blue Steel is released under a GPL-compatible MIT license. Many thanks to the folks at Codelight who decided to make it available on GitHub so anyone can fork it for an easy start.

Preview WordPress 4.0 Features, Beta 1 Now Available for Testing

WordPress 4.0 Beta 1 is now available for download and testing. This means that core developers are now onto the stage of bug fixes and inline documentation in preparation for the official release in August.

Helen Hou-Sandí, the release lead, announced the beta with an outline of user-facing features that need testing. The list offers a good summary of some of the exciting changes and improvements coming in WordPress 4.0:

  • Previews of oEmbed URLs in the visual editor and via the “Insert from URL” tab in the media modal.
  • Media library “grid view” added in addition to the “list view”
  • Refreshed plugin install and search experience
  • Select a language when installing WordPress
  • Improvements to editor resizing its top and bottom bars pin when needed
  • Improvements to keyboard and cursor interaction with TinyMCE views
  • Widgets in the Customizer are now loaded in a separate panel
  • Improvements to formatting functions

When testing the beta, you’ll find that the grid view for the media library is on by default. You have the option to toggle back to the list view, but I’m not sure why you ever would. The new grid view is truly a thing of beauty and has evolved considerably since last October when we featured it during its initial development.

grid-view

The bulk edit option allows you to quickly delete multiple images. Clicking on individual items launches a details modal where you can edit an attachment and even navigate between items directly in the modal.

details-modal

There are a lot of changes packed into WordPress media in the upcoming release and any help testing would be beneficial to the core team.

The plugin search and installation process is another highly visible feature with a fresh new look. Check out the new plugin details modal as well as the new grid view when searching for an extension.

search-plugins

You can help by testing the plugin modals and cards on as many screens and accessibility devices as possible in order to hunt down any bugs with the new display.

As this is a major release of WordPress, developers would do well to test their sites, themes and plugins against the beta while it’s still early. Hou-Sandí encourages anyone who has found a bug to post in the Alpha/Beta forum or file a ticket on trac. The list of known bugs will show you what testers have already identified so far. Some of those bugs may have already been fixed. Your bug reports and patches will help to make WordPress 4.0 shiny and polished when it’s officially released in August. Download Beta 1 from the release announcement on WordPress.org.

First Look At The New Plugin Details Screen Coming To WordPress 4.0

In the past two weeks, a lot of work has been done to improve the various plugin installer modals in the backend of WordPress. A modal is a fancy way of saying a dialog or popup box. One of the modals revamped is the plugin details view. When users click on the details link when searching for plugins to install from the backend of WordPress, a dialog box appears showing detailed plugin information. Here is what the current implementation looks like.

Current Plugin Details Modal View
Current Plugin Details Modal View

Here’s what the new view looks like. Keep in mind that it’s a work in progress.

The Detailed Modal View For WordPress 4.0
The Detailed Modal View For WordPress 4.0

As you can see, the plugin’s banner image is displayed at the top. A reviews tab has been added making it easy to read the latest reviews. In addition to the average rating, you can now see how the average is determined. All contributors to the plugin are listed along with their Gravatars. When the modal view shrinks, the detailed information is displayed above the description text.

I found the reviews hard to read in chronological order because it’s difficult to determine where a review begins and ends. Showing Gravatars is neat but I question their usefulness if they are the size of favicons. Overall, I like the improvements and can’t wait to see what the finished product looks like.

What do you think of the new look?

In The Next Few Years, 90% Of WordPress Development Could Be JavaScript Based

In March of 2013, Matt Mullenweg stopped by the Memeburn office to talk about how WordPress went from being just another blogging platform to becoming the CMS of choice for the majority of the web. The author of the article infers that Mullenweg thinks 90% of WordPress will be JavaScript based in the next few years.

In the future, the platform will also feature a lot more JavaScript. In fact, he reckons that 90% of WordPress will be JavaScript-based within the next few years.

When Eric Lewis recently asked Mullenweg on Twitter if he said the quote, his response clarified that he thinks the majority of PHP will be used for infrastructure such as updates, API’s, and the database layer. Meanwhile, user-facing improvements will be JavaScript driven. Most already are such as the editor, media, customizer and menus.

Spurred on by the discussion, Jordi Cabot of NelioSoftware.com dove into the WordPress source code. Using graphs, Cabot shows how many JavaScript files and lines of code have been added to WordPress since 0.7 was released. He then compares the number of PHP and JavaScript lines within the source code.

PHP vs JavaScript Lines Of Code in WordPress
Image Courtesy of Nelio.com

The numbers show that JavaScript is only 16.6% of the total source code of WordPress with PHP representing 83.4%. So while JavaScript isn’t taking over WordPress development any time soon, it’s definitely a valuable skill worth knowing.

Like Greg Rickaby, I find it fascinating that JavaScript has seen a resurgence. At one point, JavaScript seemed to be one of those poisonous things on the web that caused nothing but problems for browsers.

I think various libraries like MooTools, jQuery, and Node.js are largely responsible for the renewed interest in the language. I also think the introduction of Ajax played a role as well, going back to 2004 when Google used it for Gmail and then Google Maps. Neil Taylor of Myplanet.io has a great article covering the brief history of the JavaScript language.

What factors can you come up with that explain the renewed interest in JavaScript? What advice would you give people wanting to learn JavaScript?

How to Show Empty Categories in WordPress Widgets

By default the WordPress category widget does not show empty categories. Recently a new user asked us if it was possible to display empty categories in WordPress widget to help with his local development. In this article, we will show you how to display empty categories in WordPress widgets.

Display empty categories inside categories widget

First thing you need to do is add this simple code snippet in your child theme‘s functions.php file or a site specific plugin.

add_filter( 'widget_categories_args', 'wpb_force_empty_cats' );
function wpb_force_empty_cats($cat_args) {
    $cat_args['hide_empty'] = 0;
    return $cat_args;
}

This code hooks up our custom function wpb_force_empty_cats to widget_categories_args filter. Inside our function we have modified the option hide_empty and set it to false.

That’s all, you can now drag and drop categories widget to any sidebar or widget ready area on your WordPress site. The category widget will now display empty categories as well.

If you’re working on a local development environment, then we recommend that you add some dummy content to your website for testing purposes.

Also don’t forget to check out our guide on how categories and tags work in WordPress.

If you liked this article, then subscribe to our YouTube Channel for more WordPress video tutorials. You can also find us on Twitter and Google+.

To leave a comment please visit How to Show Empty Categories in WordPress Widgets on WPBeginner.

How to Fix WordPress Keeps Logging Out Problem

Have you ever encountered the frustrating problem where WordPress keeps logging you out? Recently one of our users encountered this issue. She followed all the normal troubleshooting tips like deactivating plugins, emptying cache, clearing browser cookies, and even restoring WordPress from backups. None of the above worked for her. If you’re facing this issue, then we have a solution for you. In this article, we will show you how to fix WordPress keeps logging out problem also known as WordPress session timeout issue.

Why WordPress Keeps Logging Out?

In order to understand why WordPress keeps logging you out, you need to understand how the WordPress login process work.

WordPress sets a cookie in your browser to authenticate a login session. This cookie is set for the WordPress URL stored in your settings section. If you are accessing from a URL that does not match the one in your WordPress settings, then WordPress will not be able to authenticate your session.

Incorrect WordPress URL Settings

As you can see in the settings screenshot above, the WordPress URL and the Site Address are two different URLs (notice one has www. and the other doesn’t).

Fixing The Login Issue

A simple fix for this login issue is to make sure that you have the same URL in your Site Address and WordPress Address fields in your WordPress settings. This means that you need to choose either www or a non-www URL in the both fields.

Login to your WordPress dashboard and go to Settings » General.

Correct WordPress URL Settings

If you can’t access the admin area, then you can update these fields by editing the wp-config.php file.

Connect to your website using an FTP client, and locate the wp-config.php file in your site’s root directory. You need to download this file to your Desktop and open it in a text editor like Notepad. Add this code just above the line That’s all, stop editing! Happy blogging.

define('WP_HOME','http://example.com');
define('WP_SITEURL','http://example.com');

If you prefer to use www in URL, then use this code instead

define('WP_HOME','http://www.example.com');
define('WP_SITEURL','http://www.example.com');

Don’t forget to replace example.com with your own domain name.

Why does this solution work?

Technically speaking, www is a subdomain itself. This means that URLs with www and without it are actually two different domains.

By changing and updating the URLs to the same address, it will fix the issue.

A more detailed technical explanation of www vs naked domain is here.

Also it’s important to note that incorrect settings in WordPress Address and Site Address fields may also result into too many redirect issue in WordPress.

We hope this article helped you fix WordPress session timeout issue. If it doesn’t then checkout how to fix WordPress login page refreshing and redirecting issue.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

To leave a comment please visit How to Fix WordPress Keeps Logging Out Problem on WPBeginner.