Top Banner
Website Development For Dummies
39

Wordpress website development

Aug 04, 2015

Download

Documents

John Faust
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: Wordpress website development

Website Development

For Dummies

Page 2: Wordpress website development

What is WordPress?

• WordPress is an extensive publishing system mainly used for, well, blogging.

• It is free and open-source and is hugely based on PHP and MySQL

• Social media can be incorporated into your posts and it is now most efficient for sites that utilize these types of media.

• Still unarguably the most recommended

Page 3: Wordpress website development

WordPress and its Advantages

• It’s Open Source, so it’s free!• It’s Easy!• It offers SEO support• Customization is readily done

WordPress is being revered for its simplicity and ease of use. Users can’t help but keep using it for their sites, keeping it the leading blogging software to date.

Page 4: Wordpress website development

Starting up with WordPress

Page 5: Wordpress website development

Starting up with WordPress

• Live site requirements– WordPress (http://www.wordpress.org)– Hosting server and Domain

• Bluehost• HostGator• GoDaddy

– FTP • Filezilla• CuteFTP

– Apache,PHP and MySQL– phpMyAdmin

Page 6: Wordpress website development

Starting up with WordPress

• Local server requirements– WordPress (http://www.wordpress.org) – WAMP or XAMPP

• phpMyAdmin• Apache• PHP• MySQL

Page 7: Wordpress website development

WORDPRESS INSTALLATION

Page 8: Wordpress website development

LIVE SITE INSTALLATION

Page 9: Wordpress website development

Live site installation: 1

• Connect to your FTP– FTP Accounts

• Upload the WordPress Files• Create a database • Create and assign user into the database– Username– Password

• Assign user privileged

Page 10: Wordpress website development

Live site installation: 2

• Go to your domain• Click the button Create Configuration file• Click the button Let’s Go• Fill-up the fields– Database Name– User Name– Password– Database Host (localhost)

Page 11: Wordpress website development

Live site installation: 3

• Run the Install• Fill-up the fields– Site title– Username– Password– Your E-mail– Privacy

• Allow search engines to index this site.

– Click button Install Wordpress• Login– Yoursite.com/wp-admin

Page 12: Wordpress website development

LOCAL SITE INSTALLATION

Page 13: Wordpress website development

Local site installation: 1

• Copy WordPress file to ‘WWW’(wamp) or ‘HTDOCS’ (xampp) folder

• Name your WordPress File• Create Database to phpMyAdmin– http://localhost/phpmyadmin

• Username: Root & Password is empty• Go to – http://localhost/wordpress

Page 14: Wordpress website development

Local site installation: 2

• Click the button Create Configuration file• Click the button Let’s Go• Fill-up the fields– Database Name– User Name– Password– Database Host

Page 15: Wordpress website development

Local site installation: 3

• Run the Install• Fill-up the fields– Site title– Username– Password– Your E-mail– Privacy

• Allow search engines to index this site.

– Click button Install Wordpress• Login– http://localhost/wordpress/wp-admin

Page 16: Wordpress website development

WordPress Admin

http://www.yoursite.com/wp-adminhttp://localhost/wordpress/wp-admin

Page 17: Wordpress website development

WordPress Admin: Login

Page 18: Wordpress website development

WordPress Admin: Dashboard

• Expanding, Collapsing, and Editing, Modules• Rearranging the Dashboard• Adding new Dashboard Widgets– Plugin or theme developers can make new Dashboard

Widgets available through plugin (or functions.php) code very easily

• Default Dashboard Widgets– The following dashboard widgets are included by

default with WordPress and should be available on all installs.

Page 19: Wordpress website development

WordPress Admin: Posts

• Posts are the entries that display in reverse chronological order on your home page. In contrast to pages, posts usually have comments fields beneath them and are included in your site's RSS feed.

• http://codex.wordpress.org/Writing_Posts

Page 20: Wordpress website development

WordPress Admin: Media

• Media is the images, video, recordings, and files, you upload and use in your blog. Media is typically uploaded and inserted into the content when writing a Post or writing a Page.

• The Media Library Screen allows you to edit, view, and delete Media previously uploaded to your blog. Multiple Media objects can be selected for deletion. Search and filtering ability is also provided to allow you to find the desired Media.

• http://codex.wordpress.org/Media_Library_Screen

Page 21: Wordpress website development

WordPress Admin: Pages• What Pages Are:• Pages are for content that is less time-dependent than Posts.• Pages can be organized into pages and SubPages.• Pages can use different Page Templates which can include Template

Files, Template Tags and other PHP code.• Pages may have a more complex array of readily available display

adjustments when using sophisticated Themes with extensive customization.

• In essence, Pages are for non-blog content. It is possible to remove all or most Posts from a WordPress installation, and thus to create a standard non-blog website.

• http://codex.wordpress.org/Pages

Page 22: Wordpress website development

Wordpress Admin: Comments

• Comments allow your website's visitors to have a discussion with you and each other. When you activate comments on a Page or post, WordPress inserts several text boxes after your content where users can submit their comments. Once you approve a comment, it appears underneath your content. Whether you want to customize how your receive comments or tweak how your site displays comments, WordPress provides a thorough set of options to build a community from the visitors to your site.

• http://codex.wordpress.org/Comments_in_WordPress

Page 23: Wordpress website development

WordPress Admin: Appearance

• Widgets Screen– Themes usually have at least 1 or 2 sidebars. Sidebars are

the narrow columns to the left or right of your blog posts. Each section in the sidebar is known as a "Widget" that you can add or remove, and move up or down. You configure Widgets in your sidebar by via th

• Menus Screen– The Appearance Menus Screen enables a user to

create custom navigation menu in place of a theme’s default menu. Support for this feature must be registered in the theme's functions.php file.

Page 24: Wordpress website development

WordPress Admin: Appearance

• Themes Screen – The Appearance Themes Screen allows you to

manage your Themes. That means you can install, preview, delete Themes, activate, and update Themes.

• Editor Screen– TheAppearance Editor Screen allows you to edit

those Theme's Template and Stylesheet files.

Page 25: Wordpress website development

WordPress Admin: Plugins

• Plugins are tools to extend the functionality of WordPress. This article contains a list of plugins by category, and links to other plugin repositories. The core of WordPress is designed to be lean, to maximize flexibility and minimize code bloat. Plugins offer custom functions and features so that each user can tailor their site to their specific needs.

• http://codex.wordpress.org/Plugins

Page 26: Wordpress website development

WordPress Admin: Users

• Summary of Roles– Super Admin - Someone with access to the blog network

administration features controlling the entire network.– Administrator - Somebody who has access to all the administration

features– Editor - Somebody who can publish and manage posts and pages as

well as manage other users' posts, etc.– Author - Somebody who can publish and manage their own posts– Contributor - Somebody who can write and manage their posts but

not publish them– Subscriber - Somebody who can only manage their profile

• http://codex.wordpress.org/Roles_and_Capabilities

Page 27: Wordpress website development

WordPress Admin: Tools

• Import• Export

• https://codex.wordpress.org/Tools_Screen

Page 28: Wordpress website development

WordPress Admin: Settings

• This Settings General Screen is the default Screen in the Settings Administration Screen and controls some of the most basic configuration settings for your site: your site's title and location, who may register an account at your site, and how dates and times are calculated and displayed.

• http://codex.wordpress.org/Settings_General_Screen

Page 29: Wordpress website development

Themes and Plugin Installation

Page 30: Wordpress website development

Themes Installation

• Appearance– Themes

• Install Themes– Search– Upload– Featured– Newest– Recently Updated

» Activate Theme

• Upload Directory– root

• wp-content– themes

Page 31: Wordpress website development

Plugin Installation

• Plugins– Add New

• Search• Upload• Featured• Popular• Newest• Favorites

– Activate Plugin

• Upload Directory– Root

• wp-content– plugins

Page 32: Wordpress website development

Popular Themes

• Default Themes– Twenty Twelve– Twenty Eleven

• Popular Commercial Themes– Thesis DIY (Framework)– Woo Themes – Elegant Themes– Theme Forest– Genesis (Framework)– Optimize Press (Sales Pages)

• Popular Free Themes– BuddyPress (Forum)

Page 33: Wordpress website development

Theme Development

http://codex.wordpress.org/Theme_Development

Page 34: Wordpress website development

Theme Development

• WordPress Themes are files that work together to create the design and functionality of a WordPress site. Each Theme may be different, offering many choices for site owners to instantly change their website look.

Page 35: Wordpress website development

Theme Development Standards

Page 36: Wordpress website development

Theme Development Standards

• Use well-structured, error-free PHP and valid HTML.• For associative arrays, values should start on a new line. Also note the

comma after the last array item; this is recommended because it makes it easier to change the order of the array and makes for cleaner diffs too.

• No Shorthand PHP tags• Important: Never use shorthand PHP start tags. Always use full PHP tags.

Many servers have shorthand tags disabled for PHP thus using full PHP tags is safer and best practice.

• http://codex.wordpress.org/WordPress_Coding_Standards

Page 37: Wordpress website development

Theme Development Standards

• Use clean, valid CSS.

• http://make.wordpress.org/core/handbook/coding-standards/css/

Page 38: Wordpress website development

Theme Development Standards• Follow design guidelines in .

• http://codex.wordpress.org/Site_Design_and_Layout

Page 39: Wordpress website development

ANATOMY OF A WORDPRESS THEME