Popularly known as a CMS (Content Management System) and is in opinion of thousand

developers, an amazing tool which can be used to create static content websites in a matter of

minutes.

WORDPRESS

CONTENT MANAGEMENT SYSTEM

1

WORDPRESS

CONTENT MANAGEMENT SYSTEM

INTRODUCTION

Wordpress is a great tool

PURPOSE

[Type the sidebar

content. A sidebar is a

standalone

supplement to the

main document. It is

often aligned on the

left or right of the

page, or located at the

top or bottom. Use the

Drawing Tools tab to

change the formatting

of the sidebar text

box.]

2

CONTENTS

1. Introduction

a. Wordpress

b. Prerequisites

c. Help

i. Google

ii. Codex

iii. Forums

2. Getting started

a. Installation

b. Understanding the basics – theory

c. Dashboard says, “Feel at home”.

d. Fresh look of the website

e. Dashboard Settings

3. Conceptually – Dashboard Components

a. Post

b. Pages

c. Media

d. Themes

e. Plugins

f. Tools

g. Settings

4. Level 0 – Explorer

a. Step ZERO - Grab an Idea!

b. Step I - Lorem Ipsum (create pages)

c. Step II – Pick a lovely theme

i. Theme options

ii. Widgets

iii. Header

d. Step III – Create Content

e. Step IV –Menu

f. Step V – Plugin – Contact Us/ Registration

5. Level 1: Adventurer

a. Theme Editor - Do‟s and Don‟ts

6. Level 2: Designer – Theme Development

7. Level 3: Developer – Plugin Development

3

INTRODUCTION

ABOUT WORDPRESS

4

PREREQUISITES

SOFTWARES (ASSUMING YOU ARE WORKING WITH WINDOWS)

1. Local Server e.g. Wamp Server

2. Wordpress (Zipped) - http://wordpress.org/download/

SKILLS

1. HTML, CSS

2. JavaScript

3. PHP (Won‟t harm you to know the basics)

AN IDEA

What exactly are you planning to create? If you have one, that is great. Try to use this tutorial to

implement your idea. If you don‟t have one, well, we have to begin somewhere, right? So we‟ll take a

general example to walk you through the basic to kick start right away. But I‟d still suggest the former

approach.

(Some fancy lines)

5

HELP

Well yes, there will always be a time when you need some help, and yes, the first suggestion, I, or any

other developer will put forward is, none other than:

“GOOGLE”

Even though we‟ve used it enough, we might not be able to make efficient use of it while looking for

help. It‟s not a piece of cake, in the beginning. You don‟t get the results, if you don‟t search it right. I

don‟t know about you, but I wasn‟t any good at keying the RIGHT words. Google will make your job

easier by about 70%. If you know how to do it, Great! If you don‟t, you better learn soon enough.

CODEX

http://codex.wordpress.org/ - It‟s the online manual for WordPress and a living repository for

WordPress information and documentation. Everything about WordPress technicalities, you can find it

here. However, sometimes they might not provide many examples, and it might seem too complicated.

At times like those, it‟s best to resort to help from someone who has sailed in your boat. And for that,

you‟ve got these forums.

FORUMS

http://wordpress.org/support/ - Official Support forum. It‟s the place where you need help, and people

help you out.

6

GETTING STARTED

INSTALLATION

Let‟s set this Wordpress thing up. So do you have everything needed? Yes, the softwares, Wamp and

Wordpress. Yes? So let‟s begin.

Just so you know, when I wrote this tut, I was using WordPress 3.6 and WampServer Version 2.2.

Extract the WordPress (Zipped) that you downloaded. You are probably going to get this:

Now Select all and Copy. (CTRL+A, CTRL+C)

Now that we‟ve copied the entire folder we are going to go to C:/wamp/www/

Now create a New Folder. You can name it whatever you want but this is going to be used in the

address you‟ll use to run you wordpress website, even if locally, so I‟d suggest keeping it short and

related to your website.

Let‟s say you named it “Cyclotron” (Let‟s assume you like the geeky names).

Now PASTE the whole stuff you copied earlier inside this folder

7

(Note: Screenshots are just to give a bit of confidence that you are going in the right direction)

So now, we need to setup the database before we start. We need to create a new Database. If you know

how to do it skip the section below. Others should try it once by themselves, it‟s pretty obvious.

Just for the sake of

Open up your web browser, and Go to “http://localhost/phpmyadmin”.

It will probably look something like this.

8

So you see the top navigation like:

Click on database and it will show you a list of databases and create a database and just remember its

name. We‟re going to need it.

