Wordpress Theme + Wordpress Plugin Development For Beginners
- Description
- Curriculum
- FAQ
- Reviews
A Beginners crash course on WordPress theme and WordPress Plugins Development
Are you looking for an introduction to WordPress plugin development that will discuss all of the important steps and hold your hand along the way? If so, you’re in luck. This tutorial will outline the basics of what you need to know about designing your own plugins and some pointers on best practices.
The Apps Firm provides services of WordPress theme development and WordPress plugin development. We offer a full variety of WordPress development services together with custom WordPress CMS development, plugin development and WordPress theme customization.
-
1Introduction Wordpress Theme SupportsVideo lesson
Step: 01
You have to Choose Your Interface Design, Theme Name.
Step: 02
Make a Theme Folder, make important files. At first you have to make index.php, functions.php and style.css
Step: 03
Make an Identity of Theme. Open style.css File in your favorite editor. Now we make an identity of this theme. How? These Codes are very easy and related to our Output. And you have to put these codes into comment tags.
/*
Theme Name: The Apps Firm
Theme URI: https://appsfirm.com
Author: Paritosh
Author URI: #
version: 1.0.1
Description: Lorem Ipsum Color Dolor Sit Amet
Tags: appsfirm, the apps firm
*/
Caution: Though It is written in CSS, No closing (;) Will be allowed.
Now We have to set image for Theme. We will choose a 600 X 450 px image and it must be renamed screenshot.png
At fast, we have to know about hook. Hooks are 2 types, action hook and filter hook.
We will keep all codes in a function and we must call it by add_action();
Great, we will activate our theme now. After Activating, we are seeing the theme is like a new born video. So we need support to run it properly. We have to add theme support for getting features. Please follow the code and try to understand:
<?php
add_theme_support(‘menus’);
?>
That’s mean, We are adding support for menus. We will add menus,widgets,custom-header,custom-background,post-thumbnails,custom-logo. It should be in php block.
For Widgets: add_theme_support(‘widgets’);
For Header Option: add_theme_support(‘custom-header’);
For Background Option: add_theme_support(‘custom-background’);
For Featured Image of Post: add_theme_support(‘post-thumbnails’);
For Logo: add_theme_support(‘custom-logo’);
For Post Format: add_theme_support(‘post-formats’, [‘video’, ‘audio’, ‘gallery’]);
-
2Register Post Type and SidebarVideo lesson
Welcome to Our Class! In this class we will learn about register sidebar and register custom post type.
Now, Click on widgets. Here we can see the widgets but We don’t find a sidebar to keep the widgets. So we have to register a sidebar to keep the widgets.
<?php
register_sidebar([
“id” => 1,
“name” => “Main Widget”,
“description” => “This is Our Main Sidebar”
]);
?>
We want to register a custom post type in the dashboard. In Customization, When We Install a Plugin, we see a custom post type. Now we will register a custom post type:
<?php
register_post_type('notice', [
'public' => true,
'labels' => [
'name' => 'Notice',
'all_items' => 'All Notice',
'add_new' => 'Add Notice',
'add_new_item' => 'Add New Notice',
'featured_image' => 'Notice Image',
'set_featured_image' => 'Add Notice Image',
'remove_featured_image' => 'Remove Notice Image'
],
'supports' => ['title','editor','thumbnail'],
'menu_icon' => 'dashicons-groups',
'menu_position' => 1
]);
?>
Great, we have Completed Our Backed Part Development for Primary level. We have to develop More in Future, If We Want Advance Level Features, we have to learn frameworks. We will see those in Future. Let’s Get Started Frontend Development.
-
3Register MenusVideo lesson
Welcome to Our Class! In this class, We will learn about register nav menus.
Let’s go and open appearance -> menus. In Menus, you will not find display location. So we have to register nav menu bar now. Follow the code:
<php
register_nav_menu(‘menuid’, ‘menu-name’);
?>
First parameter is called as menu id and 2nd parameter is called as menu name. We can make multiple menus by a function. For that, We have to make a different way:
<?php
register_nav_menus([
“topmenu” => “Top Menu”,
“navmenu” => “Nav Menu”
]);
?>
-
4Basic Frontend FunctionVideo lesson
Frontend Development
In Frontend Development, Mainly We make dynamic our Contents.
What is Dynamic?
Dynamic means We upload and control in our wp dashboard and it affects the frontend output.
1) Make Dynamic Language Settings: <?php language_attributes(); ?>
2) Make Dynamic Charset : <?php bloginfo(‘charset’); ?>
3) Set / Dynamic Title: <?php bloginfo(‘title’); ?>
4) Set / Dynamic Tagline: <?php bloginfo(‘description’); ?>
5) To set Site URL: <?php echo site_url(); ?>
6) Make Dynamic Image: <?php echo get_template_directory_uri(); ?>
7) Set Connection With wordpress: <?php wp head(); ?> and <?php wp footer(); ?>
8) Make Dynamic Header: <?php get_custom_header(); ?>
9) Make Dynamic Background: <?php body_class() ?>
-
5Frontend DynamicVideo lesson
Frontend Development
In Frontend Development, Mainly We make dynamic our Contents.
What is Dynamic?
Dynamic means We upload and control in our wp dashboard and it affect the frontend output.
1) Make Dynamic Language Settings: <?php language_attributes(); ?>
2) Make Dynamic Charset : <?php bloginfo(‘charset’); ?>
3) Set / Dynamic Title: <?php bloginfo(‘title’); ?>
4) Set / Dynamic Tagline: <?php bloginfo(‘description’); ?>
5) To set Site URL: <?php echo site_url(); ?>
6) Make Dynamic Image: <?php echo get_template_directory_uri(); ?>
7) Set Connection With wordpress: <?php wp head(); ?> and <?php wp footer(); ?>
8) Make Dynamic Header: <?php get_custom_header(); ?>
9) Make Dynamic Background: <?php body_class() ?>
10) To Show Dynamic Menu:
<?php
wp_nav_menu([
‘theme_location’ => ‘menu_id’,
‘container’ => ‘’, //If You Want to make container blank
‘container_id’ => ‘set a id of container’,
‘container_class’ => ‘set a class of container’,
‘menu_id’ => ‘set a id of menu’,
‘menu_class’ => ‘set a class of menu’,
‘fallback_cb’ => ‘function_for_backend’
]);
?>
Here, fallback_cb is used for a special reason. If any nav_menus will be not set, then fallback_cb will control the frontend output.
In here, We have to make a code in functions.php. We have to call the function of fallback_cb.
<?php
function_for_backend(){
};
?>
-
6Frontend DynamicVideo lesson
Welcome to our class! Today we will learn about how to make a sidebar dynamic.
To Make Sidebar Dynamic: <?php dynamic_sidebar(); ?>
Here also, We need to put some code in functions.php for control sidebar. In here, We can change the defaults tag before and after widget. It will be necessary sometimes.
<?php
register_sidebar([
“id” => 1,
“name” => “Main Widget”,
“description” => “This is Our Main Sidebar”,
“before_widget” => “starting tag”,
“after_widget” => “closing tag”,
“before_title” => “starting tag”,
“after_title” => “closing tag”
]);
?>
-
7Dynamic Post TypesVideo lesson
Welcome to our class! In this class, we will learn about how to make post type dynamic.
1) To make Posts Dynamic:
i) Make post box dynamic: <?php while(have_posts()) : the post(); ?>
<?php endwhile(); ?>
ii) Make Title Dynamic: <?php the_title(); ?>
iii) Make Image Dynamic: <?php the_post_thumbnail(); ?>
iv) Make Author Dynamic: <?php the_author(); ?>
v) Make Date Dynamic: <?php the_time(‘F d, Y’); ?>
vi) Make Time Dynamic: <?php the time(‘g:i a’); ?>
vii) Make Content Dynamic: <?php the_content(); ?>
viii) Make Button Dynamic: <?php the_permalink(); ?>
ix) Make a summary of post: <?php wp_trim_words(get_the_content(),15, false) ?>
2) To make custom post type dynamic:
i) Set that Custom Post Type as output:
<?php $v = new WP_Query([
‘post_type’ => ‘post_id’,
‘posts_per_page’ => 3
]); ?>
ii) Make post box dynamic: <?php while($v-> have_posts()) : $v->the post(); ?>
<?php endwhile(); ?>
iii) Make Title Dynamic: <?php the_title(); ?>
iii) Make Image Dynamic: <?php the_post_thumbnail(); ?>
iv) Make Author Dynamic: <?php the_author(); ?>
v) Make Date Dynamic: <?php the_time(‘F d, Y’); ?>
vi) Make Time Dynamic: <?php the time(‘g:i a’); ?>
vii) Make Content Dynamic: <?php the_content(); ?>
x) Make Button Dynamic: <?php the_permalink(); ?>
xi) Make a summary of post: <?php wp_trim_words(get_the_content(),15, false) ?>
xii) To get Thumbnail Id: <?php get_post_thumbnail_id($post ->ID); ?>
xiii) To get attachment link: <?php wp_get_attachment_url() ?>
-
8Page Templates and CommentVideo lesson
Description About Each File
header.php
In this file, we put the code of header. First, we have to look which is exist for the head. Every Element of header tag will be staying here.
footer.php
In this file, we will keep the code which I want to show as a footer in every page.
sidebar.php
In this file, we will keep the code which I want to show as a sidebar in every page.
index.php
In this file we will keep the posts,custom post types and blog page’s element.
functions.php
In this file, we will keep the code of all theme supports and backend development code and custom post type, custom sidebar, custom menu etc.
404.php
In this page, we will keep that content which I want to show if anyone try to input invalid links.
page.php
In this page will keep code to show every page as individual. The code is given below:
<?php while(have_posts()): the_post() ?>
<div class=”page-content”> <?php the_content() ?> </div>
<?php endwhile; ?>
single.php
In this page, we will show every post individually. So, we should keep the code for showing post, and add some to get comment box and comment countdown. You can set code for getting advance feature of single post showing page.
For set Comment Countdown, we have to set:
<?php comment_popup_link(‘No Comment’,’One Comment’,’% Comments’) ?>
Here, 3 parameters is available in function. First for, if no comments have appeared. 2nd one, If one comment is available. 3rd is for more than 1 comment. The percentage mean the number of comment.
For set comment box, we have to set:
<?php comment_template() ?>
-
9File DetailsVideo lesson
Welcome to Our Class! In this class, we will learn about the files of the theme directory.
Page Templates
1) header.php => To Keep Header Code
2) footer.php => To Keep Footer Code
3) sidebar.php => To Keep Sidebar Code
4) single.php => To Keep Entire Post
5) index.php => To Keep Blog Code
6) page.php => To Maintaining Pages
7) 404.php => To Maintain Wrong Pages
8) functions.php => Backend Development
9) front-page.php => To set any template as front page
Include Pages
1) Attach Header => get_header();
2) Attach Footer => get_footer();
3) Attach Sidebar => get_sidebar();
Description About Each File
header.php
In this file, we put the code of header. At First, we have to look which is exist in <head></head> tag. Every Element of header tag will be stay here.
footer.php
In this file, we will keep the code which I want to show as a footer in every page.
sidebar.php
In this file, we will keep the code which I want to show as a sidebar in every page.
index.php
In this file we will keep the posts,custom post types and blog page’s element.
functions.php
In this file, we will keep the code of all theme supports and backend development code and custom post type, custom sidebar, custom menu etc.
404.php
In this page, we will keep that content which I want to show if anyone try to input invalid links.
page.php
In this page will keep code to show every page as individual. The code is given below:
<?php while(have_posts()): the_post() ?>
<div class=”page-content”> <?php the_content() ?> </div>
<?php endwhile; ?>
single.php
In this page, we will show every post individually. So, we should keep the code for showing post, and add some to get comment box and comment countdown. You can set code for getting advance feature of single post showing page.
For set Comment Countdown, we have to set:
<?php comment_popup_link(‘No Comment’,’One Comment’,’% Comments’) ?>
Here, 3 parameters is available in function. First for, if no comments have appeared. 2nd one, If one comment is available. 3rd is for more than 1 comment. The percentage mean the number of comment.
For set comment box, we have to set:
<?php comment_template() ?>
front-page.php
In this page, we will keep the template of front page.
-
10Introduction With ReduxVideo lesson
Theme Options
Theme option is the most important feature of a WordPress theme. For This, We have to use any PHP framework. We will use redux framework.
Steps:
1) We have to download redux from internet.
2) Then we have to open a folder in our theme directory, named opt and we will keep the files of redux here.
3) Then we have to make link with two files in redux framework. One is opt->ReduxCore -> framework.php and another one is sample-> sample-config.php
4) We have to write the code in functions.php:
<?php include “opt/ReduxCore/framework.php”; ?>
<?php include “sample/sample-config.php”; ?>
5) Then we have to set arguments in redux. We will change arguments by below steps:
a. Go to opt-> sample-> sample-config.php
b. Find the set argument part, and if we want to keep it in appearance, we have to change the menu type. We will make it submenu.
c. Then we have to change the name from menu title and page title.
d. Convert all true into false from google_update_weekly to last.
e. Recognize section, subsection, field. Then add or delete.
f. Then If you want to more fresh. Delete the admin bar, social, panel intro,help section.
-
11Create Section, SubSectionVideo lesson
Welcome to Our Class. In This Class, We will learn How to Make Section and SubSection.
1) Now we will make sections as per our requirement. For creating a section, we have to write:
Redux::setSection($opt_name,[
‘title’ => ‘General Settings’
]);
2) If we want to change the icon, we have to go for elusive icon. The Elusive icon web refferance: http://elusiveicons.com/icons/
If we want to change the icon, the code will be,
Redux::setSection($opt_name,[
‘title’ => ‘General Settings’,
‘icon’ => ‘el el-car’
]);
3) If we want to make a sub section, then we have to code:
Redux::setSection($opt_name,[
‘title’ => ‘General Settings’,
‘icon’ => ‘el el-car’,
‘subsection’ => ‘true’
]);
-
12Redux FieldVideo lesson
Welcome To Our Classs! Today We will learn about Redux Fields.
1) If we want to make field, Then we have to code like these: (Ex: Custom Css)
Redux::setSection($opt_name,[
‘title’ => ‘General Settings’,
‘icon’ => ‘el el-car’,
‘fields’ => [
[
‘title’ => ‘add custom css’,
‘type’ => ‘ace_editor’,
‘id’ => ‘ccss’,
‘mood’ => ‘css’
‘theme’ => ‘idle’
]
]
]);
2) Types are: editor,ace_editor,text, email,switch,color,media
3) If we want to make a range/slide, then we have to write:
Redux::setSection($opt_name,[
‘title’ => ‘General Settings’,
‘icon’ => ‘el el-car’,
‘fields’ => [
[
‘title’ => ‘add custom css’,
‘type’ => ‘slider,
‘id’ => ‘slider’,
‘max’ => ‘1300’,
‘min’ => ‘960’,
‘step’ => ‘10’
]
]
]);
-
13Advance Redux FieldVideo lesson
Welcome to Our video! In this video, we will learn about more and advance level field. Let’s get start:
1) To show/hide the topbar, we have to make code in 2 files. At first, in sample- config.php :
Redux::setSection($opt_name,[
‘title’ => ‘General Settings’,
‘icon’ => ‘el el-car’,
‘fields’ => [
[
‘title’ => ‘add custom css’,
‘type’ => ‘switch’,
‘id’ => ‘ccss’,
]
]
]);
2) To upload a File:
Redux::setSection($opt_name,[
‘title’ => ‘General Settings’,
‘icon’ => ‘el el-car’,
‘fields’ => [
[
‘title’ => ‘add custom css’,
‘type’ => ‘media’,
‘id’ => ‘ccss’,
]
]
]);
-
14Action HookVideo lesson
Action Hook
Hook is called the blood of WordPress. Action Hooks are a very useful tool in WordPress and they are used to perform functions (actions) in specific places of a theme or plugin. Many themes and plugins, such as Total, use action hooks as an easy way for users to modify the output of the project or to add their own custom code.
1. do_action() – where the “hooked” functions are run
2. add_action() – attaches a function to a hook as defined by do_action
3. remove_action() – removes a function attached to a specified action hook
Ex:
<?php
add_action(‘init’,’function_name’)
?>
Here, you can get all action hook : https://adambrown.info/p/wp_hooks/hook
-
15Project TutorialVideo lesson
-
16Basic Plugin IntroVideo lesson
Wordpress Plugin Development is 90% same as wordpress theme development. Before learning wordpress plugin development, it is necessary to learn theme development properly.
Basic Need:
PHP Fundamental,PHP OOP,Javascript,AJAX,MySQL
________________________________________________________________________
Plugin Desription: (Far Same as Theme Development)
<?php
/*
Plugin Name: Our Team
Plugin URI: #
Author: Amitav
Author URI: #
Version: 1.0.1
Description: It is a Plugin
*/
?>
-
17Plugin SettingsVideo lesson
To add any css or js file of plugin:
function conn_css(){
wp_enqueue_style(‘id’, get_template_directory_uri(). ‘/css/style.css’);
wp_enqueue_script(‘id’, get_template_directory_uri().‘/js/op.js’);
}
add_action(‘wp_enqueue_scripts’, ‘conn_css’);
For Plugin:
function conn_css(){
wp_enqueue_style(‘id’, PLUGINS_URL(‘css/style.css’,__FILE__));
wp_enqueue_script(‘id’, PLUGINS_URL(js/op.js’,__FILE__),[‘jquery’],true,true);
}
add_action(‘wp_enqueue_scripts’, ‘conn_css’);
-
18Short CodesVideo lesson
Welcome to our class! Today’s Class Topic is How to make shortcodes .
<?php
make shortcode:
function team_shortcode(){
ob_start();
?>
// Here will be your all codes, functions, html
<?php
Return ob_get_clean();
}
Add_shortcode(‘team’,’team_shortcode’)
-
19FinalizationVideo lesson

External Links May Contain Affiliate Links read more