Overview

Get introduced to the target audience and the learning outcomes of this course.

We'll cover the following

Welcome to the course! Here you'll learn how to code a complete custom website. The goal of this course is to take you from a novice to a professional WordPress developer.

Target audience

This course is designed for beginners with no prior experience of website development. However, the content is organized in a way that a web developer looking to bridge gaps in their current knowledge can also benefit from this course.

Prerequisites

Since this is a beginner level course, only basic programming knowledge is required. Familiarity with HTML, CSS, and JavaScript is a plus.

We will introduce you to the basics of PHP, which is the backbone of WordPress. In the latter part of the course, we will explore JavaScript programming specifically tailored for WordPress. We will also use JSX and React in the last chapters of the course.

What to expect?

This is a hands-on course. You are expected to follow along the lessons.

In this course, we will create a website for a fictional school, which has custom post types and custom fields. Along the way, we will develop custom queries and establish relationships between different post types. Moreover, we will explore interacting with the WordPress REST API for tasks such as reading, creating, updating, and deleting data. Additionally, we will harness the power of JavaScript to create a dynamic search feature that instantly retrieves search results. The website will be open for registration. A teacher account will have an additional feature of creating lecture notes that will be promptly added to the database on the fly.

The demo of the complete website is shown below. You can play around with the website by navigating to the courses, teachers, events and blog pages, as well as test the live search feature (using search terms like career, chemistry, and doe). Also try logging in with the username john and the password test123 to check out the teacher’s view of the website where you can create lecture notes and then edit and delete them on the fly.

<?php
get_header();
displayPageBanner(array(
                'title' => 'All Courses',
                'description' =>'Check out the list of courses we offer and find one you like!'
            ));
?>

<div class="container">
    <div class="generic-content">
        <?php
        while (have_posts()) {
            the_post(); ?>
            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            <br>
        <?php
        } ?> 
        <div class="btn-viewAll">
            <?php echo paginate_links(); ?>
        </div>
    </div>
</div>
<?php
get_footer();
?>
Custom theme for school website

Learning outcomes

We will cover the following topics in this course:

  • Creating a custom theme by working on different theme files and in the process learning about the template hierarchy used by WordPress to display single posts, archives, and pages, etc.
  • Creating HTML template using PHP functionality and replacing the hardcoded text with dynamic values.
  • Creating custom post types which are stored separately in the WordPress database.
  • Adding custom fields or metadata with a post type to store additional information, displaying that information on the front end as well as using it to create relationships between post types.
  • Writing custom queries as well as tweaking the default or main query to display results of our choice.
  • Using functions and templates to reduce duplication of code.
  • Using JavaScript for the live search feature while working with the WordPress REST API, then creating a custom REST API, and making search logic aware of relationships between post types.
  • Using JavaScript to interact with the WordPress REST API for CRUD operations, i.e., editing, deleting, and creating a post.
  • Different user roles and permissions for each role, registering subscribers on our website and ensuring content privacy.