Web Interface Designing Technologies

UNIT - IV

WORD PRESS

Introduction to word press

 WordPress provides the most amazing way of creating websites and blogs.
 More than 34% of the websites are built using WordPress. So, it can be said that this
popular content management system is famous for developing blogging sites and
websites.
 Today, WordPress has proudly brought the most supportive and useful blogging
community on the web.
 Thousands of sites (news, updates, resources, training, tutorials— the list is endless)
exist which inherit and make use of WordPress.
 The ultimate result is that WordPress helps develop and build a website handy for
anyone, even without a developer's skill set.

Features of Wordpress:
 WordPress is considered to be the most popular content management system due to its
characteristics.
 The most important features of WordPress are that you can create a dynamic website
without any programming and design knowledge.
 WordPress is theme-based, providing you options for various open-source and
premium design themes that can be integrated easily without any designing
knowledge.
 Plugins extend the functionality of WordPress, which can be used to add new required
modules.
 WordPress is Multilingual, which allows users to translate content into different
languages.
 WordPress has an inbuilt Media Management System, which manages images, music,
documents, etc., and can be used with text content.

Advantages of Wordpress

 WordPress is a free and open-source platform under the GNU General Public License
(GPL).
 Design theme customization in WordPress is straightforward.
 It allows you to manage users with different roles and permissions.
 WordPress media management is quick and easy to use.
 WordPress provides a WYSIWYG editor to manage your text content, which is very
useful for manipulating the layout of the document.

Department of Computer Science Page 85

 Web Interface Designing Technologies

Disadvantages of Wordpress
 You Need Lots of Plugins For Additional Features. ...
 Frequent Theme and Plugin Updates. ...
 Slow Page Speed. ...
 Website Vulnerability. ...
 Website Can Go Down Without Notice.

Word press Installation

System Requirements for wordpress Installation:

 If you are using Windows, you require installing WAMP (Windows, Apache,
MySQL, and PHP).
 If you are using Linux, you require installing LAMP (Linux, Apache, MySQL, and
PHP).
 If you are using MAC, you require installing MAMP (Macintosh, Apache, MySQL,
and PHP).
 Or you can also install XAMPP, which is Multi-platform and comes with (Apache,
MariaDB, PHP, and Perl).
 WordPress is compatible with PHP 5.2+ and MySQL 5.0 +

Download Wordpress

 WordPress is a free and open-source platform under the GNU General Public License
(GPL), and you can download it directly from WordPress's official website.
 You can also open the https://wordpress.org/download/

Wordpress Installation

Step 1: Download and install XAMPP on your computer

 The first step on your way to install WordPress locally is to download and install the
XAMPP software.
 Once the download finishes, run the file you downloaded to launch the XAMPP
installer.
 Just click Yes to continue. Depending on your Windows configuration, you might
also get a prompt about User Account Control (UAC). Just continue through that
prompt as well. Once you get through all of the prompts, you should see the standard
installer screen.
 Just click Next to continue.
 On the next screen, you can choose which components to install. To install XAMPP
and WordPress, you do not need all of the components. In addition to the required
components, all you need are:
o MySQL
o PHPMyAdmin

Department of Computer Science Page 86

 Web Interface Designing Technologies

 Again, this is all that’s needed to install WordPress locally. Uncheck everything else
and click Next.
 You can now select which folder to install XAMPP in.
 On the next screen, you can choose your preferred language.
 Then, you’ll get a prompt asking you to install Bitnami for XAMPP. You do not need
this to install XAMPP and WordPress, so feel free to uncheck the box.
 Once you click Next, you’re ready to run the install:
 The install process might take a few minutes:
 Once it finishes, you can launch the control panel to start working with XAMPP.
Step 2: Start the modules and test your server
 To install XAMPP and WordPress properly, you’ll need to run two modules:
o Apache
o MySQL
 You can start both modules from the XAMPP control panel:
 Once you launch them, you should see their status turn to green
 And now you should be able to test that your local server is working by going to
http://localhost/ in your web browser of choice:
 If all went well, you now have a functioning XAMPP server on your Windows PC!
