Working on ThemeLab

Our parent company, WPBeginner has acquired ThemeLab. It was an active WordPress blog ran by  Leland Fiegel. He usually published how to articles, tips and tutorials about WordPress. Leland also distributed several free themes, many of them are still used on blogs.

Syed Balkhi, CEO and founder of WPBeginner outlined plans for ThemeLab in the announcement post. We had ThemeLab for a while and our development team was working hard on creating some amazingly beautiful themes to go with the launch. Meanwhile, our editorial team worked on the content.

These days, we are working on rewriting and updating old articles, at the same time we will be publishing new content as well. There are some very useful old posts, that we need to update with new screenshots and information. Going through old content, also reminds me how much WordPress has changed over time.

We have retired all the free themes distributed by Leland. ThemeLab will continue to offer free themes. Right now you can download Slipstream our first free theme for personal blogs. It is fully responsive, mobile friendly, comes with ThemeLab about widget, and it is super fast.

If you really want to try something even more awesome, then get ModernMag. It is beautiful and unlike other WordPress magazine themes, it is extremely simple to setup.

WordPress themes need to be simpler. The users want themes that look like their demos without going through too many complex options. Hopefully ThemeLab will be able to fulfill that need.

Image file size display in WordPress media uploader

WordPress Idea: Displaying Image File Size in Media Uploader

Many web publishers and bloggers are concerned about the page load speed and time. It is common knowledge that speed affects how search engines rank a website in search results. One of the heaviest element on any web page is often images. The more images you use the more time it takes for a page to load completely.

I noticed that when we upload an image in WordPress using the media uploader while writing a post, WordPress shows us image dimensions right below the filename. Today, I submitted an idea to display image file size as well. Even though most users are now used to optimizing images before uploading them to WordPress. However, sometimes you may upload an image without optimizing it first. This tiny little text could be a nice reminder to check your image size before you finally insert it into post.

Here is a mockup of my idea:

Displaying image file size in media uploader

If you like this idea, then I will need your help. Please visit this idea on WordPress Ideas and vote for it.

Update: I submitted a feature request ticket to the core trac. It is currently marked for future release. QasAshraf is currently working on a patch.

Shortcode Output Appearing On Top of Post Content in WordPress

While browsing WordPress support forums, I often see threads where users are asking the question ‘Why my shortcode output jumps to the top of the page content?’. Users asking this question are using a shortcode which outputs something and instead of appearing at the exact position where shortcode is placed, their shortcode output appears above rest of the post content.

The problem is actually very simple. The function executed by shortcode should return the output instead of echoing it.

Example of a shortcode using echo to display output:

function bad_shortcode_function($atts, $content = null) { 
echo '<p>This is the output of shortcode</p>'; 
}
add_shortcode('bad-shortcode', 'bad_shortcode_function');  

The code displayed above would echo the given output but when you add more content to the post or page where shortcode is placed this echo will not appear where the shortcode is placed. The correct way to use shortcodes is to use return. Like this:

function good_shortcode_function($atts, $content = null) { 
$string = '<p>This is the output of shortcode</p>'; 
return $string; 
}
add_shortcode('good-shortcode', 'good_shortcode_function');   

Now if you want to output multiple lines of HTML you can add multiple lines to your output string like this:

function good_shortcode_function($atts, $content = null) { 
$string = '<p>This is the output of shortcode</p>'; 
$string .= '<p>This is the second line of output appended to the first string</p>';
$string .= '<p>And the third line</p>';
return $string; 
}
add_shortcode('good-shortcode', 'good_shortcode_function'); 

Hopefully this will help some new plugin developers and WordPress users who are trying their hands on shortcode for the first time. PS: if you recently worked on some awesome shortcode, please feel free to share the snippet below.

Best Social Media Plugin for WordPress: Floating Social Bar

I have tried many social media plugins on different WordPress sites. During my previous jobs, freelance work, and on my personal blogs. The problem with most WordPress social media plugins is that they are usually full of features that I don’t need. Just like most other bloggers, I also want simple buttons that make it easier for users to share content. I don’t want to copy Mashable, or TechCrunch, I just want something that is not too obstrusive and just works. In my quest for best social media plugin I often ended up with something slow and bloated. Recently, my boss Syed Balkhi released Floating Social Bar plugin which solved the problem for me.

Best Social Media Plugin

Like I said earlier that most bloggers just want a simple and elegant solution to add social media buttons with their articles and posts. I think Floating Social Bar solves this problem.

Floating social bar in action

Speed: Floating social bar loads faster than other social media plugins for WordPress. Most other plugins just slow down your site too much and ruin the page speed and user experience.

Compact: There are just a few social media websites included in the plugin. These are the websites that most people actually use and are more likely to share your content on these websites.

Non-Obstrusive: Unlike other social media plugins which scroll down and follow your eye balls, Floating social bar sticks to its position at the top and gets out of the way. It is really annoying when I am reading an article and a huge ugly social media widget is right next to the text. Floating social bar sticks at the top and if you want you can disable that feature too.

Who should use Floating Social Bar?

If you care about user-experience on your website and find other plugins bloated and difficult to use and configure then you will like Floating Social Bar. It is very easy to install and set up. Simple install and activate Floating Social Bar plugin and go to Settings » Floating Social Bar to configure the plugins. Drag and drop social media websites you want to include and add your twitter username. Save your changes and preview your website.

Floating social bar plugins

Previously when I was using Digg Digg I had to add custom CSS to draw borders that separated post title and content from the social sharing button. Floating Social Bar works out of the box and the base CSS should look good with most WordPress themes.

