This is Part #4 (Final) of Custom Page Builder Tutorials Series. Read the intro here.
You can download / check github repo for example plugin:
And here’s the video of the plugin in action:
Let’s start.
Table of contents
WP Page Builder From Scratch #3: Data Structure and Saving Page Builder Data
This is Part #3 of Custom Page Builder Tutorials Series. Read the intro here.
In earlier tutorial, I cover all about the page builder design, and how to make all the control works (create, delete, and reorder rows).
In this post I want to explain how I structure the data and save it as custom fields. Specially in how to update the row order number so we can properly save each rows data.
Download example plugin to follow tutorial easier:
Table of contents
Read More WP Page Builder From Scratch #3: Data Structure and Saving Page Builder Data
WP Page Builder From Scratch #2: Features, Design, and UI
This is Part #2 of Custom Page Builder Tutorials Series. Read the intro here.
In this post I will explain how to create page builder from this:
to this:
to this fancy drag-and-drop UI:
Table of contents
To follow this tutorial easier, you can download the source code for this tutorial:
Read More WP Page Builder From Scratch #2: Features, Design, and UI
WP Page Builder From Scratch #1: Create Page Builder Page Template
This is Part #1 of Custom Page Builder Tutorials Series.
Read the intro here.
In this post, I will explain:
Table of contents
So, the basic idea is to register “Page Builder” page template, and use it to toggle/switch between Visual Editor and Page Builder when user change the page template.
To follow this tutorial easier, you can download the source code:
Read More WP Page Builder From Scratch #1: Create Page Builder Page Template
Create Your Own WordPress Page Builder Plugin From Scratch
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
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:
How to Add WordPress CPT Admin Menu as Sub Menu
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
My Contact Form 7 Tips & Hack
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
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();
}
To Do List Overload
I feel that I try to do too much this time. Not only I’m busy with client work, but I also have tons of unfinished project. It’s time to be honest and list all what I want to do and prioritize my tasks. Read More To Do List Overload
Responsive Fixed Width Sidebar: Why and How?
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:
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?