CS-16 CMS USING WORDPRESS UNIT - 3

Unit 3: Widgets & Plugins

What is widget & widget Areas?
- A WordPress Widget is a small block that performs a specific function.

- You can add these widgets in sidebars also known as widget-ready areas on your
web page.

- WordPress widgets were originally created to provide a simple and easy-to-use way
of giving design and structure control of the WordPress theme to the user.

Create Widget Area

The following should be added to your Theme's functions.php file:
<?php
/* Register our sidebars and widgetized areas. */
function alphabet_widgets_init() {
register_sidebar( array(
'name' => 'Home right sidebar',
'id' => 'home_right_1',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2 class="rounded">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'alphabet_widgets_init' );
?>

How to display new Widget Areas

You can display your new widget area by:
1. Adding the code directly to a theme file like the sidebar.php file; or
2. Using a custom function with hook in your functions.php file.
Here's some example code that is a common way to add your new widget area to a parent
or child theme:
<?php if ( is_active_sidebar( 'home_right_1' ) ) : ?>
<div id="primary-sidebar" class="primary-sidebar widget-area"
role="complementary">
<?php dynamic_sidebar( 'home_right_1' ); ?>
</div><!-- #primary-sidebar -->
<?php endif; ?>

Page 1 of 40 Study notes by : BHAVESH CHAVDA

CS-16 CMS USING WORDPRESS UNIT - 3

Widget Management

Archive Widget
- The Archive widget is used to organize your previously published posts by month.

- Bloggers use the archives widget in their sidebar so they and their readers can easily
access previous months or years posts.

- For example, clicking on a May 2011 archive link displays all your posts written in
that month.

Calendar
- The calendar widget creates a calendar in your sidebar with clickable links to your
blogs posts for particular dates.
- Dates that appear in bold type indicate dates you’ve posted.

Categories Widget
- The Categories widget displays a list of the categories that you’ve assigned to posts.

- It helps your readers quickly see what topics you write about.

- If you want to display your categories in a specific order, you can build a custom
menu then add your categories to your sidebar using the Custom menu widget
instead.

Custom menu
- The Custom menu widget allows you to display pages, categories, and custom links
with a single widget.
- To use you first need to set up your custom menu in Appearance > Menu.

Meta
The Meta widget is a simple widget for:
- Your blog dashboard (click on Site Admin when you are logged into your account)
Log in/out
- Entries RSS (your post RSS feed URL)
- Comments RSS (your comment RSS feed URL)
Pages
- The Pages widget displays a list of your pages in the sidebar.

- It is commonly used for themes that don’t have page links in the top navigation.

Page 2 of 40 Study notes by : BHAVESH CHAVDA

CS-16 CMS USING WORDPRESS UNIT - 3

- The alternative is to use a custom navigation menu to set up your top navigation.

- You can customise the Page widget to list pages by:

o Page title – this displays the pages in alphabetical order
o Page order – use this option to display pages your preferred order
o Page ID – this displays the pages in the pages were first created in your
Dashboard
The Exclude option is used to if you want to keep certain pages from being listed in the
widget.
You exclude pages as follows:
- Locate the Page ID you want to exclude by going to Pages > Edit

- Hover over the title of the page you want to exclude.

- The status bar of your browser will display a URL with a numeric ID. This is the page
ID.

- Enter the Page IDs; separated by commas if more than one Page ID and click Save.

Recent Comments
- The Recent Comments Widget displays the most recent comments left on your blog
by readers.

- Educators use this widget because seeing recently approved comments in the
sidebar can be very motivating for students.

Recent Posts
- The Recent Posts widget displays the most recent posts you have published.

- It makes it easier for readers to see what’s new on your blog.

RSS
- The RSS Just Better widget allows you to add a customized list of RSS feeds to your
sidebar.

- It is added to Appearance > Widgets when the RSS Just Better plugin is activated in
Plugins.

Search
- The Search Widget adds a search box to your sidebar.

- It makes it easier for readers to search the contents of your blog.

Page 3 of 40 Study notes by : BHAVESH CHAVDA

CS-16 CMS USING WORDPRESS UNIT - 3

Tag Cloud
- The Tag Cloud widget displays a list of your top 45 tags that you’ve assigned to posts.

- The larger the size of the tag, the more often you’ve assigned the tag to a post

- It helps your readers quickly see what topics you write about the most.

Text Widget
- The text widget can be used for lots of different purposes. It allows you to add
simple text, display links, insert images, embed HTML code.

- You can use as many text widgets in your sidebars, each with different content.

- It’s one of the most useful widget because you can use it to add content from other
sources to your sidebar using their embed code.

Inactive Sidebar (not used)

- If you want to remove a widget from a Sidebar but save its settings for future use,
drag it into the Inactive Widgets section. If you simply want to delete the Widget
from your Sidebar, click the Delete link within the Widget.

- The small arrow next to the Sidebar title will toggle the sidebar open and closed. If
you drag and drop a widget onto a closed sidebar, the sidebar and widget will
automatically open.

Inactive Widgets
- What probably happened is that you dropped one of them over the "Available
widgets" space and it dissapeared.
- But don't worry that doesn't mean that the widget is gone, widgets cannot
"dissapear", in the worst case you just lost the data of the widget.

- For example if you have a text widget in your colum, with the title "My cool widget"
and the text "Hey check this out", and you decide to temporarly remove it from your
website, but wish to keep the text data, you would drop it to the "Inactive" space.
You can then drop it back whenever you wish to use it again with the same text. BUT,
if you remove it completely, then there will always still be the "Text" widget available
in the upper space "Available widgets".

Page 4 of 40 Study notes by : BHAVESH CHAVDA

CS-16 CMS USING WORDPRESS UNIT - 3

Plugin
- A plugin is a piece of software containing a group of functions that can be added to a
WordPress website.

- They can extend functionality or add new features to your WordPress websites.

- WordPress plugins are written in the PHP programming language and integrate
seamlessly with WordPress.

How to install and activate plugin

One of the best things about WordPress is the ability to add features using
WordPress Plugins. WordPress comes with a lot of tools to build a website, but
expanding it with plugins can help customize your site to fit your needs.

Use plugins to add custom forms, widgets, search engine optimization (SEO) tools, or
even change the editor that you use to create posts. There are plugins that allow you
to accept charitable donations, sell digital products, and manage page caching.

Plugins are created by 3rd parties and you can create your own plugin if you are a
developer. Here, we’ll show you how to install WordPress plugins using the built-in
search tool. Then we’ll cover uploading and installing plugins manually.

Install WordPress Plugins Using the Built-in Plugin Search

The easiest way to install plugins is by using the search feature in your WordPress
Dashboard. Below are the steps to get you going.

1. Log into your WordPress Dashboard.

2. Click Plugins then Add New in your navigation menu.
3. Using the search feature, search for a plugin by keyword, author, or tag.

Page 5 of 40 Study notes by : BHAVESH CHAVDA

CS-16 CMS USING WORDPRESS UNIT - 3

4. If you find a plugin that you’re interested in you can click “Details” to find out more
information on that particular plugin. We typically recommend using plugins that have been
updated more recently and with a lot of active installations.
5. Once you have found a plugin, click the Install Now button.
6. Once it has been installed, click the Activate plugin to enable it.

Installing WordPress Plugins Manually

There may be times when you want to install a plugin that is not included in the official
WordPress plugin repository (repo). Maybe you’re developing your own plugin or just
want to test a beta version of one. In this case, you can upload and install the plugin
manually. Here are the steps.

1. Download the plugin you want to install. It should be in a .zip format.

2. Log into your WordPress Dashboard.
3. Click Plugins then Add New.
4. Click the Upload Plugin button on the top of the page.
5. Click the Choose file button then select and open your .zip file.
6. Click the Install Now button.

7. The plugin will then be installed. Click the Activate Plugin button to enable it.

Useful plugins for website

Seo yoast

- It is one of the most downloaded WordPress plugin of all times.

- Yoast’s WordPress SEO is a comprehensive solution for all your on-site SEO needs.

- It allows you to add SEO title, meta description, and meta keywords to each post and
page of your site.

- You can also write custom title for your main site, archives, category and tag pages.

Page 6 of 40 Study notes by : BHAVESH CHAVDA

CS-16 CMS USING WORDPRESS UNIT - 3

- It also adds Open Graph meta data, Twitter Cards, Sitemaps and ping search engines
whenever you update your site.

- For more details about yoast seo please go to last pages:

Contact form 7
- Contact Form 7 can manage multiple contact forms, plus you can customize the form
and the mail contents flexibly with simple markup.

- The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and
so on.

- Contact Form 7 4.7 is now available.

Woocommerce
- WooCommerce is a free eCommerce plugin that allows you to sell anything,
beautifully. Built to integrate seamlessly with WordPress, WooCommerce is the
world's favorite eCommerce solution that gives both store owners and developers
complete control.

- WooCommerce is an open source e-commerce plugin for WordPress. It is designed

for small to large-sized online merchants using WordPress.

- Launched on September 27, 2011, the plugin quickly became popular for its
simplicity to install and customize and free base product.

WP Super Cache

- This plugin generates static html files from your dynamic WordPress blog.

- After a html file is generated your webserver will serve that file instead of processing
the comparatively heavier and more expensive WordPress PHP scripts.

- This plugin will help your server cope with a front page appearance on digg.com or
other social networking site.

- If for some reason "supercaching" doesn't work on your server then don't worry.

Page 7 of 40 Study notes by : BHAVESH CHAVDA

CS-16 CMS USING WORDPRESS UNIT - 3

- Caching will still be performed, but every request will require loading the PHP
engine.

- Super Cached html files will be served more quickly than PHP generated cached files
but in every day use, the difference isn't noticeable.

Regenerate Thumbnails
- Regenerate Thumbnails allows you to regenerate the thumbnails for all of your
image attachments.

- This is very handy if you’ve changed any of your thumbnail dimensions (via Settings
→ Media) or switched to a new theme with different featured image sizes after
previously uploading images.

Advanced Custom Fields

- ACF features an easy to use and powerful library of functions to load and display
custom field data.

- It is based off and uses the native WP postmeta functions, but also formats the value
based on the field’s type and field’s settings.

- This allows you to write less code and produce smarter websites!

- ACF requires you to have some prior knowledge of modifying your theme and
understanding PHP code.

- Once you are editing the correct template file, a simple the_field('hero_text') will
echo (display) the value, and get_field('hero_text') will return it for use as a variable.

- Be sure to read over all the available functions before starting work on the theme to
ensure you only have to write the code once!

Page 8 of 40 Study notes by : BHAVESH CHAVDA

CS-16 CMS USING WORDPRESS UNIT - 3

 How to Install Yoast SEO Plugin

First, thing you need to do is install and activate the Yoast SEO plugin.

Upon activation, you’ll notice a new menu item in the WordPress admin bar labeled SEO
with the Yoast SEO logo on it.

Now that you have installed and activated the plugin, let’s take a look at how to properly
setup this powerful plugin.

How to Setup WordPress SEO Plugin by Yoast

If you want to use Yoast’s WordPress SEO plugin as we do, then please follow along with the
steps carefully.

Step 1. General Settings

Clicking on the SEO icon takes you to the settings page for the plugin. Switch to the ‘General’
tab and you will notice a button to open the configuration wizard. We want you to ignore
this wizard, because we will be taking you step by step through each option.

Page 9 of 40 Study notes by : BHAVESH CHAVDA

CS-16 CMS USING WORDPRESS UNIT - 3

Step 2. Features
Yoast SEO comes with a lot of features. This page allows you to easily turn those features on
and off. By default, all options on this page are turned on.

We’ll talk about some of them later in this article. For now, let’s take a quick look at each
item and what it does.

 SEO analysis : Shows the SEO score and analysis for your content.
 Readability analysis : Shows the readabity analysis and score for your content.
 Cornerstone content : This feature allows you to mark and filter cornner stone content.
These are your most important pillar articles.

Page 10 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

 Text link counter : This feature shows the number of internal text links to and from and
article.
 XML sitemaps : Creates XML sitemaps for your website.
 Admin bar menu : Shows Yoast SEO menu in the WordPress admin toolbar.
 Security: no advanced settings for authors : Hides advanced SEO settings from authors
to improve security.
 Usage tacking : Allows plugin author to track some usage data. It is turned off by default.
 REST API: Head endpoint : This Yoast SEO REST API end point allows you or anyone else
to fetch SEO data for specific WordPress post or page. We recommend that you turn this
feature off if you are not building a headless WordPress site.
 Enhanced Slack sharing : This feature adds an author byline and reading time estimate to
the article’s snippet when shared on Slack.

Don’t forget to click on the Save changes button to store your settings.

Step 3. Integrations
Yoast SEO offers built-in integration for SEMRush and Ryte platforms.

SEMRush is one of the best SEO tools on the market. This integration helps you find related
keywords that match your focus keyword and then improve your content accordingly.

Ryte is an online tool that checks your website for indexibility and alerts you in Site
Health report when it is not indexable by search engines.

We recommend leaving them both on.

Page 11 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

Step 4. Webmaster Tools

Popular search engines allow site owners to add their sites using webmaster’s tools area.
See our complete Google Search Console guide to learn more about these tools.

Yoast SEO makes it easier to verify your website with all top search engines. In order to do
that you need to sign up for webmaster tools program for each search engine.

After that, you’ll be asked to add a meta tag to verify your ownership of the website. Simply
add the meta code that you received from the search engines in the respective fields.

Step 5. Search Appearance

Search Appearance in Yoast SEO settings controls how your website appears in search
results. This includes several options for your homepage, single articles, archives, and
taxonomies.

We’ll walk you through each one of them. Let’s start with the general settings first,

1. General

Here you can choose the symbol you want to use a separator between titles. The default
option is a dash, you can use it if you are unsure which symbol to choose.

Page 12 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

On this page, you can also choose the SEO title and meta description for your website’s
homepage.

Note: If you are using a static home page, then you can set the homepage title and
description by editing the page individually.

After that, you will find the knowledge graph and schema options for your website. You can
choose whether your website represents an organization or an individual.

Page 13 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

You can also upload a profileo picture for the individual or a website logo for a business.

2. Content Types

You can choose an SEO title and description for each post or page that you write. Yoast SEO
also allows you to set up an automatic template to use for them.

In case you forget to add them manually, these options will allow Yoast SEO to use default
settings to automatically fill in those options.

Page 14 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

You will be able to set search appearance and whether or not to show SEO meta box for
each content type. The default options would work for all websites.

After that, you can set SEO title template and a default meta description.

However, we recommend you only tweak the SEO title and leave the meta description field
blank. This would allow Yoast SEO to dynamically generate a description from the first few
lines of your article.

3. Media

By default, WordPress creates a new page for each image or media you attach to your posts
and pages. This page only displays the attachment media.

Those attachment pages have no significant text to provide search engines a context. Such
pages are considered low-quality content by search engines and have a negative SEO
impact.

Yoast SEO helps you fix that by redirecting users to the attachment file instead of the
attachment page. This option is set to ‘Yes’ by default and you don’t need to change it.

Page 15 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

4. Taxonomies

On the taxonomies tab, you can configure titles and meta for categories, tags, custom
taxonomies, and post format archives.

Default template variables should work for most sites. As for descriptions, please remember
that Yoast SEO picks up descriptions from your categories and tags.

5. Archives

The Archives tab allows you to control search appearance options for miscellaneous archive
pages on your website. This includes author, date, search, and 404 pages.

Page 16 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

The default options will work for most websites. However, if you run a single author blog,
then you need to disable author archive pages from search engines.

On a single author blog, the author archive pages are exactly like the date archive or your
blog pages. This creates duplicate content which affects your SEO rankings.

6. Breadcrumbs

Breadcrumbs are great for internal linking because it defines a clear path or trail to the page
you are on. These breadcrumbs also appear in search results giving your site an extra
advantage in the search.

The default settings should work for most websites, but if you want to change something
then go ahead and make your changes.

Page 17 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

Make sure you set the option to ‘Enabled’ to make it visible with your WordPress theme.

If you want more robust breadcrumb features, then take a look at All in One
SEO’s Breadcrumbs feature. You’ll get full control of how your breadcrumbs are displayed
and you can create custom breadcrumb templates for your specific needs.

Step 6. Social
As we said earlier, Yoast SEO is a powerhouse packed with many features to provide
comprehensive optimization.

One great feature of the plugin is that it integrates your site with Facebook, Twitter,
Pinterest, and other platforms.

Clicking on the Social link under the SEO menu will take you to set up these platforms. We
will show you how to configure each of them.

1. Accounts

The first tab under the social settings is for all your social accounts. This allows Yoast SEO to
tell Google about your social profiles. You need to simply add the URLs and Twitter
username for the main social profiles of your site.

Page 18 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

2. Facebook

You need to make sure that open graph metadata option is enabled under the Facebook
tab. It allows Yoast SEO to add Facebook open graph metadata in your website’s <head&gt
section.

You can set the image you want to use for your homepage.

This will help Facebook pick up the right thumbnail and page information when a post from
your website is shared on Facebook.

Page 19 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

Below that, you will can add a title and description for your homepage. This title and
description will be used when your homepage is shared on Facebook.

Additionally, you can provide a default thumbnail image URL. This image will be used for all
articles that do not have a thumbnail or any other image.

3. Twitter

As for Twitter, you can add Twitter cards into your site’s head section.

You can also choose the card type to use. We recommend using summary with large image.

4. Pinterest

Pinterest uses Open Graph meta data just like Facebook. Make sure that you have open
graph meta data box checked under Facebook settings.

Page 20 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

After that, you just need to enter the site verification code provided by Pinterest. Simply
visit your Pinterest account settings to add and verify your site. You will be provided with a
meta tag that you need to enter here.

Step 7. Tools
Yoast SEO comes with some built-in tools that allow you to perform some advanced tasks.
Most beginners may not need to use these tools. However, we will show you each tool and
what it does.

1. Import and Export

If you previously used another WordPress SEO plugin or a theme with built-in SEO functions,
then you can use this tool to import SEO data.

Page 21 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

You can also use it to import and export Yoast SEO plugin’s settings and use them on a
different WordPress site.

2. File editor

As your WordPress site grows, you may often come across tutorials asking you to add some
code to your website’s .htaccess file or robots.txt file.

Both of them are configuration files and have a huge impact on your website’s SEO. Yoast
SEO allows you to easily edit both files directly from the WordPress admin area.

3. Bulk editor

The bulk editor tool in Yoast SEO allows you to quickly add SEO title and description for all
your blog posts and pages.

Page 22 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

Under the Titles tab, you will find a blank field to add your new SEO title for that blog post.
After that click on Save link to store your changes.

To add descriptions, you will need to switch to the descriptions tab. Once again, you will be
able to add a description for each blog post or page and save it.

Page 23 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

Step 8. Optimizing Your Posts and Pages with Yoast SEO

Just installing and setting up this plugin is not enough. In order for you to really maximize
the benefit of this plugin, you need to customize the settings on per post basis.

Let’s take a look at how you can maximize the benefits by optimizing each post/page in
WordPress.

Simply edit any post or page and you’ll notice a new Yoast SEO metabox below the post
editor.

You can start by adding a focus keyphrase or keyword. This is the main keyword, which you
think your users will enter in search engines to find this post.

After that, Yoast SEO will check your post content for SEO and Readability analysis. You can
view the analysis to further improve your article.

Sometimes your post title and your SEO title might not be the same. Every time, you should
write a custom SEO description because the excerpt generator only picks up the first
paragraph which might not be the most important one.

Step 11. Optimizing Taxonomies for SEO (Categories and Tags)

Just like your post and pages, you can also override the SEO title and meta descriptions for
category, tag, and author archive pages.

Page 24 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

Simply visit Posts » Categories page and click on the edit link below any category. On the
category edit page, scroll down to the bottom and you will see the Yoast SEO meta box.

You can do that for all your categories, tags, and custom taxonomy archives.

 What is WooCommerce?

WooCommerce is an open-source flexible software solution built for WordPress-based

websites. It’s commonly used to create online e-commerce shops.

Page 25 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

With this software solution, anyone can turn their regular website into a fully functioning
online store, complete with all the necessary e-commerce features.

WooCommerce also allows users to manage their online stores easily. From setting up
product displays, and managing orders, to accepting multiple payment gateways.

What’s even better, this solution is free to use! Users can easily download the
WooCommerce plugin from the official WordPress plugin directory.

WooCommerce also comes with a beginner-friendly interface. You don’t need to be an

expert in IT or coding to begin. Thus, many businesses choose to use it.

In fact, according to Barn2, approximately 3.8 million online shops are running on
WooCommerce today.

This platform was first launched in 2011 by a company called WooThemes. Then, in 2015, it
was acquired by Automattic, the parent company of WordPress.

When WordPress and WooCommerce merged, their growth escalated. Until now,
Automattic continues to be an active developer for WooCommerce and its extensions.

WooCommerce Key Features

This popular e-Commerce plugin also comes with many great features users can take
advantage of; here are some of them:

1. Product Management

When starting an online business, one of the hardest things to figure out is how to sort and
manage their products’ inventory on the website.

Luckily, WooCommerce allows users to add in types and categories for every product they
sell, which helps product management.

Users can also freely customize the product by adding specific attributes such as size, color,
and other types and categories.

You can even provide special prices such as discounts and promos to reduce prices and
inventory for stock management.

2. Shopping Rules

WooCommerce provides a shopping rule feature that can be adjusted and designed to the
sellers’ needs to make it easier for buyers to order products.

Page 26 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

This feature is super helpful in defining the customers’ journey when purchasing from your
shop. Starting from the ordering process, payment to product refunds.

3. Order Management

With this order management feature, users can easily monitor all orders sent by their
customers on the website. Sellers can also create offline orders manually.

4. Sales Report

WooCommerce comes with a built-in sales report. However, users can also add extensions if
the default report feels too simple.

Some report extensions let you export reports into Excel or CSV documents. This way, you
can further analyze it to help your business development.

If you want to see profits and losses, the WooCommerce cost of goods extension from
SkyVerge might be worth checking out.

5. Flexible Payments

WooCommerce also provides a variety of payment methods such as cash on delivery (COD),
bank transfers, digital payments, and others.

The payment methods WooCommerce offers are fully compatible with other popular
payment gateways like Doku, Paypal, and Stripe.

Should You Use WooCommerce?

Now that you know what WooCommerce and some of its best features are, you might be
asking yourself whether you really need it.

The answer depends on what kind of website you’re creating and which CMS (content
management system) you are using.

As the name suggests, WooCommerce is intended to create e-Commerce sites. It’s

WordPress-based, so you need to be using the CMS as well.

If you’re planning to create an online store on WordPress, this plugin is a must-have. It’s
free and has many benefits.

To add, WooCommerce also lets users sell pretty much anything. Starting from physical
goods, digital products, reservations, and other services.

Page 27 of 40 Study notes by : BHAVESH

CHAVDA
 CS-16 CMS USING WORDPRESS UNIT - 3

Types of users that might benefit from using WooCommerce are

 Individuals who want to develop an online store website easily and professionally.
 Companies who want to quickly and easily build e-commerce sites stores themselves
 Users who need complete control over transactions on their online store website
 Anyone who wants to turn their WordPress websites into fully functioning online stores

WooCommerce Benefits

If all these have yet convinced you to use WooCommerce, here we’re going to highlight
some major benefits users will get from this plugin:

 Designed for WordPress. WooCommerce offers seamless and easy integration with the
content management system as it was built for WordPress
 Sell any products. WooCommerce allows its users to sell any kind of product. Starting
from physical or digital products to online services, and many more
 Complete e-commerce features. This plugin provides many useful e-Commerce features
for a smooth transaction between merchants and their customers
 Mobile friendly. WooCommerce also offers many mobile-friendly themes for its users,
both paid and free. This is important for user experience and also SEO
 Robust security. This plugin protects your data from any third-party platform. It also
secures all transactions between merchants and their customers by default
 Well documented. WooCommerce has comprehensive instructions and documentation
covering a wide range of topics. This is useful for web developers
 Fully-customizable. All stores running on WooCommerce can be customized freely. Not
only that, but users can also customize their AJAX for a more dynamic website
 Community support. Despite not having official customer support, WooCommerce has a
growing global community ready to help you out in case of a problem
 Free and paid extensions. The great thing about the WooCommerce extension is that it
allows users to customize their store using various features and integrations

Getting Started with WooCommerce

Now that you know more about WooCommerce and its benefits for your online business,
the next step is to learn how to get started.

The good news is, if you’re familiar with WordPress plugins in general, creating online stores
with WooCommerce will be quite easy.

Everything you need to customize your online store is right there on the dashboard, thanks
to its straightforward interface.

But of course, since WooCommerce is a WordPress plugin, you will need to install
WordPress on your web server before we begin the tutorial.

Let’s start!

Page 28 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

Step #1: Install WordPress

If you already have WordPress installed on your web server or hosting, go ahead and skip to
the next steps of this tutorial to install and set up WooCommerce.

Once you complete the regular WordPress installation, the next step is to create a website
and connect it to the desired domain address for the online shop..

Step #2: Install WooCommerce

When your website is set up, the next step is to install and activate the WooCommerce
plugin from the official WordPress plugin directory.

Here’s what you need to do:

1. Login into the WordPress admin area by entering your username and password
2. Head over to the Plugins menu on the left side of the WordPress admin area
3. When the plugins page comes up, click on the Add New button

4. Type in “WooCommerce” in the plugin search field and click Install Now
5. After the installation process is complete, click the Activate button

Once the activation process completes, you should have the WooCommerce plugin installed
on your WordPress website ready to use!

Step #3: Setup Your WooCommerce Shop

After the installation process is complete, a welcome message and a WooCommerce Setup
Wizard tool will appear on the screen.

To set up your new shop with WooCommerce, click on the Setup Wizard button. If you
accidentally skipped it, go to the Help page and click on the Setup Wizard.

In the first step, you will be asked to fill in the location details of the store. Users will have to
put their store addresses, country, city, postal code, and an admin email address.

Page 29 of 40 Study notes by : BHAVESH

CHAVDA
 CS-16 CMS USING WORDPRESS UNIT - 3

For the second step, WooCommerce will be asking in which industry the store operates. It
offers many options, starting from fashion, health, beauty, electronics, etc.

The Product Type Options on the WooCommerce Setup Wizard

Once you click continue, the third step is to clarify which types of products to list in the
store. WooCommerce lets users sell physical items and downloads for free.

Next, users will be asked to fill in their business details. You will be asked how many
products you want to display in the shop and whether you’re selling them elsewhere.

Enable the “Add recommended business features to my site” option and proceed to the
last step, where you have to choose a free theme for the store.

That’s it! Once you choose a theme, WooCommerce will automatically apply it to the
website, and you will be redirected to their homepage for more customization options.

Step #4: Add and Manage Products

Now that the shop is all set up, the next step before publishing would be to add and manage
the products you want to sell.

However, before going further, it’s important to understand what product categories,
attributes, and types on WooCommerce are.

Here’s a short explanation of each item:

 Product category is a way to group products with similar features. On WooCommerce,

you can create as many categories as needed and edit them at any time

Page 30 of 40 Study notes by : BHAVESH

CHAVDA
 CS-16 CMS USING WORDPRESS UNIT - 3

 Attributes filter products by sizes, colors, materials, and likes. You can choose to specify
attributes for each product or the entire store
 Product types define what kind of products users sell in their stores. WooCommerce has
several predefined product types

Luckily, adding and managing products on WooCommerce is pretty easy! Especially if you’re
familiar with how the WordPress dashboard works.

All you need to do is head to the Products menu on the left side of the dashboard and click
on the Create Your First Product or the Add New button.

Fill out the product title and add important and relevant information about your product in
the description. Then, proceed to set up the Product data page.

Product Data Menu on WooCommerce

On this page, sellers can define and customize their products as needed. In this example, we
categorized our goods as a Simple product type.

Here’s a short explanation of each menu item in the Product data field:

Menu Function

General To set the price of the products. Here users can select a discounted price
page and schedule sales for a certain period.

Inventory To specify the stock-keeping unit (SKU) of a product and check whether an
item is available (In stock) or not (Out of Stock).
Enable the Sold individually option if you want to sell items individually,

Page 31 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

not all at once.

To write information about the dimensions, weight, and category of the

Shipping
goods and help with the delivery estimation.

Linked Allow users to add related products and similar items to buyers. This can
products increase the visibility and sales of the products.

Lets users add attributes to the product. Users can also add custom
Attributes
product attributes for each product as needed.

To create purchase records for customers and enable or disable product

reviews.
Advanced
You can also specify an order menu on this page and choose a location
where the custom order for your product will be placed.

Fill in the required fields, add images to make the products more attractive, and click on
the Publish button once everything is ready.

You can then view all products and manage them on the Products page. Edit, delete, copy,
and highlight a product individually or with a bulk action.

Step #5: Manage Discounts

Everyone knows discounts are one of the best ways to increase sales. Luckily,
WooCommerce makes it easier for sellers to set up coupons.

Simply go to the Coupons page. There, sellers can view and edit coupons that have been
added to the store or add a new one.

Step #6: Manage Orders

Once all the products are listed on the website, and you know how to set up discounts, the
next step is to learn how to receive and manage orders for the shop.

On WooCommerce, sellers can see and manage all the incoming orders by clicking on
the Orders menu on the left side of the WordPress dashboard.

Page 32 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

A new order will appear on that page whenever a customer finishes a checkout process
after shopping. There, you can also easily update the order status for the customer.

Each order has a unique ID that has been filled in with various details – customer email,
contact number, address, payment method, and so on.

Step #7: Setup Reports

Sellers use the WooCommerce Reports feature from the left-side menu to get deeper
insights into the store’s performance.

On this page, sellers can monitor the number of purchases of goods, gross sales, average
daily sales, and other statuses.

Reports Feature on WooCommerce

You can even display statistics for separate products, product categories, coupons,
customers and guests, etc.

It’s pretty simple too! Choose the period in which you need the report and click on
the Go button to display it.

So, What Exactly is WooCommerce?

Woocommerce is a free plugin to create an online store on WordPress. It provides a full

range of complete e-Commerce features.

With this plugin, users can easily display products for sale and can be customized on the
online selling website according to their wishes.

Page 33 of 40 Study notes by : BHAVESH

CHAVDA
 CS-16 CMS USING WORDPRESS UNIT - 3

It’s commonly used by individuals and businesses who want to create their online selling
platform without hassle. Some of the major benefits of WooCommerce are:

 Fully-customizable
 Great flexibility
 Robust security
 Well documented
 Community-support
 Free extensions

 Contact Form 7
Contact Form 7 is one of the most popular contact form plugins for WordPress. It’s free to
use and lets you add a WordPress form using shortcode.

However, Contact Form 7 is very limited in features. One of the problems with Contact Form
7 is that the forms are styled plainly. Plus, the plugin doesn’t offer any built-in options to
change the style of your forms.

This makes it difficult to match the contact form’s design with your website theme or if you
want to edit the font and background color to make your form stand out.

If you want more customizable forms with advanced features, then we

recommend WPForms, which is the most beginner-friendly contact form plugin. It comes
with a drag and drop form builder, 700+ pre-built templates, and numerous customization
options.

That said, let’s take a look at how to style a Contact Form 7 form in WordPress.

Getting Started with Contact Form 7

First, you’ll need to install and activate the Contact Form 7 plugin on your website. If you
need help, then please see our guide on how to install a WordPress plugin.

Upon activation, you can head over to Contact » Add New from your WordPress dashboard.

Page 34 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

You can now edit the form for your website and start by entering a title for your form.

The plugin will automatically add the form’s default name, email, subject, and message
fields. However, you can also add more fields by simply dragging and dropping them where
you want.

When you’re done, don’t forget to click the ‘Save’ button and copy the shortcode.

The next thing to do is add it to your blog post or page.

To do that, simply edit a post or add a new one. Once you’re in the WordPress editor, go
ahead and click the ‘+’ sign at the top and then add a Shortcode block.

Page 35 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

After that, simply enter the shortcode for your Contact Form 7 form in the shortcode block.
It will look something like this:

[contact-form-7 id="117" title="Contact Form"]

Now, go ahead and publish your WordPress blog post to see the contact form in action. For
the sake of this article, we have used the default contact form and added it to a WordPress
page. This is how the contact form looked on our test site.

Now, are you ready to customize your Contact Form 7 form in WordPress?

Page 36 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

 Regenerate Thumbnails

By default when you upload an image to WordPress, it creates different sizes and
saves them in the uploads folder. Many WordPress themes take advantage of this
feature and define new image sizes, but the problem is that these new image sizes
are only applied on the images you upload after activating the theme.

To solve this problem you need to generate new sizes for all previously uploaded
images. This process is often referred to as regenerating thumbnails.

To generate images in newly defined image sizes, install and activate the Regenerate
Thumbnails plugin. After activating the plugin, go to Tools » Regen. Thumbnails.

Pressing the regenerate thumbnail button will start generating new image sizes
defined by your theme or in Settings » Media page. It may take a while, depending on
how many images you have on your website.

You can also regenerate image sizes for selected images in Media » Library.

Page 37 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

Regenerating images sizes does not affect your original upload. It creates additional
copies of images in the newly defined sizes.

It also does not delete previously created image sizes. You can delete the sizes if you
are sure that you haven’t used those sizes anywhere on your website.

 WP Super Cache

WP Super Cache is one of the most popular and best WordPress caching plugins. It’s a free
plugin and has over 2 million active installs.

WP Super Cache makes a copy of each page on your site in the form of a static HTML file.
This way, whenever someone visits your site, they’re served the copied version quickly
instead of generating the entire website from scratch.

As a result, your WordPress site’s speed and performance improve dramatically. The cache
plugin skips a lot of steps behind the scenes to ensure that your visitors don’t have to wait
for the page to open.

With a fast-loading website, you can see a boost in your WordPress SEO and search engine
rankings. Google gives a significant advantage to faster websites, as it uses website speed as
a ranking factor.

Besides that, you’ll also improve the experience of your website visitors. A site that loads
quickly encourages people to visit it more often. This way, you get more engagement and
conversions as users spend more time on pages.

Now, are you ready to set up WP Super Cache on your website? Let’s find out.

Page 38 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

Setting Up WP Super Cache – the Easy Way

The first thing you need to do is install and activate the WP Super Cache plugin on your
website. For more details, you can follow our guide on how to install a WordPress plugin.

Upon activation, WP Super Cache will notify you that caching is not enabled on your website
at the moment.

To enable cache, go to Settings » WP Super Cache. Then under the Easy tab, go ahead and
click on the ‘Caching On’ option. Once you’ve done that, click the ‘Update Status’ button.

After turning on the cache, you’ll need to scroll down to the Cache Tester section.

Once there, you should click on the ‘Test Cache’ button to check if it is working.

Page 39 of 40 Study notes by : BHAVESH

CHAVDA
CS-16 CMS USING WORDPRESS UNIT - 3

WP Super Cache will fetch your WordPress site twice and compare the timestamps of both
pages. If both timestamps match, then this means that caching is working on your site now.

Page 40 of 40 Study notes by : BHAVESH

CHAVDA