But now it’s time to install XAMPP and WordPress. So here’s how to get a
WordPress site up and running on XAMPP.
Step 3: Add the WordPress files
 First, you need to go to wordpress.org and download the latest version of WordPress.
 Then, in Windows, navigate to the folder where you installed XAMPP.
 Then, in that folder, find the htdocs subfolder:
 In htdocs, create a new folder for your test site. This folder name will become the
sub-name used to access your site. For example, if you make the folder testsite,
you’ll access your site by going to http://localhost/testsite.
 Once you create the folder, extract the WordPress .zip file you downloaded from
wordpress.org into it:
Step 4: Create a database for WordPress
Next, you need to create a MySQL database for your WordPress install. To do that, launch
PHPMyAdmin from your XAMPP control panel:
Then click on Databases at the top:
And enter a name for your database and click Create. Your name can be anything – just
remember it because you’ll need it for the next step:
Step 5: Install WordPress locally via the on-screen installer
When you visit your test site, you should see the normal WordPress installer. Remember,
your test site is just http://localhost/FOLDERNAME:
The only step where this process will differ from a normal install is the database details.
When you get to the database details, enter them like this:
 Database Name = Name of the database you created in PHPMyAdmin
 Username = ―root‖
 Password = leave blank
Then finish the rest of the WordPress install process like normal.
Once you complete the process, you should see your brand new WordPress install running
perfectly on your local host:

Department of Computer Science Page 87

 Web Interface Designing Technologies

Working with posts:

 Adding posts in WordPress to insert content (text, multimedia, and other documents)
is a common activity of a WordPress admin user.
 Posts are also commonly termed blog posts or articles, or blogs. Putting the content on
your website is done using this feature of WordPress.

Steps to add a new Post in wordpress

1. To add a new Post on your website through WordPress, you must log in to the
WordPress account.
2. There you will see Admin Sidebar Menu on the left.
3. Go to the Posts on the menu and choose Add New.
4. Now you will see a new screen where you will be given the option to add a title and
content for your web page.
5. There are two primary components of this screen:
1. Title: where you can insert the title of your post
2. Content: where you will inscribe the content for your post. It can be done in
two different ways:
1. Visual mode lets you write in a regular format using WYSIWYG
Editor.
2. Text mode allows you to write in HTML format like you are writing in
Windows Notepad.

Publishing a new post in wordpress

Once you have created the content for your blog or site and set up all the formats and other
tags, you now need to publish the content. You have to click the Publish button to publish
your desired post. This button will be available on the right side of the panel.

Here is the list of components that comes under the Publish section:

1. Save Draft: This button saves the post as a draft.

2. Preview: This button is for previewing the post before publishing.
3. Move to Trash: This link is for deleting the post.
4. Status: This option is to change the current status of the post, whether it is published,
pending, or under reviewer draft.
5. Visibility: This option is to modify the post's visibility to public, private, or password
protected.
6. Published: This option is for setting the date and time of publication.

Edit existing Post:

 You must go to Posts> All Posts to edit a post. There you will see the list of all
created posts.
 Hover your mouse over any post; You will see the option of Edit and Quick Edit.
 You can use any one of the options to make changes to your post.

Department of Computer Science Page 88

 Web Interface Designing Technologies

Delete existing Post

 You must go to Posts > All Posts to delete a post. There you will see the list of all
existing posts.
 Hover your mouse over any posts; you will see a Trash link allowing you to delete the
post.

Working with pages

 Adding a new page is essential because there are situations when you want to create
new web pages for your site, which may contain additional content, or you redirect a
link to a new page that contains information regarding that topic or link.
 Pages are a collective set of static content that does not change its display information
dynamically during the website run.

Adding a New Page in WordPress

Here are the steps to add new pages in WordPress, and this is similar to adding a new post:

