Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

WordPress Theme Development for Themeforest with Elementor

Name: WordPress Theme Development for Themeforest with Elementor
Rating: 3.9 (64 reviews)

Wordpress Elementor Widgets & Addon, Build Wordpress Theme from Bootstrap Template with Standards of Themeforest

Created byHassine Riani

Last updated 1/2024

English

English [Auto],

What you'll learn

You will be Able to Create Custom WordPress Themes from Scratch
Know How to gain time with underscore prebuild Basic Theme and Knowing how to make the necessary modifications in order to have a pro Theme
Enqueue styles and Scripts the right way for the Theme
Master how WordPress works behind the scenes
Work with WordPress theme Custom Post Types and Advanced Custom Fields for the Footer and projects CPT
Write Custom WordPress Functions
Know how to read the documentation of elementor developers
Create custom made Elementor Widgets using the documentation of developers elementor
Convert any Bootstrap section to widget using controllers of elementor developers
Make the rendering of any elementor widgets with the necessary functions of WordPress and elementor premade functions
Modify and implement the WordPress loop
Customize WordPress themes
Make a custom Plugin for Custom post types of your themes
Make a Demo import "One Click demo importer " Like a pro
Bundle all plugins using TGM plugin
Create A One page professional Theme that meet to standards of Themeforest

Course content

24 sections • 65 lectures • 21h 23m total length

Introduction3:57
Learn to convert a Bootstrap template into a fully functional WordPress theme for ThemeForest using Elementor, building custom widgets, enqueuing styles and scripts, and integrating with ACF Pro and Gutenberg.
Installation of visual studio code editor and basic configuration for7:30
Install and configure Visual Studio Code on Windows 11 for WordPress theme development, then set up essential extensions for PHP, code intelligence, doc blocks, and Git workflow.
Admin panel of wordpress demonstration12:16
Navigate the WordPress admin panel, customize themes, manage posts, media, pages, and plugins, and configure appearance, widgets, menus, and the theme editor for a Themeforest-ready site with Elementor.

Getting starting with elementor widgets development21:41
Learn to build custom Elementor widgets and add-ons for WordPress by setting up WordPress 6.0, installing Elementor, and creating a sample add-on with two widgets, guided by developer docs.
Creating a new widget of elementor16:41
Create a new Elementor widget by defining a class, registering controls, and rendering the output with get_settings_for_display in a WordPress theme development workflow.
Create a custom elementor widget category3:14
Create a custom Elementor widget category by editing code, uncommenting the add category function, and registering the new category in your plugin; test to see it appear.

Hidden Switcher Popover Select Select228:20
Explore elemental controls in WordPress widget development, including hide and switch popover, select and select2 options, data controls, and rendering settings in the render function.
Text Textarea Wysiwyg Code12:50
Explore data controls in the elemental widget, covering text, number, text area, wysiwyg (WordPress rich text editor), and code inputs with practical examples for description, price, and formatting.
Choose Color Font controls18:37
Build and test color, font, and date controls in the Elemental WordPress plugin, implement the choose control as icon button groups, adjust selectors, and render live previews.
Gallery and repeater18:08
Learn to build WordPress theme components with Elementor by configuring gallery and repeater controls, selecting multiple media from the WordPress library, and rendering repeatable blocks with PHP.
Entrance Exit Hover animations12:11
Master entrance, exit, and hover animations using data controls for WordPress with Elementor. Implement entry effects, exit fade-outs, and hover interactions by editing render functions and settings in code editor.

Url Media10:27
Explore WordPress multi value controls for theme options, including url media, open in new tab and nofollow settings, and integrate media library images with url and alt attributes.
Icons Text and Box shadows4:26
Explore icon controls, text shadow, and box shadow using multi-value controls in Elementor; copy and paste the controllers, adjust horizontal and vertical shadows, blur, and color to update the page.

Installation and basic configuration of theme12:25
Convert an HTML template into a functional WordPress theme using Elementor add-ons and widgets, starting from the underscores starter theme, installing WordPress locally, then uploading and configuring the theme.
Enqueue styles the right way8:51
Learn to enqueue styles the right way in WordPress theme development, including assets, bootstrap, font awesome, and style.css to ensure proper styling and script loading.
Enqueue scripts the right way13:43
Learn to enqueue scripts the right way in a WordPress theme by editing functions and organizing scripts such as jquery migrate, bootstrap, easing, and waypoint.
Menu and Footer css of theme12:43
Learn practical WordPress theme customization by styling the menu and footer css, inspecting elements, updating classes, and applying flex and center alignment for the cloud theme.

Configuration and parameters of clark widget slider10:28
Configure the Clark slider widget for WordPress using Elementor, covering naming, category setup, and icon selection, with guidance on enqueueing styles and scripts.
Clark slider enqueues styles and JS16:27
Learn to enqueue styles and scripts for a WordPress slider widget using a theme's assets, PHP functions, and Elementor integration to ensure proper loading and display.
Add controls to our widget slider17:20
Learn to add and register controls for a widget slider in WordPress theme development with Elementor, using repeaters, title and subtitle fields, media, and render logic.
Render slider widget part 110:18
Deploy and render a slider widget inside a WordPress theme using Elementor, organizing code, configuring slider elements (title, subtitle, image, links), and updating settings for a live display.
Render slider widget part 210:20
Learn to render and customize a WordPress image slider widget for Elementor, editing styles, inserting PHP slider code, and configuring images and options for a polished slider.
Clark slider widgets options for sliders loop and nav etc28:18
Learn Clark slider widget options in Elementor for WordPress theme development, including loop, autoplay, animations, and navigation, through code-driven configuration.
Clark style slider widget options33:45
Explore Clark style slider widget options in WordPress themes, learning to modify typography, colors, borders, and button styles through the element control manager and live code edits.
Clark style slider widget options-part225:45
Fix and refine a Clark style slider widget in WordPress theme development with Elementor by editing controls, CSS, and style sections, then update and refresh to see changes.
Clark style slider widget options-dots_nav styles21:41
Learn to customize the Clark style slider widget’s dots navigation and arrows in wordpress theme development with elementor, editing controllers and css for active states, colors, and backgrounds.