INSTALLING WORDPRESS

Step 1 – Create a config file

There are two ways to do it, first is to open your web browser and go to url

. Note that cyclotron here refers to the name of the folder in http://localhost/cyclotron

C:/wamp/www/ that you created.

Go ahead click “Create a Configuration file”.

9

“Let‟s Go!”

You have to give you database name here. It‟s “cyclotron_db” in our case.

If you didn‟t change anything then the Username and password of database services provided by wamp

server are “root” and “” respectively. Yes password is an empty string, so just leave it empty.

10

All right sparky! It‟s time to “Run the install”. And your installation is done. Now all you need to do is do

some basic admin registration for your website.

Be careful and choose a good username and password and remember it. While you are using wordpress

at localhost, its best to not forget your password as you might not be able to recover it easily.

Well, to be honest, I always kept the used admin-admin approach. I kept both username and password

to be same – “admin”. But one should take care for security reasons.

“Install WordPress”

11

“Log in”

Enter your credentials.

And you‟ll be redirected to your Dashboard.

12

UNDERSTANDING THE BASICS – THEORY

Before we begin with the technicalities of using WordPress it won‟t harm to talk about the basic

structure of wordpress, for a brief moment.

It‟s like a stage. You work in the background to create a show. Dashboard is that stage behind the

curtains. You do all your work here and the end result - the final presentation will be reflected on the

front end, the website.

DASHBOARD

If your website URL is “http://www.cyclotorn.com/” then the wordpress admin login will be at

“http://www.cyclotron.com/wp-admin“

In our case it is http://localhost/cyclotron/wp-admin.

It gives you options to –

Write content. Categorize it.

Choose how the site looks.

Add functionalities to your website.

Add members to contribute to your website.

FRONT END

Simply shows you the output. You can see it by going to the URL- http://localhost/cyclotron.

It‟s like a simple Input-Process-Output Model.

INPUT -

DASHBOARD

PROCESS -

WORDPRESS OUTPUT - SITE

13

DASHBOARD SAYS, “FEEL AT HOME”.

Let‟s take a quick look at navigation, so that you don‟t feel lost.

Your Home.

•The first page you see every time you login.

•Keeps you updated about wordpress

Content area - This is where you manage your content

Customizing

•Looks

•Functionalities

Admin Priviliges

•Managing user, permissions

•Using tools

•Settings

WordPress ADMIN BAR

Workspace

NA

VIG

AT

ION

14

FRESH LOOK OF YOUR WEBSITE

IN your dashboard, in the top-left corner, you‟ll see a dropdown hang to the name of you website. “Visit

site”.

Click on it to visit your website. Your website will look something like this if you are using wordpress 3.6.

The default theme for Wordpress 3.6 is “twentythirteen” and it looks like below.

How a post looks like – Click on “Hello world!”.

And that‟s how a comment looks like – “One thought on „Hello World‟”.

15

How a page looks like

When you click on sample page, which is right below the header, in the navigation, you are redirected

to a page that looks like this:

16

DASHBOARD SETTINGS

17

CONCEPTUALLY

Dashboard Components

POSTS

A typical post has

- Data/Idea/Information

- Category

- Creator/Author

- Comments

- Tags

- Featured Image

- Excerpt

So a post is basically something you can categorize and have authorship over. In a typical blog, a post is

your new blog entry. These are meant to be scalable to a huge extent. Search in a typical wordpress site

is meant to search for posts that match your query.

Typical Post Examples – “Shifted to a new office”, “Working with rails”, “Building up a Management

System”.

So they are basically like blog posts. You may use them or you may not use them, because in most of

the static websites, (which are not blogging websites) we don‟t need blog posts like that. We usually

have 5-10 pages of static content which are to be showcased on the website.

PAGE

A page is necessarily just heading and content. You don‟t categorize pages, you don‟t tag them, and

you are not the author. Pages belong to the website and are meant to just display some information.

They‟re static, mostly the same. We don‟t change the content of pages often.

Typical Page examples – About Us, Contact us, Our Work.

Pages are used most in making of static websites which showcase their information for they solve the

bare minimum purpose of a title and content.

18

MEDIA

Everything that you are going to use in your website has to be there on the server. So what you can do

is upload you stuff in the media library. Mostly it is meant to be used for images only, but it sure can be

used to upload other stuff as well. The only thing is that the upload size has a limitation, which is usually

fair enough.

So, I guess it won‟t be possible to make a website in wordpress where you can watch movies online or

something like that, by uploading movies to your server, as the limit for wordpress is around 2-8 MB.

