Learn WordPress From Scratch

Download as pdf or txt
Download as pdf or txt
You are on page 1of 32

Table of Contents

1. About WordPress.........................................................................................9
1.1 What WordPress has to offer?..........................................................................................10
1.1.1 Freedom to use customized themes............................................................................................10
1.1.2 Endless custom plugins.....................................................................................................................10
1.1.3 Personalized domain name..............................................................................................................10
1.1.4 Self-liability for maintenance...........................................................................................................11
1.1.5 High monetization potential...........................................................................................................11
1.1.6 SEO............................................................................................................................................................ 12

2. Install and Configure................................................................................14


2.1 Setting Up and Installation...............................................................................................14
2.2 WordPress Local Installation in XAMPP.......................................................................15
2.2.1 XAMPP Installation..............................................................................................................................15
2.2.2 Select Components.............................................................................................................................16
2.2.3 Start Apache and MySQL..................................................................................................................19
2.2.4 WordPress Installation.......................................................................................................................20
2.3 WordPress Administration...............................................................................................25
2.3.1 WordPress Admin Dashboard and Bar........................................................................................25
2.3.2 Menu bar................................................................................................................................................. 25

3. Creating WordPress Website..................................................................32


3.1 Designing WordPress Theme..........................................................................................32
3.1.1 Tools of the Trade.................................................................................................................................33
3.1.2 Creating WordPress Theme from Scratch..................................................................................37
3.1.3 Actionable Design Ideas for your Website.................................................................................60
3.2 Developing different types of Websites......................................................................66
3.3 Extending WordPress Functionality..............................................................................83
3.3.1 Essential Plugins................................................................................................................................... 83
3.3.2 Essential Widgets................................................................................................................................. 96

4. Performance Optimisation....................................................................116
4.1 Why Optimization?..................................................................................................116
4.2 Optimize WordPress Website...............................................................................117
4.2.1 Optimize WordPress Database..........................................................................................117
4.2.2 Optimize Images.....................................................................................................................120
4.2.3 Checklist for Monitoring Performance...........................................................................123

5. SEO Optimisation.............................................................................126
5.1 Unique and Useful Content...................................................................................126
5.2 Optimized Theme....................................................................................................127
5.3 Take help of an SEO Plugin...................................................................................129
5.4 Improve Performance............................................................................................130
5.5 Make Your Website Responsive...........................................................................131
5.6 Social Media Sharing..............................................................................................131

6. Security Optimisation.....................................................................134
6.1 What is WordPress Security Hardening?...........................................................134
6.2 WordPress Security Issues....................................................................................135
6.3 What makes WordPress a target for Hackers?................................................136
6.3.1 WordPress Vulnerabilities....................................................................................................137
6.3.2 Non-targeted automated attacks....................................................................................138
6.3.3 Targeted attacks......................................................................................................................138
6.4 Hardening WordPress Security...........................................................................140
6.4.1 What needs to be protected?............................................................................................140
6.5 Methods for Hardening WordPress Security...................................................140
6.5.1 Easy Methods for DIY Users...............................................................................................141
6.5.2 Advanced WordPress Security Methods.......................................................................145
6.6 Checking if WordPress Site is hacked................................................................151

7. Marketing and Monetisation of WordPress Website..............158


7.1 Ways to Drive Traffic to your Website................................................................158
7.2 Inbound Marketing.................................................................................................165
7.2.1 Why You Need Inbound Marketing.................................................................................166
7.2.2 Gaining More Leads for Less Money..............................................................................166
7.2.3 Building the Inbound Marketing Plan............................................................................167
7.2.4 Move Leads through the Funnel with this Strategy..................................................167
7.3 Monetising your WordPress Site.........................................................................170
7.3.2 Website Monetization Strategies.....................................................................................172
7.3.3 Monetize Website with Ads................................................................................................175
7.3.4 Monetize Website without Ads.........................................................................................176
7.3.6 How to Monetize WordPress Blog through Plugins?...............................................178
7.3.7 How to Monetize WordPress blog using Third Party Tools?.................................180

8. Getting More of WordPress...........................................................183


8.1 Screen Options.........................................................................................................183
8.2 Sticky Post.................................................................................................................184
8.3 Next Page..................................................................................................................185
8.4 Revisions of Post.....................................................................................................186
8.4.1 Restoring a Revision..............................................................................................................186
8.4.2 Comparing two Revisions....................................................................................................187
8.5 Schedule Posts.........................................................................................................188
8.6 Full Screen Mode/ Distraction Free Writing....................................................189
8.7 Formatting Removal...............................................................................................190
8.8 Export/Import Data.................................................................................................191

