Customize Blocks Using Settings Sidebar – Gutenberg Block Development

In previous blog post we have developed a custom Gutenberg block i.e Colored Lines which adds colored lines in post/page editor. After that we have learned how to use Block Controls (Block Toolbar) to change the alignment of the colored lines. In this tutorial blog post, we will use the Settings Sidebar to add the options to change the color of the Colored Lines Gutenberg block.

forward

What Are Block Controls and Attributes – Gutenberg Block Development

In previous post, we have learned how to devlelop a custom Gutenberg block using ES5 syntax. We have developed a custom Gutenberg block which adds colored lines in Post/Page content. That block is not customize-able yet. In this tutorial we will learn how to change the appearance of the colored lines using block controls and attributes.

forward
Develop Custom Gutenberg Block Using ES5 Syntax – Gutenberg Block Development

WordPress released a new post/page editor (Gutenberg Editor) in version 5.0 which improves the post/page development. The editor consists of some built-in blocks which can be used to add different type of content in post/page. In this post we will discuss how to develop custom Gutenberg block using ES5 syntax.

forward
How To Develop Hello World WordPress Block – ESNext and JSX Syntax

WordPress blocks are a new way to add content inside WordPress Post/Page editor. To know more about WordPress blocks visit our blog post titled “What Are WordPress Blocks – An Introduction”. In this blog post we will learn how to develop Hello World WordPress block. This block, when added in Post/Page editor will simply display a message “Hello World”.

forward

JavaScript Build Setup For Development of WordPress Blocks – NodeJS

JavaScript build setup helps to speed-up the development of WordPress blocks and creates the two main files i.e. build/index.js and build/index.asset.php which are used while developing the actual WordPress block inside plugin or functions.php of WordPress installation. The index.js file contain the compiled code (from ESNext and JSX syntaxt to plain JavaScript) for the actual WordPress block and index.asset.php file contains the dependencies and version information (generated from the used packages) to be injected while registering the WordPress block.

forward
What Are WordPress Blocks – An Introduction

WordPress blocks are a new way to create and organize content in WordPress editor (i.e. Gutenberg Block Editor or Block Editor) introduced in the version 5.0 of the WordPress. Now every element like paragraph, heading, quote, code etc. is a WordPress block with customization options which allows the user to have more control over the design and presentation of the content.

forward

WordPress Plugin Development Cheat Sheet

WordPress plugins are used to extend the functionality of a WordPress website. There are about 51,000+ plugins available in WordPress’s official plugins repository at the writing of this post. There are scenarios when you need to develop your own WordPress plugin for some specific task/requirement. In this blog post, we present some useful functions, hooks, filters, and best practices for custom WordPress plugin development.

forward

How To Develop Custom WordPress Plugin from Scratch using OOP

This post describes the exact step to develop a custom WordPress plugin from scratch using Object-Oriented Programming. Go to https://wppb.me/, fill the form and download your zip file Edit the main file (plugin-name.php) and update texts like 'description' if you want Create all custom post types, make sure that the custom post type title is not longer than 20 characters otherwise you will get an error 'invalid post type' function create_post_uni_lms_classes_std() { register_post_type( 'uni_lms_classes', array( 'labels' => array( 'name' => __('Classes','unilms'), 'singular_name' => __('Class','unilms'), 'add_new' => __('Add New','unilms'), 'add_new_item' => __('Add New Class','unilms'), 'edit' => __('Edit','unilms'), 'edit_item' => __('Edit Class','unilms'),...
forward

How To Install WordPress At LocalHost Wamp Server – WordPress Tutorials

In this blog post we will show you a video tutorial to install WordPress at localhost wamp server. This tutorial covers the steps from downloading WordPress, installing it at localhost wamp server, database creation and linking with WordPress etc. See following video tutorial for step by step guide.  ...
forward