Conclusion: Floating social bar is a simple and easy way to add social media buttons to your posts. It is elegant, usable and does not slow down a site. Give it a try on your website.

Out-Dated and Poorly Written WordPress Tutorials

It is fun to make sense of a poorly written tutorial with bad code. Last night I found an old tutorial with a nice idea but some mistakes with the code. I decided to write a better version of that tutorial. Fixing it was like a puzzle, and I enjoyed it. Now we will be publishing a more accurate and up to date version of that tutorial on WPBeginner, which will actually help more people.

Many WordPress businesses usually have a blog where they occasionally publish tutorials. These tutorials are mostly submitted by guest bloggers, who are also either running a small WordPress business of their own, or promoting themselves as freelancers. I feel that WordPress businesses should have blogs more focused on their products and information related to it. This would make those blogs more interesting. Correct me if I am wrong, but I think that using blogs to bring traffic and using them as link bait is a thing of past now.

But who am I to judge any one, if this strategy works for their business, then I guess there is nothing wrong with it. However, this strategy sometimes affects the users. Who come to these blogs, thinking that it’s a nice brand, they must have written something great about the problem I am facing. They land on a guest post which is not actually written by the company behind the website. They follow the tutorial, which may or may not work. The tutorial may have poorly written code snippets which these unsuspecting users add to their sites. The guest blogger may not have done that on purpose, but they are very less likely to revisit that post and update their code.

Another problem that I have noticed is that sometimes these tutorials can get very out-dated. At WPBeginner we regularly try to update our old articles. But I have not seen much effort in this regard on other websites. I think it is wonderful that they can attract guest bloggers to write such lengthy tutorials. But they should also pay someone to keep these tutorials up to date. It should be an actual job where a person or team actually keeps tutorials up to date.

What do I have to learn to write my own blog template from scratch?

Answer by Noumaan Yaqoob:

Start with basic HTML and CSS. Write plain HTML/CSS documents using a plain text editor such as notepad. This will strengthen your understanding of HTML, CSS, web design, layout and formatting, etc.

Blogger uses template tags so you need to learn how those blogger tags are used in an HTML+CSS template. Download free sample templates from the web and study the code. It might look complex at first but if you look at it with concentration you will realize that it is not that complex and quite easy to do.

A basic understanding of Javascript would also benefit you. Javascript is client scripting, its more advanced form such as AJAX and jQuery allow you to write client side code that communicates with the server. But this comes under advance development, I guess you should come to Javascript, and jQuery after familiarizing yourself with PHP.

For WordPress you should learn basic PHP programming. Like variables, arrays, if, else, while, loops. When learning PHP use the official PHP manual it is really good PHP Manual – Manual

To set up a PHP MySQL and Apache development environment on your computer you can try WAMP or XAMPP. How to Install WordPress on your Windows Computer Using WAMP Or use MAMP if you are on a Mac, How to Install WordPress Locally on Mac using MAMP

WordPress has some coding practices which are used by most WordPress themes and plugins. You will get familiar with those by studying other people's code. The default WordPress Themes such as Twenty Twelve are a great starter point to understand template hierarchy. Each WordPress templae uses template tags and functions inside it. Which are actually functions pre-defined in WordPress core files. When building themes in WordPress you don't edit the core files. Instead you use these functions through out your theme. A good starting point for learning theme development is WordPress Codex:
Site Design and Layout

Each blogging and CMS platform has their own template engines . However, they all use HTML+CSS, Javascript and they all have template tags which tell the platform what out put to display. Study other people's code and use it as a starting point for your practice will help you learn quicker.

View Answer on Quora

Why edit-tags.php and Why not edit-terms.php

Today at work, I was writing about categories and tags in WordPress. I noticed something that looks strange to me and I decided to share it here.

Apparently when a user edits a category, tag or any term. It is handled by edit-tags.php file which takes parameters like tag_ID, taxonomy, action, post type.

Shouldn’t it be called edit-terms.php and have term_id instead of tag_ID? This will improve user’s understanding of how taxonomies work. They will start to understand that category and tag are taxonomies and all their categories and tags are terms inside those taxonomies. I am sure this might have come to core developers mind but they probably decided not to do that, I am just curious why?

I think renaming edit-tags.php to edit-terms.php makes sense. Any thoughts?

What is the best Facebook-like plugin for WordPress?

Answer by Noumaan Yaqoob:

There is an official Facebook plugin (WordPress › Facebook " WordPress Plugins) in the WordPress repository. There are a few reasons which make it a much better choice:

1. Facebook itself is one of the contributors of the plugins in coordination with Automattic the company behind WordPress.com. Other contributors to the plugin is an impressive list of developers, including Samuel Wood.

2. It is regularly maintained, tested, and used by thousands of websites. So if there is a bug or something it quickly gets fixed.

3. It is easy to use and integrate into any WordPress powered website.

My second choice would be Simple Facebook Connect (Simple Facebook Connect).

1. Simple Facebook Connect is very easy to use and is written by Samuel Wood who is one of the core contributors of WordPress. This means that the plugin follows the coding practices of WordPress.

2. It is very well documented, and the plugin author himself is very active on WordPress forums. Most questions related to the plugin get resolved quickly.

The answer also depends on which features you need for your website. For example, if you just need a like a button along with other social networking buttons such as twitter and google+ then you probably don't need either of above mentioned plugins, you should then use a plugin like Digg Digg WordPress › Digg Digg " WordPress Plugins.

You can also obtain code for Facebook social plugins and implement them into your website. Social Plugins this way you can only get the plugin you need.

View Answer on Quora