9. Additional Resources......................................................................194
9.1. 5 Best Offline Image Compression Tools.........................................................194
9.2. 16 Websites to Get Free Images........................................................................200
1. About WordPress
Choosing a perfect platform for building a website or blog can be tiring and calls for

research. There are many options to choose from the list of accessible Content

Management Systems (CMSes). WordPress is one of them. Acc. To Wikipedia -

“WordPress is reportedly the most popular website management or blogging system

in use on the Web, supporting more than 60 million websites”.

WordPress.org “powers more than 25% of the internet — with interests ranging from

the news shaping our world to personal stories that shape our own families and lives”.

(Source)

Now, let’s get straightforward with talking in detail about the WordPress.org. It is a

powerful Content Management System which is famous for it’s One Click 5-minute

Installation and that too, for FREE.

“ WordPress is completely customizable and can be used for almost anything”.

(WordPress.org)

Most of the people looking to build up websites are often enticed by the tags “Free” and

“Unlimited”. While you can download and install WordPress for FREE, you have to look

beyond what is not told! There are no hidden costs, of course. If you value your time

(and money), you can see it as your ultimate hidden costs.

WordPress requires a hosting service to get your website seen by the world. You will

have to pay to a web hosting service provider to get your self-hosted WordPress

website online. Most of the best web hosting for WordPress service have pre-installed

WordPress.
1.1 What WordPress has to offer?

1.1.1 Freedom to use customized themes

Self-hosted WordPress allows the web designer or any user to choose from as many

themes as available on the web - whether free, paid or customized! No doubt, there are

free themes available. However, those designed using theme builder software

TemplateToaster are a cut above the rest being high-on-performance and aesthetically

strong. Flexibility in design option gives you the superpower of adding a personal touch

to your WordPress themes - Made by you, only for your website!

1.1.2 Endless custom plugins

WordPress gives the user/designer, a freedom to upload and take benefit from any

number of free, paid and custom plugins available for use. Plugins are tiny but they

make a huge difference! They add desired functionalities to your site, can make your site

more optimized and user-friendly. However, with so many plugins available by so many

authors today, it takes research to find the best one for your site and what works best for

your WordPress self-hosted website.

1.1.3 Personalized domain name

As discussed, creating a website with WordPress is only possible when you pay to a web

hosting service provider. You can use your custom domain name when you create a

website using WordPress. You know well, how important is it to have a custom domain

name to build your virtual identity or brand reputation.

“ A unique and custom domain name establishes your brand’s identity”.


1.1.4 Self-liability for maintenance

The responsibility for keeping your website updated and regular backup of your self-

hosted WordPress.org website falls on your shoulders (or your web hosting service

provider’s, if you have hired one). It is your task to keep SPAM under control and what’s

more important is that you have to keep up with the site’s security at all costs.

While updating is considered good for your website, it may become a reason that can

create hindrance in the functionality of the website! How? Each update comes with some

new functions which may not be compatible with the existing plugins on your site and

thus, plugins may not work efficiently or as expected. It implies that you will need to

replace the old plugins. Don’t forget to backup your self-hosted WordPress website.

1.1.5 High monetization potential

The decision to monetize your blog/website is completely in your hands. If you have a

website created with WordPress.org hosting service, you can leverage the traffic of your

website/blog to earn money by placing ad. links and affiliate banners on your website.

Make sure to place relevant ad banners and links onto your website so that the whole

thing doesn’t look out of the place. This should be done strategically so as to earn high

commissions on sales.

1.1.6 SEO

With your own website, you always have the option to install custom plugins to enhance

the performance and reach of your website. The Yoast SEO plugin is one of the most

downloaded plugins by WordPress users. It takes care of the technical optimization by

helping to choose a focus keyword, thus helping you to write better content. It also has

some extensions like Yoast News SEO, Yoast Video SEO, and Yoast Local SEO. Choosing
an SEO-friendly theme for your website is quite crucial to reap maximum benefits from

SEO point of view.

“If you cannot do great things, do small things in a great way”

Choose actionable SEO strategies and implement them in a wise way.


With WordPress.org or what we call self-hosted WordPress, you have full control over

themes and plugins. You can easily modify the themes using our theme design software

to suit your needs for your very own website - Your virtual address in the web world!

2. Install and Configure


The well renowned “5 minute” installation of Wordpress require certain prerequisites like

an access to your web server, a text editor, an FTP client, a web server support and an

ability to create MYSQL databases. Once you’re through with the checklist, you can very

well kickstart the installation process. The steps are provided below:

2.1 Setting Up and Installation


There are 3 main steps to install the WordPress as follows:

