CS-17: Content Management System using WordPress

🎯 Course Objectives

• Learn how to create custom themes and pages
• Work with custom post types and taxonomies
• Gain in-detail knowledge of the WordPress CMS backend
• Work with widgets and widget areas
• Work with default CMS functions and extend its core

✅ Prerequisites

• Basic knowledge of web development (HTML/CSS/PHP basics) and general CMS concepts

🎓 Course Outcomes

• Able to configure and administer the WordPress CMS backend confidently
• Able to decide when to use a Custom Post Type vs. a Custom Field
• Able to extend the WordPress core to match project requirements (hooks, shortcodes, widgets)
• Able to design and build a complete, dynamic WordPress theme from scratch

📚 Reference Book

WordPress to Go: How to Build a WordPress Website on Your Own Domain, from Scratch, Even If You Are a Complete Beginner — Sarah McHarry (Paperback)

🗺️ Syllabus at a Glance

1.1 What is a Content Management System (CMS)?

A Content Management System is software that lets people create, edit, organize, and publish digital content (text, images, video) without needing to write code for every page. It separates content (stored in a database) from presentation (theme/template files), so non-technical users can manage a website through a visual dashboard while the underlying HTML/CSS/PHP is generated dynamically.

Think of a CMS in two layers: the back-end (admin dashboard where content is authored and stored in a database) and the front-end (public-facing pages, assembled at request-time from that stored content plus the active theme's templates). This separation is what allows the same blog post to look completely different after simply switching a theme.

Introduction to WordPress

WordPress is a free, open-source CMS written in PHP and backed by a MySQL/MariaDB database. Originally launched in 2003 as a blogging tool, it has grown into the world's most popular CMS, powering a large share of all websites on the internet — from personal blogs to large e-commerce stores (via WooCommerce) and enterprise sites.

WordPress ships in two flavours students should be able to distinguish: WordPress.org (self-hosted — you download the software, install it on your own server, and have full control/access to files & database — this is what this syllabus covers) versus WordPress.com (a hosted service where Automattic manages the server for you, with more restrictions on themes/plugins on free plans).

Features of WordPress

• Open source & free — free to download, use, and modify (GPL license)
• Themes — thousands of free/paid designs to change the site's look instantly
• Plugins — extend functionality (SEO, forms, e-commerce, caching) without coding
• User-friendly dashboard — WYSIWYG block editor (Gutenberg) for content creation
• SEO friendly — clean permalink structure, meta tags, sitemap support
• Responsive & mobile-ready themes out of the box
• Multi-user & role management — Admin, Editor, Author, Contributor, Subscriber
• Media management — built-in library for images, audio, video, documents
• Custom Post Types & Taxonomies — model any kind of content (products, portfolios, events)
• Large community & documentation — extensive support ecosystem

Advantages of WordPress

• Free and open source — low cost of ownership
• Easy for beginners; no coding required for basic sites
• Massive plugin/theme ecosystem — rapid development
• SEO-friendly architecture
• Scalable — from a single blog to enterprise (news portals, e-commerce)
• Regular security updates and an active community

Disadvantages of WordPress

• Frequent plugin/theme updates can cause compatibility conflicts
• Security is dependent on keeping core/plugins updated (common attack target due to popularity)
• Heavy use of plugins can slow site performance
• Customization beyond a point requires PHP/CSS/JS knowledge
• Database-driven — needs proper backup/maintenance discipline

1.2 Installation of WordPress

WordPress can be installed locally (for learning/development) using a stack like XAMPP/WAMP (Apache + MySQL + PHP), or on live hosting via cPanel/Softaculous or manual upload.

Local Installation Steps (XAMPP)

1. Install XAMPP and start the Apache and MySQL modules.
2. Download the latest WordPress ZIP from wordpress.org and extract it into C:\xampp\htdocs\mysite.
3. Open phpMyAdmin (http://localhost/phpmyadmin) and create a new database, e.g. wp_mysite.
4. Visit http://localhost/mysite in a browser — the WordPress installer (the "famous 5-minute install") launches.
5. Enter database name, username (root), password, and host (localhost).
6. Set the site title, admin username, password, and email — click Install WordPress.
7. Log in to /wp-admin with the created credentials.

Fig 1.0 — wp-config.php: the four database constants that installation writes automatically

1.3 WordPress Directory & File Structure

Fig 1.1 — Root-level folders/files of a WordPress installation

1.4 Dashboard Overview

Fig 1.2 — Anatomy of the wp-admin dashboard: Admin bar, left navigation menu, main work area

The dashboard (/wp-admin) is the control panel of the site. The left menu gives access to Posts, Media, Pages, Comments, Appearance, Plugins, Users, Tools, and Settings. The main panel shows widgets like "At a Glance" (content counts), "Activity," and "Quick Draft."

Adding, Editing & Deleting Content

• Post: Posts → Add New → write title/content → set Category & Tags → Publish. Edit via Posts → All Posts → click title. Delete moves it to Trash first (permanently deletable from Trash).
• Page: Similar to Posts but for static content (About, Contact) — Pages don't use categories/tags and support a Page Attributes panel (Template, Parent, Order).
• Category: Posts → Categories → add Name, Slug, Parent, Description. Categories are hierarchical (can have parent/child).
• Tag: Posts → Tags — flat (non-hierarchical) keywords used for cross-referencing content.
• Media: Media → Add New, or drag-and-drop directly inside the block editor. Supports images, PDFs, docs, audio, video; each file gets a Title, Alt Text, Caption, and Description, and can be attached to a specific post/page.

Fig 1.2a — Posts → Add New: block editor (left) + Post settings sidebar (right) with Status, Categories, Tags, Featured Image

Fig 1.2b — Media Library grid view; clicking a file opens its Attachment Details (Title, Alt Text, URL)

Fig 1.2c — Posts → Categories: add-new form (left) and the existing hierarchy with post counts (right)

Fig 1.3 — Post vs. Page: when to use which

Fig 1.4 — Category (hierarchical) vs. Tag (flat)

1.5 Gutenberg — The Block Editor

Gutenberg is WordPress's default content editor (since v5.0), where every piece of content — a paragraph, image, or button — is a self-contained block that can be added, rearranged (drag handles), and styled individually.

Fig 1.5 — Common Gutenberg blocks available from the "+" inserter

1.6 User Roles & Capabilities

Fig 1.6 — Capability pyramid: each role down the list has fewer capabilities

Fig 1.6a — Users → All Users: each account shows its assigned role and post count

1.7 Settings Overview

• General — Site Title, Tagline, WordPress/Site Address, Admin Email, Timezone, Date/Time format
• Writing — default post category/format, "Post via email," update services
• Reading — homepage display (latest posts / static page), posts per page, search engine visibility
• Discussion — comment settings, moderation, avatar display
• Media — image thumbnail/medium/large dimensions, uploads folder organization
• Permalinks — URL structure (Plain, Day/Name, Month/Name, Post name, Custom) — "Post name" is the SEO-recommended option

Fig 1.7 — Permalink structures compared

1.8 Updating WordPress

• One-click Update — Dashboard → Updates → click "Update Now" (recommended, safest for minor/major releases)
• Manual Update — download the new version from wordpress.org, back up the database and files, replace wp-admin and wp-includes folders, then re-run /wp-admin/upgrade.php

1.9 Database Structure

WordPress uses a relational database (MySQL). Default core tables (prefix wp_):

Fig 1.8 — Simplified relationships between core WordPress tables

Notice that a post's category/tag isn't stored directly on the post row — it goes through wp_term_relationships, which links a post ID to a term_taxonomy_id. This indirection (many-to-many relationship) is what lets one post belong to multiple categories, and one category hold many posts, efficiently.

2.1 What is a Theme?

A WordPress theme is a collection of template files, stylesheets, and (optionally) JavaScript/images that together define the visual presentation and layout of a site. Themes control how content stored in the database is displayed, without touching the content itself — the same posts can look completely different under a new theme.

2.2 How to Install & Activate a Theme

1. Go to Appearance → Themes → Add New.
2. Search the WordPress.org theme repository, or click Upload Theme to install a downloaded .zip file.
3. Click Install, then Activate to make it the live theme.
4. Alternatively, upload the theme folder directly to wp-content/themes/ via FTP, then activate it from Appearance → Themes.

2.3 Theme Customize Options (Appearance → Customize)

Fig 2.1 — The Customizer: sidebar panels update a live preview on the right

Building a Navigation Menu — Step by Step

Fig 2.2 — Appearance → Menus: drag pages from the left into the menu structure, nest items to create dropdowns

1. Go to Appearance → Menus → create a new menu, give it a name (e.g. "Primary Menu").
2. Tick the Pages/Posts/Categories to add from the left panel, click Add to Menu.
3. Drag items to reorder; drag an item slightly right and drop it under another to make it a sub-menu (dropdown).
4. Under Menu Settings, tick the theme location (e.g. "Primary Menu") to assign it, then Save Menu.

3.1 What is a Widget & Widget Area?

A widget is a small, self-contained block of content or functionality (e.g., a search box, recent posts list, calendar) that can be dragged into a widget area — a theme-defined region such as a sidebar or footer — without writing code.

Available Widgets

Archive · Calendar · Categories · Navigation Menu · Meta · Pages · Recent Comments · Recent Posts · RSS · Search · Tag Cloud · Text · Image · Gallery · Video · Audio · Custom HTML

Widget Management

Managed via Appearance → Widgets (block-based widgets screen) or through the Customizer's Widgets panel. Widgets can be dragged between areas, reordered, and configured with their own settings (title, number of items, etc.).

Fig 3.1a — Appearance → Widgets: multiple widget areas (Sidebar, Footer) plus the Inactive Widgets bin

Fig 3.1 — Example of a footer widget area with three widgets rendered on the front end

Inactive Sidebar / Inactive Widgets

When a theme is switched, widgets from areas that no longer exist in the new theme are automatically moved to an Inactive Widgets bin rather than being deleted — so they can be restored later if you switch back or the new theme adds a matching area.

3.2 Plugins

What is a Plugin?

A plugin is a packaged piece of PHP code that hooks into WordPress core to add or extend functionality — e.g., SEO tools, contact forms, e-commerce, caching — without modifying core files, so features survive core/theme updates.

How to Install & Activate a Plugin

Fig 3.2a — Plugins → Add New: browse or search the repository, click Install Now then Activate

Fig 3.2b — Plugin install → activate workflow

1. Plugins → Add New → search the repository → Install Now → Activate.
2. Or Upload Plugin to install a downloaded .zip file.
3. Or upload the plugin folder to wp-content/plugins/ via FTP, then activate from the Plugins screen.

Useful Plugins for a Website

4.1 Anatomy of a Theme

Fig 4.1 — How header.php, the Loop, sidebar.php and footer.php compose a page

Every page render in WordPress typically stitches together three re-usable pieces — header.php, footer.php, and optionally sidebar.php — around the page-specific template that runs the Loop.

Minimum Required & Common Template Files

The Template Hierarchy

WordPress decides which template file to load for a given URL by walking a fixed priority order — the Template Hierarchy — from most specific to most general, always falling back to index.php if nothing more specific exists.

Fig 4.2 — Simplified Template Hierarchy showing fallback order per content type

4.2 The Loop

Fig 4.3 — have_posts() / the_post() cycle that outputs each matching post

The Loop is the core PHP construct that WordPress uses to display posts. It iterates over the post(s) matched by the current query and, for each one, sets up post data so template tags like the_title() work correctly.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <h2><?php the_title(); ?></h2>
    <div><?php the_content(); ?></div>

<?php endwhile; else : ?>
    <p>No posts found.</p>
<?php endif; ?>

Fig 4.3a — What the Loop's output looks like on the live site: each post block below the header comes from one Loop iteration

4.3 Template Tags

Fig 4.3b — single.php rendered on the front end: title, content, comments, and prev/next post links — all produced by Template Tags

General Tags

wp_head(), get_footer(), get_header(), get_sidebar(), get_search_form(), bloginfo(), wp_title(), single_post_title(), wp_footer(), comments_template(), add_theme_support(), get_template_directory_uri(), body_class()

These load reusable template parts, output <head>/footer hooks required by plugins, print site info (name, URL, description via bloginfo()), register theme features (add_theme_support('post-thumbnails')), and output dynamic CSS classes on the <body> tag.

Author Tags

the_author(), get_the_author(), the_author_link(), get_the_author_link(), the_author_meta(), the_author_posts() — display the post author's name, profile link, custom meta (bio, website) and post count.

Category Tags

category_description(), single_cat_title(), the_category() — output category descriptions, the current category archive title, and the list of categories a post belongs to.

Link Tags

the_permalink(), get_permalink(), home_url(), get_home_url(), site_url(), get_site_url() — return/print canonical URLs for the current post or the site root.

Post Tags

the_content(), the_excerpt(), the_ID(), the_tags(), the_title(), get_the_title(), the_date(), get_the_date(), the_time(), next_post_link(), previous_post_link(), posts_nav_link(), post_class() — the core set used inside the Loop to print a post's body, summary, ID, tags, title, date/time, pagination links between posts, and dynamic CSS classes on the post wrapper.

Post Thumbnail Tags

has_post_thumbnail(), get_post_thumbnail_id(), the_post_thumbnail(), get_the_post_thumbnail() — check for and output the Featured Image (requires add_theme_support('post-thumbnails') in functions.php).

Navigation Menu Tag

wp_nav_menu( array('theme_location' => 'primary') ) — outputs a menu previously registered with register_nav_menu() and assigned by the user under Appearance → Menus.

Conditional Tags

is_archive(), is_category(), is_front_page(), is_home(), is_page(), is_single(), is_search(), is_attachment(), is_active_sidebar() — booleans used to branch template logic based on the type of page currently being viewed (e.g., show a different header on the front page).

<?php if ( is_front_page() ) : ?>
    <div class="hero">Welcome banner</div>
<?php elseif ( is_single() ) : ?>
    <div class="post-meta"><?php the_date(); ?></div>
<?php endif; ?>

4.4 functions.php

The functions.php file acts like a plugin built into the theme — it runs automatically on every page load and is the standard place to register menus, widget areas, theme support, enqueue styles/scripts, and hook in custom PHP functions (covered further in Unit 5).

<?php
function mytheme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'title-tag' );
    register_nav_menu( 'primary', 'Primary Menu' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

5.1 Advanced Functions — Hooks & Shortcodes

Fig 5.1 — Action hooks run code; filter hooks modify and return data

// Custom shortcode: [greet name="Alpesh"]
function greet_shortcode( $atts ) {
    $atts = shortcode_atts( array( 'name' => 'Guest' ), $atts );
    return "Hello, " . esc_html( $atts['name'] ) . "!";
}
add_shortcode( 'greet', 'greet_shortcode' );

// Filter example: force all titles to uppercase
add_filter( 'the_title', function( $title ) {
    return strtoupper( $title );
});

5.2 Custom Post Types & Taxonomies

Fig 5.2 — A Custom Post Type linked to a custom Taxonomy

A Custom Post Type (CPT) lets you model content beyond posts/pages — e.g., "Movies," "Products," "Events." A Custom Taxonomy lets you classify that content — e.g., "Genre" for Movies.

// Register a "Movie" Custom Post Type
function register_movie_cpt() {
    register_post_type( 'movie', array(
        'labels' => array( 'name' => 'Movies', 'singular_name' => 'Movie' ),
        'public' => true,
        'has_archive' => true,
        'supports' => array( 'title', 'editor', 'thumbnail' ),
        'menu_icon' => 'dashicons-video-alt2',
    ));
}
add_action( 'init', 'register_movie_cpt' );

// Register a "Genre" taxonomy for Movies
function register_genre_taxonomy() {
    register_taxonomy( 'genre', 'movie', array(
        'label' => 'Genre',
        'hierarchical' => true,
        'public' => true,
    ));
}
add_action( 'init', 'register_genre_taxonomy' );

Displaying a CPT & its taxonomy: create archive-movie.php (list view, uses the normal Loop against the CPT), single-movie.php (detail view), and taxonomy-genre.php (genre archive) — WordPress' Template Hierarchy automatically picks these files up.

5.3 Widget Areas — register_sidebar() & dynamic_sidebar()

// Register a custom widget area in functions.php
function mytheme_widgets_init() {
    register_sidebar( array(
        'name'          => 'Footer Widget Area',
        'id'            => 'footer-widgets',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3>',
        'after_title'   => '</h3>',
    ));
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

// Output the widget area in footer.php
<?php if ( is_active_sidebar( 'footer-widgets' ) ) : ?>
    <?php dynamic_sidebar( 'footer-widgets' ); ?>
<?php endif; ?>

Fig 5.3 — Output of the code above on the front end

CS-18 is the dedicated MDC practical paper covering CS-15 (C++ OOP), CS-16 (RDBMS/Oracle) and CS-17 (WordPress). The WordPress-specific practical checklist below consolidates the unit-wise practicals above into an exam-ready sequence:

1. Install WordPress locally using XAMPP and phpMyAdmin.
2. Create posts/pages using various Gutenberg blocks; manage categories & tags.
3. Manage the Media Library — upload, edit metadata, insert into content.
4. Create and test multiple user roles and their capabilities.
5. Install, activate, and customize a theme (logo, menu, homepage, custom CSS).
6. Add and arrange widgets; observe inactive-widget behaviour on theme switch.
7. Install and configure at least 3 plugins (SEO, contact form, and one more of choice).
8. Build a custom theme from scratch: style.css, header.php, footer.php, sidebar.php, index.php, single.php, page.php.
9. Implement the Loop and at least 6 different template tags across templates.
10. Register a custom navigation menu and a custom widget area via functions.php.
11. Create a custom shortcode and a custom filter.
12. Register a Custom Post Type with a Custom Taxonomy and build its archive/single templates.

Based on the official Saurashtra University BCA (Honours) evaluation scheme, CS-17 carries 50 CCE (internal) + 50 SEE (semester-end) = 100 total marks. Internal/unit tests generally follow this structure (25 marks per test, covering 2–3 units at a time):

The Semester-End Exam (SEE) typically extends this pattern across all 5 units for the full 50 marks, mixing short-answer, descriptive, and practical/coding-based questions (writing template tag code, explaining hooks, designing a CPT, etc.).

Short Answer Type (2 marks each — good for Q1/Q2 style)

Long Answer / Descriptive Type (5 marks each — good for Q3 style)

Practical / Coding-Based

• Sarah McHarry — WordPress to Go: How to Build a WordPress Website on Your Own Domain, from Scratch, Even If You Are a Complete Beginner
• Official WordPress Developer Resources — developer.wordpress.org (Theme Handbook, Plugin Handbook, Template Tag reference)
• WordPress Codex & wordpress.org documentation
• Saurashtra University B.C.A. (Honours) & B.C.A. (Honours with Research) Syllabus, Semester 3 & 4, effective June 2024