Category: WordPress

Create Your Own WordPress Page Builder Plugin From Scratch

2

doge-meme-page-builder

This is the introduction of Custom Page Builder Tutorials Series.

Page Builder is very popular in WordPress. This post is not about how to use page builder. In this tutorial, we are going to build page builder plugin from scratch.

It’s not going to be a complex page builder, a simple one so we can understand how the code works, and possibly use it as base/example for more complex system.

This is the page builder in action:

Table of contents

Read More Create Your Own WordPress Page Builder Plugin From Scratch

How to Add Ads after Read More Tag in WordPress

3

ads-after-more-tag

Today, this site finally reaches a new milestone, 500+ page views/day. Even though it’s very low, I decided to add ads in this blog.

This blog uses full content in archive, and I’m breaking long content using manual “read more tag” (not using excerpt).

Note: You can add more tag using the editor toolbar or using <!--more--> in text editor.

I want to add the Ads in all blog post after read more tag, so technically when visitor click the read more, they will see ads on the top of the page.

It’s tricky because when we use the_content filter, WordPress already transform <!--more--> tag into HTML tag, something like <span id="more-1325"></span>. Here’s the code:

Read More How to Add Ads after Read More Tag in WordPress

How to Add WordPress CPT Admin Menu as Sub Menu

9
cpt-menu-as-submenu
f(x) Photo Tag Admin Page

When I write f(x) Photo Tag plugin, I think it’s best to put the menu under “Media” because it’s simpler, and also make sense.

Sometimes we want to add custom post type admin menu as sub-menu item on other post type or under settings page, because it make sense (not all post type need to be parent menu), and I like this approach because it make WordPress Admin cleaner.

And Here’s how I do that:

Table of contents

Read More How to Add WordPress CPT Admin Menu as Sub Menu

My Contact Form 7 Tips & Hack

cf7-banner

Contact Form 7 is my preferred contact form in most site, It’s free, light weight, and easy to use. It’s full of awesomeness.

Here are several tips for Contact Form 7 user that I use regularly.

Table of contents

Read More My Contact Form 7 Tips & Hack

How to update get_currentuserinfo() for WordPress 4.5+

In one of my plugin, f(x) Profile Dashboard Widget, I use get_currentuserinfo() to get current user data, apparently it’s deprecated in WP 4.5.

Here’s the code I use to replace it with wp_get_current_user(): while maintaining backward compatibility.

Previous Code:

global $current_user;
get_currentuserinfo();

New Code (WP 4.5):

if( function_exists( 'wp_get_current_user' ) ){
    $current_user = wp_get_current_user();
}
else{
    global $current_user;
    get_currentuserinfo();
}

Responsive Fixed Width Sidebar: Why and How?

7

layout-percentage-width

In responsive design, usually we use percentage width for sidebar and content width. It’s easy to do. For example 60% content with 40% sidebar. So both Content and Sidebar width will scale using this ratio.

This approach is widely use, but I don’t personally like it. I prefer to have a fixed width sidebar, like this:

layout-fixed-width-sidebar

Implementing fixed width sidebar in responsive design is actually possible (even though it’s  a little tricky).

In this post I will cover both 2 column and 3 column layout with full example.

Note: I’m not using JS to create the layout, And I also did not use calc() CSS because a lot of browser don’t support this yet.

But why use fixed width sidebar?

Here are several reasons why we might want fixed width sidebar: Read More Responsive Fixed Width Sidebar: Why and How?

What Features To Build in Premium WordPress Theme

There are 3800+ Free WordPress theme available in WordPress.org Theme Repository. Premium theme business is hard because there are tons of free options available.

Of course, to make a user spend $50 for a theme is not easy just by “pretty design”. Theme need to set it self apart from the “free” version so this upgrade worth the money.

Here are several features usually added in Premium version of a theme (other than pretty design + support): Read More What Features To Build in Premium WordPress Theme

List of Popular Plugin for Theme Developer

Not all plugins works well out of the box. Some plugin require a theme support, from simple CSS tweak to template files modification.

As a theme developer, it’s hard to choose which plugins I should support in my theme. It takes time to do this, and theme developer also need to “watch” these plugins to make sure all is working well for latest version of each plugins.

Popular plugin such as WooCommerce also have large user base, and it can increase theme popularity. So, without further ado, here is the list. Read More List of Popular Plugin for Theme Developer

I think WordPress plugin review team decision to no longer accept framework is wrong. And this is why.

2

plugin-wp

Recently WordPress plugin review team write a reminder post “Please do not submit frameworks” (Ipstenu/Mika Epstein).

And the reason is:

We require that plugins be useful in and of themselves (even if only being a portal to an external service). And while there are many benefits to frameworks and libraries, without plugin dependency support in core or the directory, it becomes another level of hassle for users.

In a comment, Darrin, who had a framework plugin (Advanced Term Fields) submitted and approved last month asked:

Are you saying the best way to handle this scenario is to include the parent framework in each child plugin, as opposed to alerting the user that “This plugin requires XXX plugin in order to function properly”?

And Mika answered:

Currently, yes. That would have been the best way.

I don’t really agree with this.
I think it should go to the opposite direction. And this is why. Read More I think WordPress plugin review team decision to no longer accept framework is wrong. And this is why.

How to use Customize API “postMessage” Method for Color Options

2

customizer-color-option-postmesssage

I’m not actually a fan of themes with tons of design options. I think as a designer, it’s our job to design theme.

However, it’s not always a bad idea to let user express their creativity.

Last weekend, I create another theme. Nevertheless, a simple one with classic design. And this time I create several color options for it. Usually I prefer “refresh” transport method for my themes, because it’s works, easier to code (and maintain in the future). But because this is a simple theme, I get it done relatively quickly. So I decide to “play” and use “postMessage” transport method for the color options.

There are problems I found when implementing this, and I want to share my solution.

Here’s the theme, you can download and check the source code:

Download or Fork at Github

Read More How to use Customize API “postMessage” Method for Color Options

How To Remove WordPress Admin Color Scheme Option

6

Admin-Color-X

Well, there was a time when I need to remove admin color scheme option. And this how I do that.

I was building a complex site with several user role, and to make it easier to know which user role I use to login, I set each user role to use different admin color scheme and disable admin color option in profile edit.

It’s actually pretty simple. And I will also explain the coding process, how to learn to code something in WordPress. (I’m sure it’s pretty useful trick if you wants to learn to code/problem solving in WP). Read More How To Remove WordPress Admin Color Scheme Option