Website Development
    For Dummies
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
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.
Starting up with WordPress
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
Starting up with WordPress
• Local server requirements
   – WordPress (http://www.wordpress.org)
   – WAMP or XAMPP
      •   phpMyAdmin
      •   Apache
      •   PHP
      •   MySQL
WORDPRESS INSTALLATION
LIVE SITE INSTALLATION
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
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)
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
LOCAL SITE INSTALLATION
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
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
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
WordPress Admin
 http://www.yoursite.com/wp-admin
http://localhost/wordpress/wp-admin
WordPress Admin: Login
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.
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
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
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
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
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.
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.
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
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
WordPress Admin: Tools
• Import
• Export

• https://codex.wordpress.org/Tools_Screen
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
Themes and Plugin Installation
Themes Installation
• Appearance
  – Themes
     • Install Themes
           –   Search
           –   Upload
           –   Featured
           –   Newest
           –   Recently Updated
                 » Activate Theme
• Upload Directory
  – root
     • wp-content
           – themes
Plugin Installation
• Plugins
   – Add New
      •   Search
      •   Upload
      •   Featured
      •   Popular
      •   Newest
      •   Favorites
            – Activate Plugin
• Upload Directory
   – Root
      • wp-content
            – plugins
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)
Theme Development

http://codex.wordpress.org/Theme_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.
Theme Development Standards
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
Theme Development Standards
• Use clean, valid CSS.




• http://make.wordpress.org/core/handbook/coding-standards/css/
Theme Development Standards
• Follow design guidelines in .




• http://codex.wordpress.org/Site_Design_and_Layout
ANATOMY OF A WORDPRESS THEME

Wordpress website development

  • 1.
  • 2.
    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
  • 3.
    WordPress and itsAdvantages • 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.
  • 4.
  • 5.
    Starting up withWordPress • Live site requirements – WordPress (http://www.wordpress.org) – Hosting server and Domain • Bluehost • HostGator • GoDaddy – FTP • Filezilla • CuteFTP – Apache,PHP and MySQL – phpMyAdmin
  • 6.
    Starting up withWordPress • Local server requirements – WordPress (http://www.wordpress.org) – WAMP or XAMPP • phpMyAdmin • Apache • PHP • MySQL
  • 7.
  • 8.
  • 9.
    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
  • 10.
    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)
  • 11.
    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
  • 12.
  • 13.
    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
  • 14.
    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
  • 15.
    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
  • 16.
  • 17.
  • 18.
    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.
  • 19.
    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
  • 20.
    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
  • 21.
    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
  • 22.
    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
  • 23.
    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.
  • 24.
    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.
  • 25.
    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
  • 26.
    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
  • 27.
    WordPress Admin: Tools •Import • Export • https://codex.wordpress.org/Tools_Screen
  • 28.
    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
  • 29.
    Themes and PluginInstallation
  • 30.
    Themes Installation • Appearance – Themes • Install Themes – Search – Upload – Featured – Newest – Recently Updated » Activate Theme • Upload Directory – root • wp-content – themes
  • 31.
    Plugin Installation • Plugins – Add New • Search • Upload • Featured • Popular • Newest • Favorites – Activate Plugin • Upload Directory – Root • wp-content – plugins
  • 32.
    Popular Themes • DefaultThemes – 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)
  • 33.
  • 34.
    Theme Development • WordPressThemes 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.
  • 35.
  • 36.
    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
  • 37.
    Theme Development Standards •Use clean, valid CSS. • http://make.wordpress.org/core/handbook/coding-standards/css/
  • 38.
    Theme Development Standards •Follow design guidelines in . • http://codex.wordpress.org/Site_Design_and_Layout
  • 39.
    ANATOMY OF AWORDPRESS THEME