Step 1: Buy your domain and Web Hosting (e.g. Bluehost, Godaddy, Hostgator)

Head over to your chosen provider and buy your domain. We recommend choosing one

with a familiar suffix such as .org or .com even if they are a little more expensive than the

rest since it will be easier for people to remember. It even provides it a trustworthy look.

You need to buy space on someone else’s server because it will always be running. If you

hosted it on your local server, for example, on your home PC. You would never be able

to turn it off or your website would go down!

Step 2: Install WordPress on your host

All the major web hosts provide one click installation of WordPress.

Login to your – Bluehost if that’s what you chose, or another – and install WordPress

onto your domain.


All major hosting providers clear instructions on how to install WordPress, which

amounts to essentially a one-click installation! It couldn’t get any easier than this.

Step 3: Login to your WordPress CMS and install a theme

Once inside the hosting provider cPanel (essentially just the backend of your website)

with WordPress installed, you need to login to your WordPress CMS (content

management system) to actually start creating your site.

You login using the WordPress account details that the hosting provider will have

emailed to you.

Alternatively, you can navigate to your domain admin address, which will be

http://yourdomain.xx/wp-admin to log in.

2.2 WordPress Local Installation in XAMPP


The XAMPP & WordPress combination is greatly used for website development. While

XAMPP provides the local server environment, the WordPress is a web development

platform. XAMPP is the most common localhost application used by the developers.

Being cross platform, it can be used on Windows, Linux and OSx. In this article we will

discuss the installation of XAMPP and WordPress on Windows.

2.2.1 XAMPP Installation

Get start with setup

Download XAMPP for windows from apachefriends.org. Then, run the installer to get

start with the XAMPP setup.


2.2.2 Select Components

In the component wizard, all the components are by default selected. You can uncheck

the components that you don’t plan to use.

Let’s quickly go through these components.

Apache- It is the HTTP web server, and essential to run the website.

MySQL- It is the database server.

FileZilla FTP server - It is used for setting up an FTP server.

Mercury Mail Server- It is used for setting up a mail transport system.

Tomcat- It is an application server, which runs Java based web applications.

PHP- It is a server side scripting language used for making dynamic web pages.
Perl- This language is widely used by the programmers for writing CGI scripts.

PhpMyAdmin- It is a necessary component to handle the administration of MySQL.

Webalizer- It is a web log file analyzer, which generates statistical reports about how

many people visit a website and what do they look for in the website

Fake Sendmail- For testing email transfer on localhost, Fake Sendmail is used. If you are

going to work on such a project which involves sending emails, then this component will

come in your use.


We have chosen the Apache, MySQL, PHP and phpMyAdmin since these are necessarily

required for WordPress installation. As we don’t have any plan to use the rest

components, we have unchecked them all.

2.2.3 Install

After selecting the components, you will be prompted to specify a location where you

want to install XAMPP. Once you specify the location, the setup will be ready to install.

2.2.3 Start Apache and MySQL


Once the installation is complete, open XAMPP control panel. For this, find the xampp-

control.exe inside XAMPP folder and launch it. Default location of XAMPP folder is

C:\xampp

Having to open the control panel, start the Apache and MySQL components. As you will

start these components, their Admin links will become clickable. Then, select MySQL

“Admin” for moving ahead to phpMyAdmin or you can open it from here

http://localhost/phpmyadmin .

2.2.4 WordPress Installation

Create MySQL Database

On phpMyAdmin interface, find the “Databases” tool on the top-left side and create the

database. For example, we have created the database by the name wordpress.

Unzip WordPress zip file


After creating the database, we are set to start the installation of WordPress. Now, we

are going to download WordPress.

Once the download is complete, extract the zip file to C:\xampp\htdocs\. If you’ve

extracted the package correctly, you will see the “wordpress” folder inside htdocs.

Select language

Next step is to browse this URL - http://localhost/wordress in your browser for

initializing the actual installation of WordPress.

Select language on the screen and continue.


Fill database information

Fill the name of database which you have created in the above step. In our case it is'

wordpress'. Fill “root” in username field and leave the password field blank, and fill

localhost the database host field.

In the last field, you may define a prefix to all the database tables, and submit.

Fill in the website information


In the next step, you are prompted to set the title of your site and fill up user

information, like site title, username, password and Email.

Fill up the required fields, and press “Install WordPress”.

That’s it. You have installed WordPress. Now, you are in business.

Log in to dashboard

Now, you have installed WordPress locally. You can move on to the dashboard by

clicking on the Log in button.


2.3 WordPress Administration

2.3.1 WordPress Admin Dashboard and Bar

