3.7 out of 5
3.7
34 reviews on Udemy

WordPress Theme + WordPress Plugin Development For Beginners

Introduction to Wordpress Theme Development and Wordpress Plugins
Instructor:
The Apps Firm
10,796 students enrolled
English [Auto]
Learn to Develop Wordpress Themes
Learn to Develop Wordpress Plugins
Learn to sell Wordpress Themes and Plugins on sites like Themeforest

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.

Introduction

1
Introduction Wordpress Theme Supports

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’]);

2
Register Post Type and Sidebar

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.


3
Register Menus

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”

]);

?>


Basic Frontend

1
Basic Frontend Function

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() ?>


2
Frontend Dynamic

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(){

};

?>


3
Frontend Dynamic

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”


]);

?>


4
Dynamic Post Types

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() ?>


5
Page Templates and Comment

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() ?>


6
File Details

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.


Redux

1
Introduction With Redux


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.


2
Create Section, SubSection

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’

]);


3
Redux Field

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’

]

]

]);


4
Advance Redux Field

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’,

]

]

]);

5
Action Hook

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


6
Project Tutorial

Plugin Development

1
Basic Plugin Intro

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

*/

?>


2
Plugin Settings

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’);


3
Short Codes

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’)


4
Finalization

Themeforest

1
Themeforest Selling Tutorial
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
3.7
3.7 out of 5
34 Ratings

Detailed Rating

Stars 5
9
Stars 4
13
Stars 3
7
Stars 2
3
Stars 1
2
0a71b31873d4f45758e1eeb1e2233367
Course available for 2 days
30-Day Money-Back Guarantee

Includes

4 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion
Don't Miss Any Course Join Our Telegram Channel Join Channel
+ +