Requirements

PHP
HTML
CSS
Bootstrap
Javascript
Jquery
OOP
Basic wordpress usage
Basics knowledge of wordpress basic Functions
ACF Functions and manipulations
Basics of elementor Page Builder Usage

Description

Note: this is a backend PHP course for WordPress

**********************************************************

Welcome to WordPress Theme Development with Elementor: For Themeforest. This course is very special, it allows you to know the secrets of WordPress Theming. Especially if you plan to sell on markets like ThemeForest or WordPress's official website.

So in this course, I will help you Be a professional WordPress theme developer. We will convert by the end of this course a full HTML CSS bootstrap template into a functional WordPress theme with the standards of Themeforest.

So after completing this course, you will be able to convert any bootstrap template to a fully functional WordPress theme using various technologies such as Custom post types, and you will be able to build Your Widgets of Elementor page Builder.

What we will cover in this course?

Firstly, we will be covering for the first sections how to deal with Elementor developers' documentation and their philosophy to see things of the MVC model. So we will see Multiples controllers, and we will see how to render them step by step.

So we will be getting familiar with Elementor widgets development, we will see how to create a new widget of Elementor, and see how to create custom widget categories.

We will manipulate each and every control type of Elementor controller, how to render them the right way.

The second part of the course will be a practical example, Clark's One-page theme creation from scratch.

So we will see how to do the right installation of underscores basic theme, and how to enqueue styles and scripts of theme the right way, and believe this is not always easy and trivial. We will be adding menu support …

After that, we have a crucial step which is Elementor add-on creation and the code behind widgets configurations .also, we will enqueue styles and JS for widgets this time .and after that we will be creating Clark-slider widget; so we will be adding controls and making the render of our widget step by step, adding multiple options also to make our widget professional .making the styling functions of our widget .in order to allow our users the modifications of colors and typography, etc.

Moreover, we will be creating several widgets almost twelve widgets including the Clark slider; we will list Heading, about, Resume, services, skills, projects, price, blog, counter, hire, contact, etc … and we will add controllers for each and every widget created, render them step by step, the style most of them…

Into the final chapters, we will be creating and rendering the footer with the ACF pro plugin and using native widgets of WordPress Gutenberg, last but not least we will create a small plugin in order to bundle our custom post type of projects, we will make the

implementation of TGM functionality to deliver all our plugins when we install our theme. We will make integration as usual of one click demo importer plugin the right way with the right implementations.

In the end, we will have almost a ready theme for ThemeForest, and you will be able to develop your own themes

What exactly are you going to learn?

We will start with the basics. You'll learn how to install WordPress the right way. And that's something not everyone knows how to do (trust me!). And, step by step, we will dive into more interesting topics.

You'll learn things like:

How to integrate the theme with Bootstrap—any version
Inner template files and essential WordPress pages
Native functions and tools that bring the entire mechanism of the theme to life
How to read Elementor developers' documentation to convert any Bootstrap template with the Creation of your widgets.

And much more… You'll also learn how to handle some specialized tools and APIs, like:

ACF and custom post types in general, you will create your CPT and make them editable with advanced custom fields ACF and ACF pro. And that for the Footer section.
The powerful TGM Plugin Activation library. If you intend to redistribute your work, TGM will help you package all your plugins with the theme.
And finally, you'll also learn how to make one demo importer and a simple plugin for all your CPT “custom post types”

We will provide the initial HTML and CSS template that we will convert step by step and of course the final project or theme in the resources.

How is the course different?

The course’s uniqueness is its versatility in its benefits. It offers a comprehensive 65 lectures, carefully classified into sections, leaving no topic untouched. More than 20 Hours.

The best part is my eagerness to assist you 24/7. Solving your query sooner than possible is my priority. The excellent response time allows you to follow your own pace in your project.

So join me right now. I can promise you this will be a journey that will change your professional career for good!

Who this course is for:

For professionals that aim to deliver Themes with standards of Themeforest and Wordpress
Anyone who is looking to start a career at Wordpress Theming
Advanced user of PHP and HTML & CSS
Anyone who want to start Business at Themeforest

WordPress Theme Development for Themeforest with Elementor

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 24min

Getting familiar with elementor widgets development3 lectures • 42min

Elementor Control Types-Data Controls5 lectures • 1hr 30min

Elementor Control Types-Multi value Controls2 lectures • 15min

Elementor Control Types-Unit Controls1 lecture • 10min

Elementor Control Types-User interface UI Controls1 lecture • 5min

Elementor Control Types-Group Controls1 lecture • 7min

Practice -Clark project Installation4 lectures • 48min

Practice-Clark project addon creation1 lecture • 17min

Practice-Clark project Slider Widget9 lectures • 2hr 54min

Requirements

Description

Who this course is for: