Creating websites using WordPress – A practical approach

R. Lakshmi Poorna1, M. Mymoon1, G. V. Ananthakrishnan2, A. Hariharan1

Knowledge Resource Division, CSIR-Structural Engineering Research Centre,
CSIR Campus, Taramani, Chennai.1
Knowledge Network Unit, CSIR-Structural Engineering Research Centre,
CSIR Campus, Taramani, Chennai. 2
Email: lakshmip@serc.res.in

ABSTRACT

The practical problems faced by many libraries today are to keep their web site content up-to-
date. Content Management Systems like WordPress, Joomla, Drupal, etc. allow creating and
managing websites easily without much of technical knowledge, experience with HTML or
web site design. It is also possible to easily update the web content without having to rely on
support from IT personnel.

The new web portal (http://krd.serc.res.in) of Knowledge Resource Division (KRD), CSIR-
SERC has been designed, by using WordPress and is being managed by KRD. This paper
describes the WordPress architecture, its advantages, installation in the Windows platform,
design of web site by using WordPress and our experiences in designing and managing the
KRD portal.

Keywords: Content Management Systems; WordPress; Knowledge Portal; Website Design

1. INTRODUCTION

Content Management System or CMS helps to present information on web sites and allows
controlling and managing its content. One can have unlimited number of pages and a full site-
search engine. Prior programming or HTML experience is not required. Editing can be done
with any normal web browser from anywhere using the administrator id and password.

The practical problem many libraries face today is to keep their web site content up to date.
CMS allows creating and managing our own web site without any technical knowledge,
experience with HTML or web site design without having to outsource the job to any third
party web developers or designers.

Listed below are the popular open source CMS options available:

 WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web

standards, and usability(1).
 Joomla is an open source solution that enables one to build web sites and powerful
online applications. Its ease-of-use and extensibility have made Joomla one of the
most popular web site software available(3).

 Drupal is a free software package that allows an individual or a community of users

to easily publish, manage and organize a wide variety of content on a website(3).

1
2. WORDPRESS

WordPress is a free and open source blogging tool and a content management system (CMS)
based on PHP and MySQL that keeps the informational content separate from the look of site
so both can be managed separately. It has many features including a plug-in architecture and
a template system and is the most popular blogging system used on internet(4).

2.1. WordPress Architecture

The platform: WordPress is a collection of php files that power the WordPress site(5).

The database: The content of WordPress site, whether it be posts or pages is stored in the
MySQL database. The WordPress code takes care of retrieving content from the database to
show on the website. The content is completely independent of the presentation and one can
radically change WordPress site looks without worrying about porting the content(5).

The theme: The WordPress theme controls the look of WordPress site like the structure,
format, colors etc. WordPress comes with a default theme, with which one can start designing
the pages straight away. Plenty of free and premium (to be purchased) themes are also
available tailored for particular use such as magazine themes, gallery or portfolio themes,
themes for business or corporate sites, personal sites, eCommerce sites, themes for video or
photo blogging. Premium themes offer better features and support. WordPress users may
install and switch between themes. Themes allow users to change the look and functionality
of a WordPress website or installation without altering the information content or structure (5).

Plug-ins: WordPress is an open sourced software which allows programmers to create new
functionality that enhances WordPress. These are packaged into plug-ins that can be installed
into the WordPress site. WordPress has rich plug-in architecture of around 18,000 plug-ins
which allows users and developers to extend its capabilities beyond the features that are part
of the base install(5).

Widgets: Widgets are small modules that offer users drag-and-drop sidebar content placement
and implementation of many plug-ins' extended abilities. Widgets allow WordPress
developers to add functionality to their sites. These small modules can be used to add
functionality such as a slideshow, Facebook-like box, small news slider, and more.

WordPress displays three main kinds of content: posts, pages and sidebars. By default, the
header, footer, and sidebars remain the same on every page of the site. Posts are blocks of
content that are displayed alone or as groups and are shown in reverse chronological order on
the homepage. WordPress can also create lists of posts displayed by category, tag, or other
attribute chosen.

Pages are content that are always on a certain webpage. They are “static” and typically,
pages display content about topics that change much less frequently than content displayed
using posts. For example, the contact form should go on a page.

2
Sidebar material represents a 3rd type of content, which cannot be easily characterized.
Basically, in sidebars, anything goes: newsletter signup forms, RSS feeds, lists of recent
posts, comments, whatever is chosen.

2.2. Customizing WordPress

The best way to customize the WordPress website is by changing the theme. Themes change
the look of the site by changing the styling on individual elements. For example, the theme
defines the font style, size and weight for each type of text. While most customization is done
by modifying the theme templates and CSS file, there are a few other, more advanced ways to
customize WordPress. Plug-ins can add new building blocks independently of the WordPress
core. After theme customization, plug-ins are the fastest and easiest way to modify
WordPress behavior.

2.3. Getting Started - WordPress Installation

WordPress can be installed using a number of ways. The following procedure was adopted to
install WordPress on Windows platform.

2.3.1. MySQL

MySQL is a database and is the most popular open source relational database management
system (RDBMS). Free-software-open source projects that require a full-featured database
management system often use MySQL. MySQL is the de-facto standard database for web
sites that support huge volumes of both data and end users like Wikipedia, Google, Facebook,
Twitter, Flickr, and YouTube etc. WordPress, Joomla and Drupal require the user to install
database server such as MySQL(2).

2.3.2. Installing MySQL on Windows

The latest version of MySQL can be downloaded from the www.mysql.com/downloads page.
The following screenshots depict the installation procedure for MySQL.

3
Figure 1. MySQL Installer

Figure 2. MySQL Download

4
 Figure 3. MySQL Installation

No registration is required for downloading. Click on No thanks, just start my download

link.

Figure 4. MySQL Installation

5
2.3.3. Installing WordPress

Once the MySQL installation is done, the next step is to install WordPress. Microsoft Web
Platform Installer (WebPI), a free tool provide by Microsoft can be used to install web
applications such as WordPress, Drupal etc. It works with Windows XP, Vista, Windows 7,
Windows Server 2003 and Windows Server 2008.

To install, open the link http://www.microsoft.com/web/downloads/platform.aspx and click

Free Download button. Save wpilauncher.exe file.

Figure 5. Microsoft Web Platform Installer

Run wpilauncher.exe file. The following windows will open:

Figure 6. Microsoft Web Platform Installer

6
 Figure 7. WordPress Installation

Type WordPress in search box and search the applications:

Figure 8. WordPress Installation

Select WordPress as shown in the below window, click Add button and then click Install:

7
 Figure 9. WordPress Installation

Select I Accept.

Figure 10.WordPress Installation

The following screen will appear:

8
 Figure 11. WordPress Installation

Given below are a series of steps to be followed :

In the Web Site box choose New Web Site option;

In the Web Site Name box, give the name you like your website to be called. For e.g.
krd.serc.res.in;

In the Physical Path box, choose a location where you wish to save all your web site related
files;

In the Host Name box, give the host name (For e.g. krd.serc.res.in) and click on Continue.
Host name is normally provided for name based access.

2.3.4. Administrator Module of WordPress

After installation, WordPress sites can be designed using its admin module (http://host
name/wp-admin).

9
 Figure 12. WordPress Administrator Module

Admin page will look like this:

Figure 13. WordPress Administrator Module

The administrator module will have the default WordPress theme for designing the web
page. Users are free to choose their preferred themes. Themes can be changed using
Appearance -> Themes menu. Users can choose between the available themes or install
new themes. As discussed earlier, theme controls the look of the website.

10
 Figure 14. Managing WordPress Themes

3. DESIGNING WEB PAGES USING WORDPRESS

On choosing the theme, the user can start designing web pages. On the left corner of the
admin page, one can see the options such as Posts, Events, Media, Links, Pages, Plugins,
Settings, etc.

Another important aspect before starting to design the website is how you want the menus,
pages, posts, plugins, etc. to appear in your website. We preferred to have a horizontal menu
bar at the top of the web portal, posts on the left side and quick links menu, events info,
archival info on the right side of the body area and chose our theme according to this design
requirement.

11
 Figure 15. KRD Portal

It is always better to work out all the design aspects including menus, sub-menus, contents to
be displayed under menus/sub-menus, daily posts, event organizer, search box, archives,
counter, contact forms, etc. The content that gets displayed when a menu option is clicked is
nothing but pages in WordPress.

Number of menus can be created based on requirement and theme support. Two menus – one
horizontal menu at the top of the page and one vertical menu in the form of quick links were
created.

12
The horizontal menu was automatically placed on the top by default (based on the theme).
The vertical menu was placed at the right side corner of body area using Widgets option of
WordPress.

Widgets allow a number of features like menu, archives, contact form, events, recent posts,
search box, and many more to be placed in the Widget area. We can chose to place a custom
menu (Quick Links in our portal), Continuous Announcement Scroll (To scroll important
info), Events Calendar, Archives (Archives of posts added periodically in the page) and Bliss
Hit Counter (To display the number of visits to the page).

Figure 16. Using Widgets in WordPress

Menus can be designed using Dashboard->Appearance->Menus. The horizontal menu bar

(named as Top Menu) contains 7 menu items such as Home, About Us, Journals, E-
Resources, IF&Citations, KRD Plus and Contact Us.

All these menus are major headings under which relevant sub-menus are created. For e.g.
About Us menu contains 7 sub-menus – Collection, Services, General Rules, Membership,
Publication, Staff and Visitor Information.

Menus can be of many types. It can be a Custom Link, Posts, Pages, Events, etc. For
creating a custom link menu, give a name of the menu in Label box of Custom Links option
and specify an URL, which you want to link on clicking the menu.

13
We used custom links to create main menu items with dummy character (e.g. #), as we did
not want any link to be opened on clicking the menu item, but instead required only the sub-
menus to be displayed on placing the cursor on the main menu items.

Figure 17. Creating Menus in WordPress

The sub-menus were created as pages, i.e. pages were created and added as sub-menu items.
Like-wise posts and events can be created and added as menu items. To distinguish between a
menu and a sub-menu, drag the sub-menu items under each main menu item one step inward.

Pages can be created using Dashboard->Pages->Add New option. Add new page option
will open the below window:

Figure 18. Creating Pages in WordPress

14
Give a title for the page, and type contents that need to be displayed under that title. For e.g. a
page created for our web portal named Collection with contents is displayed here under:

Figure 19. Creating Pages in WordPress

Once the contents are typed, click the option Publish to make it available for display.
Without publishing, you cannot use the page for display. Likewise, create the required
number of pages. Then, go to Appearance->Menus and under Pages option, click the
specific page and click Add to Menu. Drag and place the menu created at the end of the page
under appropriate main menu option.

Similarly, a vertical menu bar was created with the menu bar name Side Menu and was
placed using Widgets as explained in Fig. 17.

Next item to be created were posts. Posts can be created to display daily news, updates etc.
Our theme displays the posts on the left side of the body area by default.

15
 Figure 20. Posts in WordPress

A sample post:

Figure 21. Creating Posts in WordPress

The posts can also be archived using Archives widget.

16
The next significant aspect of WordPress pages is the flexibility of using Plug-ins. Plug-ins
are the most excellent part of WordPress and allows the user to easily attach properties they
wish to incorporate apart from the basic features.

For e.g. our portal incorporated WP-Table Reloaded, Contact Us form, Continuous
Announcement Scroller, Event Organizer, Bliss Hit Counter, etc. Few plug-in options
are available in the theme itself.

The user can also opt to add new plug-ins from other sources depending on the requirement.
The WP-Table Reloaded plug-in was a very useful one that allowed to create and manage
tables easily. A comfortable backend allows easy manipulation of table data. Continuous
Announcement Scroller provided our portal a vertical scroll continuous announcement
facility.

Figure 22. Creating Tables in WordPress

17
 Figure 23. Continuous Announcement Scroller Plug-in

After adding new plug-ins, activate them and then go to Dashboard->Settings->Plug-in

name to change its settings. If you do not want any specific plug-in that is already available,
simply deactivate it. They can also be permanently deleted, if so desired by the user.

4. LAUNCHING THE WEB PORTAL CREATED USING WORDPRESS

A separate server was installed for KRD. Next step was to install Internet Information Server
(IIS). This was followed by MySQL installation and WordPress installation using Web
Platform Installer from Microsoft (as explained earlier). Launching of the portal was made by
making an entry in the domain name system (DNS) for our portal (http://krd.serc.res.in) for
name based resolving.

5. CONCLUSIONS

It was an enriching experience to design the KRD website using WordPress with good
support from Knowledge Network Unit, CSIR-SERC. Although, it was bit hard to understand
the installation process and some features of WordPress in the initial stages, it was a smooth
journey afterwards.

Now, not only the administrator/designer, but all the staff members of KRD can handle the
administrator module of KRD portal and the contents are being updated daily without any
delay. With the knowledge and experience gained during the design of KRD portal, we were

18
able to design and launch the portal for the National Conference on Reaching Out to Users
through Technology (ROUTE-2013) within a span of 2-3 days.

Every library should adopt the latest technologies available to improve its services.

6. ACKNOWLEDGEMENT

This paper is being published with the kind permission of Director, CSIR - Structural
Engineering Research Center, Chennai – 600 113.

7. REFERENCES

1. Retrieved from www.wordpress.org

2. Retrieved from www.mysql.com
3. Retrieved from http://spyrestudios.com/free-content-management-systems/
4. Retrieved from http://en.wikipedia.org/wiki/WordPress
5. Retrieved from http://webenso.com/what-is-a-wordpress-theme/

19