Though, you sure can embed HTML in your pages/posts and thus embed videos hosted on other

servers.

THEMES

Wordpress community is huge and you can find several people contributing to wordpress by making

themes for free. Some put License restrictions on usage, but then basic wordpress themes namely

“twentyeleven”, “twentytwelve” and “twentythirteen” are absolutely free to use.

Themes will decide how your website will look like, mostly. Some parts of theme are customizable like

header, navigation bar, colors (in some themes), website title, sidebar, footer (varies from theme to

theme).

PLUGINS

Wordpress Plugins are functionalities that you can „Plug‟ into your wordpress installation.

The most commonly used example is of such functionalities is HTML Forms. Suppose you need

functionality in wordpress to get user input and store it or email it to your id, you‟re going to need

some plugin. Plugins are developed by other wordpress users who understand how to play along with

wordpress and get your job done.

You don‟t need to get into those details, not yet.

TOOLS

Import/Export

SETTINGS

19

20

TODDLER – LEVEL ZERO

GRAB AN IDEA!

From here on we are going to make a complete website, so we need to be clear about what we want

the end result to be like. In case you are not sure what you want to make initially we‟ll grab on to the

following example and make fully functional website. Otherwise you can use to following steps to

create your idea into a beautiful wordpress site.

OUR EXEMPLARY IDEA:

Home (Landing page)

Portfolio (Showcasing our work)

o Wordpress

o Magento

o Ruby On Rails

o PHP CodeIgniter

o Razor (.NET Framework 4 MVC)

Services

o Web Development

o Consulting

o Training

Team

Contact us (Contact Us form + Google Maps)

How much time do you think it’ll take?

CONTENT PAGE

HEADER

Portfolio Services Team Contact Us Home

21

STEP I – LOREM IPSUM

Besides the times when you are just learning, there will be times when you just won‟t know what to

write. You‟ll have no content at all, and won‟t feel like beginning the project. Well, that‟s we lorem-

ipsum comes to your rescue. “Lorem Ipsum” is a widely used text for writing temporary content.

You can find a variety of sites out there which provide the “lorem ipsum” text for web

developers/designers. I personally prefer http://html-ipsum.com/.

And we will be using this same text for our website as well, since content may vary depending on the

purpose of website.

STEP II – PICK A LOVELY THEME

So well if you‟ve just turned your Computer “ON”, it‟s time to create “Cyclotron”. So go to your web

browser and go to . http://localhost/cyclotron/wp-admin

Login with your username and password and you get the dashboard to manage your site.

No look in the left side menu, for a tab named “Appearance”. Click “Themes”.

You‟ll come to a page which shows the active theme and other themes that are locally available or have

been previously developed. Moreover if you are connected to internet, you can browse themes by

clicking on “Install Themes” and download them to your wordpress installation/website.

22

You can give keywords for search or define some parameters or just click search.

Well my keyword was “responsive” and I picked a theme called “Clean Retina”. You could pick any

theme you like. You can also choose to preview theme before you install it.

23

After installing the theme, you may or may not activate it immediately. You can opt for a live preview

before finalizing a theme.

NEW LOOK:

While selecting a theme there are some things you may need to watch out for:

What are you looking for in a theme?

Theme matching the profile of the website content – Elegant theme for a Business Site and

Creative theme for artistic websites.

Good typography

Theme that solves the purpose –

o Does it have a slider like we need

o Does it support sidebars

o Is it responsive

Theme options – Always handy

License of the theme

24

THEME OPTIONS

Go to Appearance > Theme options

Theme options are provided by the theme designer to help you customize the theme according to your

need. I‟ll leave it to you to figure out how to use these options to your advantage.

WIDGETS

Go to Appearance > Widgets. Keep it open in one tab.

And in the other tab open the front end http://localhost/cyclotron.

25

Appearance > Widgets Sidebar

So as you can see the widgets are the blocks that will be added in the sidebar.

HEADER

Go to Appearance > Header - It allows you customize header in several ways which I‟ll leave for the

reader to do as an exercise.

26

STEP III – CREATE CONTENT

Now we have the theme laid out and we have clue about how it‟ll look. We can always switch to

another theme, though it may have some overhead. Now it‟s time to create content.

So first step would be to distinguish which content goes in Pages and which content goes in Posts. Well

it takes some experimenting to understand the difference in usability of both, but for now we‟ll go by

this rule –

Single page content – “PAGE”

Display of Excerpts of multiple pages on a single page – “POST” with Categories (We‟ll get there)

So revisiting our Exemplary Idea:

Home (Landing page)

