
Transform static HTML/CSS templates into dynamic WordPress themes by creating custom posts and taxonomies, page templates, and widgets, while exploring starter themes and WooCommerce integration.
Install the XAMPP bundle and Visual Studio Code to set up a local development environment with Apache, MySQL database, and PHP support for WordPress theme development.
Set up a WordPress development environment by installing XAMPP, extracting WordPress, starting Apache on port 80, creating a database, and configuring wp-config.php with the database details.
Access the WordPress installer via localhost, configure the WP config file, set the site name and admin credentials, then log in to the dashboard.
Understand what a content management system is and how it enables dynamic websites with editable text, images, icons, links, and buttons in WordPress without changing code.
Explore WordPress as a content management system in action, editing the hello world post, adjusting text, and previewing changes before publishing.
Explore the WordPress backend in detail, navigating the dashboard, posts, media, pages, appearance, plugins, users, tools, and settings, and learn the front end vs back end distinction for theme development.
Convert a static html5up template into a responsive, dynamic WordPress theme while adding custom post types like product or portfolio, and learning to manage content from the WordPress backend.
Extract the downloaded allostatic HTML5 template, explore its files and layout, and begin transforming the home page by creating team files in Visual Studio Code.
Create and wire together the core WordPress theme files, including style.css, index.php, functions.php, header and footer templates, front-page.php, single.php, page.php, and archive templates, while configuring homepage and post settings.
Extract the head and footer from the static html into header.php and footer.php, then align content in the main area and apply styling as needed.
Learn to set up WordPress theme information and create a theme preview image, populate team details and author data, export assets, upload the preview, and activate the theme.
Copy main.css and related assets from the static HTML CSS template into the theme, adjust font references, and address remaining script files to fix the styling.
Learn to correctly implement WordPress wp_head and wp_footer in your theme's header and footer, ensuring dynamic plugin scripts load properly.
Enqueue a style file for the front page and hook it into the header and footer using a WordPress function, ensuring the stylesheet loads correctly.
Enqueue all the javascript files for a WordPress theme, manage the dropdown script and related assets, ensure unique handle naming, and debug via the browser console.
Add multiple theme support capabilities to a WordPress custom theme, including custom logo, title tag, post thumbnails with custom sizes, automatic feed links, menus, and text domain handling for translation.
Add the dynamic body_class function to the header file to replace static body classes, so WordPress can output page-specific and login-based classes for flexible styling.
Make the site title link and description dynamic by using a WordPress function to fetch the site name and description and echo them on the front end.
Learn how to display a logo uploaded via the dashboard in a WordPress theme by calling the theme’s logo render method, tweak styling, and control showing the description.
Transform hardcoded navigation into a dynamic WordPress menu by configuring a primary menu location, using wp_nav_menu to render menu items, and removing dummy containers to ensure megamenu styling updates automatically.
Develop WordPress navigation styling by replacing current menu item classes, implementing a mega menu with multi-level submenus, and refining CSS to control open states across second and third levels.
Remove an unwanted footer section by editing the front-page.php, delete the extra layout column, and set up widgets to manage services, portfolio, and navigation items from the WordPress dashboard.
Register a main sidebar in the functions.php file by creating a named function, setting its id, name, and description, and hooking it to the widgets action.
Register three footer widgets in the functions.php file by duplicating widget code, updating names and descriptions, and adjusting markup to render in the footer sidebars.
Call footer widgets into your front page and pass dynamic content from the dashboard using dynamic_sidebar, custom HTML blocks, and widget configuration in WordPress.
Fetch posts from the WordPress dashboard with WP_Query, configure post type and per-page limits, and display each post's title, description, and link in a front-end loop.
Create and edit posts from the WordPress dashboard using the classic editor plugin, set content and featured images, and upload media to showcase posts.
Develop a dynamic WordPress blog home page by displaying each post's featured image, title, excerpt, date, author, and comments link using the loop, post thumbnail sizing, and permalink.
Create a portfolio custom post type in WordPress using a generator, integrate the code in functions.php, set the text domain, and view your portfolios in the dashboard.
Learn to add and display custom fields and to loop over a custom post type on the front page to showcase portfolios.
Dynamically display portfolio items by retrieving thumbnail, excerpt, title, and permalink on the front page. Reset postdata after the portfolio query to avoid data mixing with other WP_Query loops.
Learn to make the hero section dynamic with a custom fields plugin, adding front page title and subtitle fields and rendering them in the front page template.
Learn to make the hero image dynamic by adding an image field to a field group, selecting and applying images, and adjusting basic styling for responsive display.
Learn to build a dynamic services and call-to-action section in a WordPress custom theme by using a custom post type and custom fields pulled from the WordPress dashboard.
Create a single php details page to render blog or portfolio items with a right-side layout, integrating header, footer, and dynamic sidebar via function calls.
Apply the loop to the single top BHP file to render dynamic post content, including the post title, content, permalink, and the featured image, with header, footer, and a sidebar.
Learn to implement the main sidebar with widgets in a WordPress custom theme, adding search, latest posts, categories, and ads, and troubleshoot layout issues on pages and archives.
Learn to implement archive and search layouts by reusing the homepage loop and sections in archive.php and index.php templates, enabling repeated post lists by category or search.
Create and apply a custom page template to produce a full-width, sidebar-free about us layout in WordPress, then tailor it by removing elements and assign templates with clear fallbacks.
Explore using starter theme templates like understrap or underscores to quickly set up a bootstrap-enabled WordPress theme, with auto-included files, templates, and widgets.
In this hands-on course you will learn to convert any static HTML, CSS template into a fully functional Custom Wordpress Theme which will ready to use in production for any website.
We will learn everything in a step by step approach as mentioned below:
1.1-Installing the software xampp and vscode
1.2-Downloading Wordpress engine
1.3-Setting up wordpress config and database
1.4-Setting up wordpress through its installer
1.5-What is a content management system
1.6-Taking closer look at wodpress
1.7-Detailed walk through of the wordpress backend
1.8-Downloading the static html template
1.9-Static Html tempplate walk through
2.1-Creating all the theme files
2.2-Adjusting the static html template to fit our theme layout
2.3-Moving static markup to header.php footer.php and front-page.php
2.4-Setting up theme information and theme preview image
2.5-Copying main.css to style.css of theme
2.6-wp_head and wp_footer function
2.7-enqueue style file and include header and footer to fornt-page
2.8-enqueue all the javascript files
2.9-fixing the console error for missing javascript files
3.1-Adding multiple theme support capability to our custom theme
3.2-Adding body_class function to header file
3.3-Making site title websiye link and description dynamic
3.4-Displaying website logo uploaded via dashboard
3.5-Making navigation menu items dynamic
3.6-Styling the Menu and Sub menu
3.7-Removing unwanted section from Footer
3.8-Registering Main Sidebar in functions php file
3.9-Registering 3 Footer Widgets in functions php file
3.10-Calling footer widgets and passing dynamic content to from Dashboard
4.1-Fetching Posts from Wordpress Dashboard via WP_Query
4.2-Creating Posts from dashboard
4.3-Display Post Information for each Post
4.4-Creating custom post type
4.5-looping over custom post type on front page
4.6-Displaying Portfolio information for each portfolio and doing wp-reset-postdata