Dashboard might be the first thing you see, once you logged in. You can start

customizing your website from here only. Even it keeps you reporting about new

updates, WordPress Events & news, your activities etc.These elements can be customised

as well. You can keep relevant elements and remove the one which is not required.

Admin bar - The top navigation bar placed above the dashboard offers administrative

options. The My Blog option provides you a public view of your site. So as to help you in

deciding if there is any scope for customization or changes. The toolbar even shows if

there is any update available in a plugin or theme, whatsoever. The right-hand side of

the toolbar has options to edit the profile and logout.

2.3.2 Menu bar

The Menu Bar placed in the extreme left side of the screen. It possess all the options to

customize your WordPress site from pages, posts, plugins to the settings. You can

control all the elements belonging to your site from here. Now, you can see all the

options as follows:

Posts

By default, you get only one post “Hello World!!” after fresh install of WordPress.

Certainly, if you want to add more posts, edit the existing ones or see what all stuff you

have then you need to select one of the following options.

All Posts shows all the available posts on your WordPress website.

Add New is used to add new posts.


Categories let’s you create categories to be assigned to the posts.

Tags option is available to assign tags for your posts.

To Add a new Post:

Here’s what you need to do for creating a new post. Look along the sidebar in

dashboard for Posts -> Add New.

Fill in the post title, write the post, add a media, and simply press the “Publish” button

showing on the right side of the page. This is how, you’ve created a post on your

website.

Media

This is used to keep track of all the media needs of your site audio, video & pictures. It

has two options Library & Add New.

Library has all the media files that you have already uploaded.

Add New can help you upload a new media file by browsing it.

Pages

WordPress gives you a “Sample Page” by default. You can edit or delete it. You will see

two options here - All Pages & Add New.

All Pages will show you a list of all the pages you have created till present date with all

details Title, author, date of publish etc & even you can edit or delete a page from here

only.

Add New can help you in adding a new page.

To Add a new Page:

For handling pages, WordPress has given “Pages” tool on the dashboard.

Select Pages -> Add New to add a new page.


When you choose add new page, you are directly moved to the editor. You can add text,

media and link in your page with the available editing tools. After creating the page, you

can preview it as well. “Publish” your page in the end.

The options being shown on the right side, are called theme options, which are available

in TemplateToaster generated theme.

Comments

You can keep track of all the comments posted by readers on the specified posts with

date & author information.

Appearance

It will display all the installed Themes plus additional Widgets, Menus, Header and

Customize the activated theme and Editor (to edit the coding of theme) options.

Themes option integrates all the themes available. One can also install new themes

under this section.

Customize option provides you with customization possibilities for your installed theme

via the front-end.

Widgets shows the list of active widgets. It can even maintain a list of those that have

been removed under the category of ‘inactive widgets’.

Menus option let’s you design the menu structure for your website. Edit Menu tab

provides you with ability to create new menu items and edit existing ones. Manage

locations tab allows you to set the position where you want to have your menu to be

displayed. Number of menu locations depends on the theme you are using.

To Add Menu items

You can create your own menu and add your pages into it from the “Menus” too.
Appearance -> Menus -> Create a new Menu

You can add pages, custom links and categories in the menu. For this, select the menu

that you’ve created in the above step. Then, find the items you want to add in the menu,

e.g. if you want to add the “Blog” page in the menu. So, select this page and press “Add

to Menu”. Make sure that you’ve pressed “Save Menu” in the end. Similar to the pages,

you can add custom links and categories to the menu.

Menu Structure

You can arrange the menu items in preferred order by simply dragging them from their

position and dropping at the desired level.

Header decides how the header of your blog or website is going to be displayed. You

can customize Header settings from front-end similar to the Customize option above.

Editor option lends you an option to edit the stylesheet, header and other theme files

for custom design and functionality.

Plugins

Plugins are used to provide additional functionality to the site. These can implement

almost every desired functionality.

Installed Plugins option displays all the plugins in unison that have been installed by

you. Here you can install new plugins from WordPress repository or even upload any

custom plugin of your own.

Editor lets you edit the plugin files, if required.

Users
In WordPress you can manage users by specifying their roles so to limit their power of

use on your site. with Users option.

All Users showcase all the users that already exist.

Add New provides you an ability to add new users.

Your Profile option provides you the option to view your entire profile.

Tools

It displays all the Available Tools. You can Import posts, pages to your WordPress site

from here as well as can Export a .XML file of your content( post, page, media) too.

Settings

As the name indicates, it will enable you all kind of settings regarding;

General manages options available for the site like title, tagline, WordPress address, site

address, email address, site language, date and time format etc.

Writing option provides settings for default post category, format etc. It even helps to