Portfolio (Showcasing our work)

o Wordpress

o Magento

o Ruby On Rails

o PHP CodeIgniter

o Razor (.NET Framework 4 MVC)

Services

o Web Development

o Consulting

o Training

Team

Contact us (Contact Us form + Google Maps)

We figure out that Team, Home, Services, Web Development, Consulting, Training, Contact us are going

to be single pages and Wordpress, Magento, Ruby on Rails, PHP CodeIgniter, Razor are categories. We

are going to have some dummy posts, for each category mentioned above. It may make no sense right

now, but once you are done adding content we‟ll move forward to creating navigation menu.

ADDING A CATEGORY

It is also pretty simple and can be done by going to posts>categories and that‟s all you need to add

new categories. You can set the default category by going to Settings > Writing Default post Category.

By default „uncategorized‟ is the default category.

27

ADDING A PAGE

It‟s pretty simple and I won‟t go through the trouble of guiding you with screenshots, so go ahead

make some dummy pages titled Team, Home, Services, Web Development, Consulting, Training and

Contact us. And go ahead and disable Sample page or we can say, change its status from „Published‟ to

„Draft‟. (You can Quick Edit sample page)

ADDING A POST

A post has quite a many options that you might need to know about except title and body.

1. YOU CAN ASSIGN POSTS A CATEGORY

28

2. SET FEATURED IMAGE (LOOKS NICE, TRUST ME)

3. YOU CAN ADD EXCERPT

4. ADD TAGS

Now I am assuming that you‟ve create some content. Below are the screenshots of how some things in

your dashboard should look like.

PAGES > ALL PAGES

29

POSTS > CATEGORIES

POSTS > ALL POSTS

Add as many posts as you want. For the sake of demonstration only, I‟ve added about 4-5 posts.

30

PART IV – MENU

Now we‟ve got our content just right, now its time to create a navigation menu. Go to Appearance >

Menu

PAGES

Select the pages from the left side tab and click „Add to Menu‟.

Now drag and drop and create structure as given below.

31

CATEGORIES

Now in the categories tab, select the categories you want to show in the navigation and then „Add to

Menu‟.

32

LINKS

Now we need a container for these categories which doesn‟t redirect to any other page. So we‟ll use

link as given below.

Now we will rearrange the structure and get our final navigation menu.

33

USING THE MENU IN THE THEME

We can create several menus at one time, and make them distinct by giving them name. In previous

examples I used the name Top while saving the menu for the first time. So we‟ll visit the site and hover

on left side of wordpress admin bar which says something like “cyclotron website” in our case, and go

to customization > Static Front page > Static page > Front page > Home.

We could have made these settings from the Dashboards > Settings > Reading as well.

Here we need to understand that the landing page for a wordpress site is by default the latest posts of

that blog. However, this can be changed and a static page can be made the landing page and that‟s

exactly what we are going to do. Below are the steps to do the same from dashboard.

34

35

STEP V – PLUGIN

While working with wordpress you might need to perform some actions which are beyond the scope of

HTML, CSS, or JavaScript. Rather you‟ll need database access or PHP to do some stuff. Instead of doing

it directly, we will use plugins.

I‟ll be guiding you through but I‟ll leave it to you to make it work. For the start lets use a simple plugin.

The purpose: On contact us page, we want a registration form.

Plugin: Visual form builder.

Steps:

1. Go to Dashboard > Plugins >Add new > “Visual Form Builder” – Search plugins > Install Now >

Pop up – “Do you want install this plugin?” – Why not? (Means „OK‟) > Activate.

2. Look in the left side navigation below Settings, you‟ll see visual form builder.

3. Visual form builder > Add new

36

4. Pick some fields. Try some stuff and „Save form‟. For example, I did this:

5. Go to Pages >All page > Contact US > Edit

6. Add form and select your form, „Insert form‟.

7. Something like [vfb id=1] appears in your text box. So this is the Shortcode for the form. Wordpress

plugin uses this to insert a form wherever this is written. Shortcodes are usually of the form

[some_shortcode id=1234].

8. Now update and got your page and it looks something like this.

37

Now you can fill this form, and go to your dashboard and check Visual Form Builder > All

entries. You can configure this plugin to send emails to you as well. Though, note this, emails

cannot be sent from localhost.

You can use various other plugins; among the most popular is Contact Form 7.

So now, we are done with creating a basic website. And since it is you first time, you could have

taken about 2-3 hours to do this, but the same amount of work can be done in duration far less

once you start understanding how this works.

WELCOME TO WORDPRESS.

38