Top Banner
{ Build a website with Wordpress for beginner By Muhammad Fathur Rahman for MaGiC http://integrasolid.com
63
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: MaGIC Academy - Wordpress for Non Techies

{

Build a website with Wordpress for beginner

By Muhammad Fathur Rahman for MaGiC

http://integrasolid.com

Page 2: MaGIC Academy - Wordpress for Non Techies

1.0INTRODUCTION TO WORDPRESS

Page 3: MaGIC Academy - Wordpress for Non Techies

Wordpress as a default is a software for blogging

In recent years, Wordpress have evolve into full fledge CMS

Thanks to huge community, there is thousands of plugin and themes develop to extend the Wordpres features

Wordpress Introduction

Page 4: MaGIC Academy - Wordpress for Non Techies

Installing Wordpress

Page 5: MaGIC Academy - Wordpress for Non Techies

Installing Wordpress

Page 6: MaGIC Academy - Wordpress for Non Techies

Installing Wordpress

Page 7: MaGIC Academy - Wordpress for Non Techies

Default Wordpress Layout

Page 8: MaGIC Academy - Wordpress for Non Techies

Wordpress Admin Login

Admin login url : http://yourdomain.com/wp-login.php

Page 9: MaGIC Academy - Wordpress for Non Techies

Wordpress Admin Dashboard

Page 10: MaGIC Academy - Wordpress for Non Techies

Post

Page

Widget

Menus

Basic Wordpress Structure

Page 11: MaGIC Academy - Wordpress for Non Techies

Basic Wordpress Structure

Page 12: MaGIC Academy - Wordpress for Non Techies

Basic Wordpress Structure

Page 13: MaGIC Academy - Wordpress for Non Techies

Basic Settings

Page 14: MaGIC Academy - Wordpress for Non Techies

Permalink settings for SEO

Page 15: MaGIC Academy - Wordpress for Non Techies

Permalink settings for SEO

Page 16: MaGIC Academy - Wordpress for Non Techies

Remove the admin toolbar

Page 17: MaGIC Academy - Wordpress for Non Techies

Wordpress layout design is manage using Themes

To change your web layout design, you can install free or paid themes

Changing WordpressLayout

Page 18: MaGIC Academy - Wordpress for Non Techies

http://www.themeum.com/item/starter

http://demo.themegrill.com/spacious/

http://colorlib.com/sparkling/

https://www.competethemes.com/tracks-live-demo/

http://themes.array.is/browse/?theme=editor

http://accesspressthemes.com/accesspresslite/

http://eighties.me/

http://sketchthemes.com/samples/invert-business-demo/

http://demo.alxmedia.se/anew/

http://demo.alxmedia.se/hueman/

Free Beautiful WordpressThemes

Page 19: MaGIC Academy - Wordpress for Non Techies

http://demo.yithemes.com/stendhal/

http://demo.yithemes.com/socute/

http://demo.dovethemes.com/match/blog/

http://wpexplorer-demos.com/pytheas/

http://demo.athemes.com/moesia/

http://www.crocoblock.com/themes/free_multi_wordpress/

https://www.gavick.com/wordpress-themes/meet-gavernwp,97.html

Free Beautiful WordpressThemes

Page 20: MaGIC Academy - Wordpress for Non Techies

https://wordpress.org/themes/corpbiz

https://wordpress.org/themes/zerif-lite

https://wordpress.org/themes/embr

https://wordpress.org/themes/perfetta

https://wordpress.org/themes/connex

You can get more by Google “best free high quality wordpress themes 2014”

Free Beautiful WordpressThemes

Page 21: MaGIC Academy - Wordpress for Non Techies

We will choose this theme to build our first website (Zerif-lite)

Documentation https://themeisle.com/documentation-zerif-lite

Website that we want to build will be looking like this by the end of the course

http://magicwp.integrasolid.com/

Building your first Wordpress website

Page 22: MaGIC Academy - Wordpress for Non Techies

2.0 CUSTOMIZE HOME LAYOUT

Page 23: MaGIC Academy - Wordpress for Non Techies

Install and activate Theme

Page 24: MaGIC Academy - Wordpress for Non Techies

New website look

Page 25: MaGIC Academy - Wordpress for Non Techies

Customize the layout

Please take note that every Wordpress theme is differ on how to customize it, please read the theme documentation

Page 26: MaGIC Academy - Wordpress for Non Techies

Customize big title

Page 27: MaGIC Academy - Wordpress for Non Techies

We will use Zerif – Our Focus Widget

Get the icon pack from here

https://dl.dropboxusercontent.com/u/3765168/elegant-icons.zip

Customize the our focus

Page 28: MaGIC Academy - Wordpress for Non Techies

Customize the About Us

Page 29: MaGIC Academy - Wordpress for Non Techies

Customize Our Team

Page 30: MaGIC Academy - Wordpress for Non Techies

Customize Testimonial

Page 31: MaGIC Academy - Wordpress for Non Techies

Customize Contact Us

Page 32: MaGIC Academy - Wordpress for Non Techies

Customize Footer

Page 33: MaGIC Academy - Wordpress for Non Techies

Customize Footer (hide powered by)

Page 34: MaGIC Academy - Wordpress for Non Techies

3.0CREATE PAGE

Page 35: MaGIC Academy - Wordpress for Non Techies

We need to use Ninja Form plugin

Plugin is use to add new functionality to Wordpress

Build a registration page

Page 36: MaGIC Academy - Wordpress for Non Techies

Build the registration form

Page 37: MaGIC Academy - Wordpress for Non Techies

Build the registration form

Page 38: MaGIC Academy - Wordpress for Non Techies

Build the registration form

Page 39: MaGIC Academy - Wordpress for Non Techies

Build the registration form

Page 40: MaGIC Academy - Wordpress for Non Techies

Build the registration form

Page 41: MaGIC Academy - Wordpress for Non Techies

Build the registration form

Page 42: MaGIC Academy - Wordpress for Non Techies

Build the registration form

Page 43: MaGIC Academy - Wordpress for Non Techies

Build a registration page (notification)

Page 44: MaGIC Academy - Wordpress for Non Techies

Build a registration page (new page)

Page 45: MaGIC Academy - Wordpress for Non Techies

Build a registration page (preview page)

Page 46: MaGIC Academy - Wordpress for Non Techies

4.0CUSTOMIZE THE SITE MENUS

Page 47: MaGIC Academy - Wordpress for Non Techies

Customize the primary menu

Page 48: MaGIC Academy - Wordpress for Non Techies

Customize the primary menu

Page 49: MaGIC Academy - Wordpress for Non Techies
Page 50: MaGIC Academy - Wordpress for Non Techies
Page 51: MaGIC Academy - Wordpress for Non Techies
Page 52: MaGIC Academy - Wordpress for Non Techies
Page 53: MaGIC Academy - Wordpress for Non Techies

5.0CUSTOMIZE SIDEBAR WIDGET

Page 54: MaGIC Academy - Wordpress for Non Techies

Sidebar widget in page

Page 55: MaGIC Academy - Wordpress for Non Techies

Sidebar widget in page

Page 56: MaGIC Academy - Wordpress for Non Techies

6.0USEFUL PLUGINS

Page 57: MaGIC Academy - Wordpress for Non Techies

There are a lot of useful plugin for Wordpress

However the process of finding and installing them is tedious task

Luckily I have collected all the useful plugins in one list, and can be downloaded in one click with the help of this plugin“Wp Favs - Bulk plugin installation”

Installing useful plugins

Page 58: MaGIC Academy - Wordpress for Non Techies

Installing useful plugins

Page 59: MaGIC Academy - Wordpress for Non Techies

Installing useful pluginsUse this KEY : c31e2b10f6270fb32a4a7fc8b283b55b

Page 60: MaGIC Academy - Wordpress for Non Techies

Choose plugin to install

Page 61: MaGIC Academy - Wordpress for Non Techies

WP-SpamFree Anti-Spam (Fight SPAM)

W3 Total Cache (Improve your site load speed, save bandwith)

WordPress SEO by Yoast (Improve your site SEO)

Updraft Backup (Automatic backup to Google Drive, Dropbox)

If Menu (Menus with condition)

Ninja Forms (Create custom form)

Google Analytics Dashboard for WP (Your website visitor stats)

Share Button Mashshare (Simple clean share button)

Shortcodes Ultimate (Tons of button, alert, etc)

Global Hide Admin Toolbar (Remove the black toolbar)

Highly recommended plugin to install

Page 62: MaGIC Academy - Wordpress for Non Techies

CSS & JavaScript Toolbox (Load css js based with condition)

Types - Custom Fields and Custom Post Types Management (Create custom post type)

User Role Editor (Custom and add the user role)

Plugin for web developer

Page 63: MaGIC Academy - Wordpress for Non Techies

Thanks for reading!