set up ability of posting to Wordpress via email.

Reading provides options to control the layout of front page and blog (posts) page of

your site. You can set how many posts should be visible on your front page or blog page.

Discussion option provides settings for comment section of website. Comment

moderation is one of the major option in this category that lets you control spam

comments on your site.

Media has options for image settings such as default Thumbnail size, Medium Size

dimensions etc.

Permalinks option offers the ability to create a custom URL structure for your site posts,

pages etc.
3. Creating WordPress Website

3.1 Designing WordPress Theme


Till now you got to know what a WordPress website is, but to create a website you need

a theme to support your envisioned design. Basically a theme is a set of files that provide

you with a layout design of your WordPress site.

A WordPress theme has the capability of transforming your website to its entirety.. If you

change your theme then you automatically bring changes to the way your site appears

on the front-end, i.e. what a visitor views when your site is browsed on the web. Themes

pick the content and data saved by WordPress and showcase it to the world. When you

create a WordPress theme, you choose how that content will be displayed.

What are these themes made up of?

In simple words, WordPress themes are a bunch of files made to function together in

order to create what you see, as well as how your site performs.

Important files

There are two files which holds the utter requirement in a WordPress theme:

index.php – the main template file

style.css – the main style file

Though not mandatory yet, you may come across some added files in a theme’s folder

including:
PHP files – carry template files

Localization files

CSS files

Graphics

JavaScript

Text files – carry readme.txt instructions, changelog file and a license info.

If you have been following up by far then, I’d like to bestow you with this information as

to how you can implement graphic design tools and see your “actionable ideas” turning

into fruit-bearing plants. You can absorb this blessing by marching southwards

3.1.1 Tools of the Trade

All web designers have their own box of tools which they use to bring their design ideas

to life. These tools have made the process of designing websites more creative than

technical since in previous times, developing websites purely involved coding. These

tools have provided more intuitive ways of generating websites through their graphical

user interfaces. There are some cool tools out there which might not be well known by

most web designers. Here are some of them.

Backbone:

All websites are built on HTML and CSS. These two usually go together since HTML

which is a standard markup language defines the layout of the web pages while CSS

defines the visual look and formatting of the various elements. The fifth version of HTML

is even better with increased multimedia functionality. Any web developer should learn
this language since it is very basic and easy to use and also other higher level web based

languages such as PHP are well integrated with HTML.

Editor:

When designing websites, you might have to do some coding or scripting. One of the

very best code editors is Notepad++. With numerous features such as Syntax

Highlighting and Syntax Folding, PCRE (Perl Compatible Regular Expression)

Search/Replace, customizable GUI, document map, auto completion and multi-language

support, Notepad++ is definitely a top choice for easy coding.

Local Development Environment:

At times you may want to simulate a server on your computer for development purposes

before loading your site on an actual server. In this case, XAMPP is a premium option.

XAMPP is an open source package which enables PHP and MySQL development on an

Apache server. It is very easy to install and completely free so you can develop sites

without subscribing to a web hosting package.

Frameworks:

Despite knowing how to code, you may still want a quick solution for easy front-end web

development. Bootstrap will help you with great tools for designing responsive sites. It

accommodates developers of all skill levels and you can implement HTML, CSS and

JavaScript. This greatly reduces the need of coding the front end of your site and as a

result, you can focus more on developing the more complex hidden segments of your

sites.

Content Management System:


We will consider WordPress, which is both a free blogging platform and a Content

Management System. This is a household name in the internet world. WordPress has

grown in leaps and bounds to become an internet phenomenon, powering over 60

million websites. These websites include individual blogs to mega corporation websites.

What WordPress has managed to do very well is to combine simplicity with incredible

functionality. What this means is that even people who are new to the World Wide Web

become able to develop their own sites with great ease using world class themes and

plugins. The WordPress dashboard is very intuitive and you can even develop a site

without writing a single line of code. WordPress also offers great customization

capabilities and as a result of this, you can personalize your web designs.

FTP:

FTP means File Transfer Protocol, which is user to transfer the files(in this case your entire

website) to the hosting server. We will consider FileZilla, which is a leading File Transfer

Protocol (FTP) application program.

Firefox Addons:

When testing your site on a browser, you may want a tool that will enable you to edit

and debug your code as you browse your site. Firebug is a great option in this category.

Firebug gives you a live view of the action as you edit your HTML, CSS or JavaScript. You

can open it in a separate window or assign it a small section in the Firefox window so

that it does not get in your way. You can find specific HTML elements by just clicking on

a given section of the web page. Firebug also offers a great debugger for JavaScript.

You might also like