Fundamentals of developing websites using wordpress. This is the first of a two lecture series covering basic to intermediate concepts in wordpress. The lecture was feature packed with live demos covering how to make a full fledged website. Learn the best practices and the core guidelines for designing websites using the wordpress stack.
2. 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
3. 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
4. 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.
5. • 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
6. 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
7. 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
8. 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
9. 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.
10. • 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
11. 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.
12. The various menu items are as follows:
•Dashboard
•Posts
•Media
•Pages
•Comments
•Appearance
•Plugins
•Users
•Tools
•Settings
Menu Items
13.
14. 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.
17. 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”
18. 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
19. 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/
20. 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.
21. 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.
22. 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.
25. 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.
28. 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/
29. 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:
30. 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:
35. 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/
36. 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…..