Copyright 2016 Automated Logical Software (P) Ltd.

Website Development using WordPress

(The Technical Fundamentals & Best Practices)

Nitin Sharma

Technical Lead

nitin@atlogys.com

Under the direction of

Mr. Rajiv Madan (COO, Atlogys)

TECH TALK

Agenda

Content Is King – Bill Gates

• A Brief Introduction to WordPress

• Wordpress - CMS

• Usage of CMS for Websites

• Hosting and Installation

• Elements Of WordPress – DASHBOARD, POST, MEDIA, PAGE

• Installing a plugin

• Security

• Theme

• Examples

A Brief Introduction to WordPress

• WordPress.com vs WordPress.org. – The one major difference between WordPress.com and WordPress.org is who's

actually hosting your website.

– Domain name: example.wordpress.com

• With WordPress.org, YOU host your own blog or website. WordPress.org is where you will find the free WordPress software that you can download and install on your own web server.

• We are only discussing wordpress.org.

• Started in 2003 By Matt Mullenweg and Mike Little

• Open Source Project

– Open source means software is free and non-proprietary. You have total ownership to use the software that drives your website, and you can modify and distribute its code without any associated licensing

• Easy To setup

Open Source

Wordpress is a CMS

It gives a WYSIWYG interface using which people get a MS-word like interface to edit and update various things on a page

Usage of CMS for Websites 53.7% of the websites use none of the content management systems.

WordPress is used by 27.1% of all the websites, that is a content management system market share of 58.5%.

https://w3techs.com/technologies/overview/content_management/all

Hosting and Installation

Hosting • PHP 5.6 or greater • MySQL 5.6 or greater • The mod_rewrite Apache module

Installation •Downloading the most current version of WordPress.(4.6.1)

•Unzipping the downloaded file to a folder on your hard drive.

•Creating a secure password for your Secret Key

•Demo

Elements Of WordPress

Download the latest version for wordpress. The latest stable release of WordPress is 4.6.1 Site download link: https://wordpress.org/download/

Demo

Login • Begin by logging into the “administration area” or the back end of

your website.

• Visit your site’s login page by placing “wp-admin” after your domain name (e.g.http://example.com/wp-admin).

• Now log into WordPress using your username and password.

• After logging in you are on the main Administration Screen called the Dashboard.

• The WordPress dashboard area gives you a general overview of your website.

• It also displays many useful quick links for performing common tasks such as writing a quick draft or replying to the latest comment.

DASHBOARD

Dashboard The Dashboard tells you about recent activity both at your site and in the WordPress community at large and provide access to updating WordPress, plugins, and themes.

The various menu items are as follows:

•Dashboard

•Posts

•Media

•Pages

•Comments

•Appearance

•Plugins

•Users

•Tools

•Settings

Menu Items

Add New Post

• The most important part of WordPress, the Posts Add New Screen is where you write new Posts. In addition, any Media (pictures, video, files) can be uploaded and inserted into the Posts. See the below steps – Log in to your WordPress Administration Panel (Dashboard). – Click the 'Posts' tab. – Click the 'Add New' sub-tab. – Start filling in the blanks: enter your post title in the upper field, and

enter your post body content in the main post editing box below it. – As needed, select a category, add tags, and make other selections

from the sections below the post. – When you are ready, click Publish.

DEMO

Descriptions of Post Fields

Title/Headline Box

• This is title of your post.

• You can use any phrases, words or characters.

• Avoid using the same title twice as that will cause problems.

Example:

"My Test Site - Here's Lookin' at You, Kid".

WordPress will then clean it up to generate a user-friendly.

“my-test-site-heres-lookin-at-you-kid”

Content Box It gives a WYSIWYG interface using which people get a MS-word like interface to edit and update various things on a page.

Preview button

Allows you to view the post before officially publishing it.

Publish box

• Contains buttons that control the state of your post.

• The main states are Published, Pending Review and Draft.

– A Published status means the post has been published live on your blog for all to see.

– Pending Review means the draft is waiting for review by an editor prior to publication.

– Draft means the post has not been published and remains a draft for you.

Descriptions of Post Fields

Descriptions of Post Fields

Permalink

• Permalinks are the permanent URLs of your individual blog post or page on your WordPress site.

• By default, WordPress URLs use the query string format which look like below:

– http://www.example.com/?p=233

• However by going to Settings » Permalinks option page, you can modify the settings to change these query strings into human readable strings. Example:

– http://www.example.com/2016/12/wordpress-for-all/

Descriptions of Post Fields

Excerpt

• A summary or brief teaser of your post featured on the front page of your site.

• Note that the Excerpt does not usually appear by default.

– It only appears in your post if you have modified the template file listing the post to use the_excerpt()

Publish

• Publishes your post on the site.

• By default, at the time the post is first auto-saved, that will be the date and time of the post within the database.

Descriptions of Post Fields

Post Author

• A list of all blog authors you can select from to attribute as the post author.

• This section only shows if you have multiple users with authoring rights in your blog.

Revisions

• A list of all revisions made to the current post or page.

• There is also an option to restore any previous versions.

Media Add New Screen

• The Media Add New Screen allows you to upload Media (Images, video, files, etc.) for later use in your posts and pages.

• This screen allows you to both add single items as well as perform bulk uploads, if you wish to add more than one media item to your Media Library.

DEMO

Pages - Your Static Content

• A Page is another tool to add content to a WordPress site and is often used to present "static" information about the site;

• A good example of a Page is the information contained in "About" or "Contact" Pages.

DEMO

Plugins

Plugins extend and expand the functionality of WordPress

Installing a WordPress Plugin All WordPress Plugins install in two ways. Automatic and manual. Plugin Examples: Carousel Plugin for image and video. https://www.wonderplugin.com/wordpress-carousel/

Security

Brute force attacks are one of the oldest and most common types of attacks that we still see on the Internet today. because people are very bad at choosing good passwords…

• Choose Secure Password (change them frequently) • We can disable the XML-RPC service on WordPress

add_filter('xmlrpc_enabled', '__return_false'); • Install the Security Plugin like Wordfence.

• Wordfence because we simply block the attacker after they reach the login attempt limit.

• Folder and File Permissions setting

Recommend precautions:

Theme

• A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files.

• See the below for Theme Wireframe sample:

Sample WireFrame

Sample WireFrame

Sample WireFrame

Website Examples

• Macaulay

– <<Available on Atlogys QA Server>>

• PMIndia.gov

– http://www.pmindia.gov.in/en/

• Angry Birds

– http://www.angrybirds.com/

• The Walt Disney Company

– https://thewaltdisneycompany.com/

• Sony Music

– https://www.sonymusic.com/

Templates in wordpress

• See Macaulay for example

• In designing WP sites from scratch, pages are divided into TEMPLATES

• Similar pages are grouped under 1 template and are referred to as VARIATIONS of that template

• PLUGINS LIKE ACF HELP US TO CODE TEMPLATES & VARIATIONS EFFECTIVELY.

MORE TO COME IN ADVANCED TALK…..

Question?