1. To add a new Post on your website through WordPress, you must log in to the
WordPress account.
2. You will now see the screen of the Dashboard.
3. On the left side of your Dashboard, you will see Admin Sidebar Menu.
4. Go to the Pages on the menu and choose Add New.
5. Now you will see a new screen where you will be given the option to add a title and
content for your web page.
6. There are two primary components of this screen:
1. Title: This is an input field where you can insert the title of your page
2. Content: This is a textarea where you have to inscribe the content for the page.
It can be used in two different ways:
1. Visual mode: This is where you can write in a regular format by
using WYSIWYG Editor.
2. Text mode: This is where you can write in HTML format like in
Windows Notepad.

WYSIWYG Editor

 WYSIWYG Editor has similar capabilities to a Word Processor, and it is a primary

interface where you can draft and format your content.
 Various buttons for editing formatting include Bold, Italic, Word Strike, Bullet-List,
Number-List, Block-Quote, Left, Right Alignment, Justify, Add-Link, Distraction-
Free Writing Toggle Button, Toggle Toolbar, and the horizontal line.

Department of Computer Science Page 89

 Web Interface Designing Technologies

Publishing a New Page in WordPress

Once you write your entire article or content, you can publish the page to the user by clicking
the Publish button from the right window screen.

Here is the list of components that comes under the Publish section:

1. Save Draft: This button saves the page as a draft.

2. Preview: This button is for previewing the page before publishing.
3. Move to Trash: This link is for deleting the page.
4. Status: This option is to change the current status of the page, whether it is published,
pending, or under reviewer draft.
5. Visibility: This option is to modify the page's visibility to public, private, or password
protected.
6. Published: This option is for setting the date and time of publication.

Edit Existing page

You must go to Menu> All Pages to edit a post. There you will see the list of all created
pages. Hover your mouse over any page; You will see the option of Edit and Quick Edit. You
can use any one of the options to make changes to your page.

Delete Existing page

You must go to Pages > All Pages to delete a page. There you will see the list of all existing
pages. Hover your mouse over any page; you will see a Trash link allowing you to delete the
page.

Working with widgets

WordPress widgets are software components used to add various features to websites’
sidebar areas using little to no code. These features include galleries, calendars, links to
recent posts, and social links – it’s difficult to imagine an attractive site without them.

A WordPress widget is a website’s component containing media, navigation links, or

additional information separate from the main content of a post or page.

WordPress widgets can be placed on every page of a website or specific pages only, like the
home page.

Usually, widgets are located in special content places called widget areas, such as the sidebar,
footer, header, or above and below the content. These areas may differ from one theme to
another. You can add more widget areas using code.

These WordPress widgets examples include:

Department of Computer Science Page 90

 Web Interface Designing Technologies

 Advertisement widget – gives a commission every time a site visitor clicks on a

product or service ad featured in your widget area.
 Business Information widget – displays a brief description of your business, such as
its location and owner.
 Social media icon widget – leads people to your social media profiles with a single
click.

Working with Menus in Wordpress

Defining a Menu

 Login to the WordPress Dashboard.

 From the 'Appearance' menu on the left-hand side of the Dashboard, select the
'Menus' option to bring up the Menu Editor.
 Select Create a new menu at the top of the page
 Enter a name for your new menu in the Menu Name box
 Click the Create Menu button.
Your new custom menu has now been defined.

Adding Items to a Menu

You can add different link types into your menu, these are split between panes left of the
menu you're currently editing.

 Locate the pane entitled Pages.

 Within this pane, select the View All link to bring up a list of all the currently
published Pages on your site.
 Select the Pages that you want to add by clicking the checkbox next to each Page's
title.
 Click the Add to Menu button located at the bottom of this pane to add your
selection(s) to the menu that you created in the previous step.
 Click the Save Menu button once you've added all the menu items you want.
Your custom menu has now been saved.
Note The Screen Options allow you to choose which items you can use to add to a menu.
Certain items, like Tags are hidden by default.

Deleting a Menu Item

 Locate the menu item that you want to remove in the menu editor window
 Click on the arrow icon in the top right-hand corner of the menu item/box to expand
it.
 Click on the Remove link. The menu item/box will be immediately removed.
 Click the Save Menu button to save your changes.

Department of Computer Science Page 91

 Web Interface Designing Technologies

Customizing Menu Items

1. Navigation Label
This field specifies the title of the item on your custom menu. This is what your
visitors will see when they visit your site/blog.
2. Original
A link to the original source of the menu item (e.g. a link to view the post or page).
Following items are hidden by default. Use Screen Options to show the required
fields.
3. Title Attribute
This field specifies the Alternative ('Alt') text for the menu item. This text will be
displayed when a user's mouse hovers over a menu item.
4. Link Target
Select "Same window or tab" or "New window or tab" from the pulldown.
5. CSS Classes
Optional CSS Classes for this menu item
6. Link Relationship (XFN)
Allows for the generation of XFN attributes automatically so you can show how you
are related to the authors/owners of site to which you are linking. See Link
Relationship for details.
Description
Description for this link. The description will be displayed in the menu if the current theme
supports it.
 Click on the arrow in the top right-hand corner of the menu item to expand it.
 Enter the values for the required fields that you want to assign to the item.
 Click the Save Menu button to save your changes.

Creating Multi-level Menus

When planning the structure of your menu, it helps to think of each menu item as a heading
in a formal report document. In a formal report, main section headings (Level 1 headings) are
the nearest to the left of the page; sub-section headings (Level 2 headings) are indented
slightly further to the right; any other subordinate headings (Level 3, 4, etc) within the same
section are indented even further to the right.

The WordPress menu editor allows you to create multi-level menus using a simple 'drag and
drop' interface. Drag menu items up or down to change their order of appearance in the menu.
Drag menu items left or right in order to create sub-levels within your menu.

To make one menu item a subordinate of another, you need to position the 'child' underneath
its 'parent' and then drag it slightly to the right.

 Position the mouse over the 'child' menu item.

 Whilst holding the left mouse button, drag it to the right.
 Release the mouse button.

Department of Computer Science Page 92

 Web Interface Designing Technologies

 Repeat these steps for each sub-menu item.

 Click the Save Menu button in the Menu Editor to save your changes.

Adding Your Menu to Your Site

If your current theme supports custom menus, you will be able to add your new menu to one
of the Theme Locations.

 Scroll to the bottom of the menu editor window.

 In the section titled Theme locations, click the check box for the location where you
want your menu to appear.
 Click Save menu once you've made your selection.

If your current theme does not support custom menus, you will need to add your new menu
via the Custom Menu widget in the Appearance Widgets Screen.

Congratulations! Your new custom menu has now been added to your site.

Working with media:

 Media is a tab in your WordPress admin sidebar which is used to manage user
uploads (images, audio, video, and other files).
 Under the Media menu, there are two screens.
o The first screen Library lists all the files in the media library.
 These files can be edited and deleted from the library.
o The second screen is Add New, which allows users to upload files.
 Users can also upload media (images, videos, etc) while writing a post
or page. However, the Add New link under allows users to upload files
without attaching them to a specific post or page.
Add Files from Your Computer
1. In the Media Library click Add New.
2. Select the media files you want to upload from your computer and click upload or
open (the name of the button depends on which browser you’re using.)
3. You can also drag and drop media files from your computer directly into the Media
Library.
Edit Media Details
1. Media details include the title, caption, alt text (for images), description, URL,
and metadata (like size, type, and upload date) of the media file. To edit these
details, follow these steps:

Department of Computer Science Page 93

 Web Interface Designing Technologies

2. In the Media Library, click on the media file you want to edit. You’ll see a border
around the thumbnail and a number in the bottom right corner.
3. Click the Edit button.
4. Make your changes to any of the editable fields.
5. Click Done in the lower right corner when you’re finished.

***

Essay Questions:

1. Explain how to add, publish, edit and delete posts in Wordpress.

2. Explain how to add, publish, edit and delete pages in Wordpress.
3. Write the steps to install Wordpress.

Short Questions:

1. Explain the advantages and disadvantages of Wordpress.

2. Briefly explain about widgets in Wordpress.
3. Explain working with media in Wordpress.

Department of Computer Science Page 94