Website Designing with WordPress Development

Introduction to the World Wide Web (WWW)

The World Wide Web (WWW) is a global platform used for managing and showcasing advertisements and digital content. It connects users through domains such as

Example Domains: Amazon.com,

Domain extensions include .com, .in, .us, .au, .uk, .gov, .org, and .co.in.

Choosing a Domain Name

WP Theme Detector (WPTD)

{Use WP Theme Detector to identify which WordPress theme a site is using. Visit the site, enter the website URL, and wait a few minutes for results.}

You want subdomains? Use this guidance.

Create Subdomains

Domain: The main name of your site (e.g., Raj.com for Raj’s T-shirt showroom).

Subdomain: A subdivision of the main domain (e.g., chennai.raj.com, hyd.raj.com).

Hosting & Subdomain Setup

Log in to your hosting account.

Go to Advanced → Install WordPress.

Add a subdomain under your main domain.

Start creating a WordPress website.

There are four main steps:
Pages
Menu
Themes
Customize

Creating Pages

Go to: Dashboard → Pages → Add New
Add and publish pages like Home, About, Services, and Contact Us.

Setting the Menu
Dashboard → Appearance → Menus

Name the menu → Create Menu

Select pages (except sample page) → Add to Menu

Arrange items with drag & drop.

Set as Primary Header

Installing Themes
Dashboard → Appearance → Themes → Add New
Search for a design → Install → Apply

Customizing the Website
Dashboard → Appearance → Customize

Site Identity: Logo, title, tagline, favicon

Colors & Images: Background, header, etc.

Menus: Assign locations
Home Page Slider: Enable, upload images, set height (300–550), add description, links, and call to action.
Home Featured: Upload square image, tagline, description, and link to a page.

Popular plugins include

Contact Form (by Supsystic)

Chat Box (Collect.chat)

Click to Chat (WhatsApp plugin)

WP Reset (Reset your website)

Contact Form Setup:

Install & activate plugin.

Add New Form → Choose Template

Customize & Save → Copy shortcode → Paste in Contact Us page → Update

Chat Box Setup:

Install Collect.chat. Create account → Create Bot

Design the flow → Copy embed code → Paste it in your site.

Click to Chat:

Install plugin → Add WhatsApp number

Choose position → Save

WP Reset:

Go to plugin → Type Reset → Click Reset.

Creating a Blogging Website

Use categories and feature images.
Create a blog post → Assign to category
Appearance → Customize → Home Page Settings
Static Page (to show selected page)
Blog Page (to show blog posts)
To show all blogs:
Remove other pages → Set Home Page to “Your Latest Post.”
Use Custom Links in the Menu for custom navigation.
Widgets: Add to sidebar/footer via Appearance → Widgets
Install a blogging theme for better visuals.

E-Commerce Website with WooCommerce

Install & Activate WooCommerce Plugin

(1) Simple Product

Products → Add New

Product Name, Description (short + long), Image, Category, Tags

Pricing → Set regular & sale prices

Inventory → SKU, stock quantity, backorders, stock alert

Pages like Cart, Shop, and Checkout are auto-created. → Add to Menu

Enable COD Payment:

WooCommerce → Settings → Payments → Enable COD → Save

Change Currency:

WooCommerce → Settings → General → Currency

(2) Variable Product

Set different variations (color, size, etc.).

Use Product Data → Variable Product

Configure Attributes & Variations

Add Linked Products (Upsell, Cross-sell)

(3) Grouped Product

Combine multiple simple products.

Hide individual simple products → Group them via parent product

Coupon Settings:

Fixed Cart Discount vs. Percentage Discount

Display Coupons with Convertful

Install Convertful → Connect Site → Create Pop-up Widget

Set display rules (timing, position, etc.).

Shipping Settings

WooCommerce → Settings → Shipping → Add Shipping Zone

Define zone name & region.

Add method: Flat rate or free shipping

Set cost (e.g., ₹80) or set free shipping threshold

Using Elementor (Page Builder)

Elementor is a popular page builder (80% of features are free).

To install:

Plugins → Search “Elementor” → Install & Activate

Use with themes like ASTRA.

Astra → Starter Template → Elementor → Free template

Useful Elementor Add-ons:

ElementsKit for advanced blocks/templates

Pricing Table Plugin by Supsystic

Common Widgets:

Accordion

Button

Copyright

WP Forms (without shortcodes)

To duplicate a page: Install the Clone Pages plugin → Click “Clone.”

To see contact entries: Use WP Forms → Entries or install the DB plugin.

Hosting & Subdomain Setup

Log in to your hosting account.

Go to Advanced → Install WordPress.

Add a subdomain under your main domain.