Quick links:

WordPress Essential Setup List

  1. increase file upload size to 8MB

Quick Local Computer Install Walkthrough

  • Before Install, make sure you have a PHP and SQL server installed, if not, download XAMPP and use that as Server tool to run Wordpress.
  • Then download WordPress: https://wordpress.org/download/
  • after download wordpress, put the wordpress folder into htdoc folder of XAMPP install directory
  • open http://localhost/phpmyadmin to create new database called “wordpress”
  • then go to http://localhost/wordpress to visit your wordpress website
    • choose the language, then use “wordpress” as database name, database user name and pass are from password.txt inside XAMPP install directory
    • click next create website name and wordpress admin name and pass, then done.
    • login wordpress page to start your wordpress project work
  • To access your local wordpress site from other local computer, make sure your Setting in wordpress like this
    • change http://localhost/wordpress into your id address like http://192.168.1.101/wordpress (get your local ip address by these stepds)
      1. press Ctrl+R to bring up prompt, and enter “cmd”
      2. then type “ipconfig” to show your IPv4 address, that number is your local ip address where your neighbor computers can access you.

Tutorial

WordPress backup and restore Guide

structure of wordpress

  • wordpress web page folder in File Server
    • uploaded files
    • theme files
    • plugin files
    • other files
  • wordpress database in SQL Database Server
    • tables for wordpress system config
    • tables for posts
    • tables for plugin system and plugin config

Backup Method

  • Plugin method:
    • option A: UpdraftPlus plugin (link)
      • it backup your wordpress into each component zip file on server, and no size limitation
      • good for same site backup and restore, but migration need to pay upgrade or do manually
    • option B: All-in-One WP migration (link)
      • it is all-in-one button with database string replace
      • good for all-in-one solution, but free version limited to site under 500MB
    • other option: (link)
  • Manual method: (not so straight forward for starting a fresh install re-install or migrate, only good for current site)
    • use host file system or FTP to download whole wordpress folder
    • use host database manager to export the whole database out as sql file

Restore Method

  • Plugin method:
    • option A: UpdraftPlus plugin (link)
      • only support UpdraftPlus's backup file downloaded from wp-content/updraft and put there, make it scan local to detect, (good thing is based on server file system to transfer, support both web and ftp in its case)
      • as it doesn't support migration out of box, you need to manually do “siteurl,name change” and “database url replace” and “.htaccess rewrite setup”
    • option B: All-in-One WP migration (link)
      • support its all-in-one web download and upload file for restore, which built-in extra database sql string replacement
    • other option: (link)
  • Manually method:
    • upload wordpress web page folders
    • create database and insert exported SQL data file
    • correct “wp-conf.php” for database connection and “siteurl,name change” and “database url replace” (maybe) and “.htaccess rewrite setup”

Problem and Issue on Restore

404 Error after Move or Migrate or Restore

  1. if main page got 404, means your wp-config.php file and wp_options table is not config correct
  2. check below tips for fix

Image not showing up

  1. most likely the uploaded contents like image got old url path, so need string replace in server post table to upload those links
  2. check below tips for fix

Page link not working

  1. page link in wordpress is not link to a physical html page, it is generated from database post entry content, and use url rewrite to create the “permalink”
  2. so the problem is on the permalink creation part, need .htaccess fix or server config fix to make it work
  3. check below tips for fix

Content or Function issue

  1. need to check code on related page or content in database for fix

Switch Database for WordPress

  1. go wordpress main web page folder, and edit wp-config
    define('DB_NAME', 'wordpress_NewDBName');
    define('DB_USER', 'database_access_userName');
    define('DB_PASSWORD', 'database_access_Password');
    define('DB_HOST', 'databaseServerAdress.whatsoever.com_or_IP');

Change WordPress Domain name

  1. change database > wp_options table
  2. fix all upload file url link, like images
    1. install “search and replace” plugin (link)
  3. optionally clean url rewrite cache to fix permalink not working problem
    1. empty or backup current .htaccess file in wordpress main folder
    2. WP-admin page, go Setting > Permalinks, just click save to re-generate the rewrite rules
  4. if above permalink not working, specially you working on local server or custom alias document path,
    1. in server config file, like apache's httpd.conf
      1. make sure rewrite url is loaded in httpd.conf
        LoadModule rewrite_module modules/mod_rewrite.so
      2. make sure your custom path is enabled for rewrite
        <Directory "/Projects/SITE/my_local_addon_path">
            AllowOverride All
            Require all granted
        </Directory>

Customize Wordpress

Hide Side Panel

Hide Page title

  • Title Hide plugin for general theme
  • Title hide for StoreFront theme
  • If you use Beaver page builder, it hide title by default
    1. under Beaver page builder, click Top Right Button “Tools”, click in the pop menu “Global Setting”
    2. then in its General tab, “Default Page Heading” part, change to hide
  • CSS method (only use bigger height for large device):
    • Method affect all pages: wordpress's Customize additional CSS
    • Method affect single page: Beaver Global setting CSS option, change “.entry-title” css property to hide
      @media screen and (min-width: 768px) {
      .site-header  {
        height: 500px !important; 
      }
      }

Change Menu Font size and bold and width

  • css method
    /*Menu font bold*/
    .main-navigation ul li a, .site-title a, ul.menu li a, .site-branding h1 a, .site-footer .storefront-handheld-footer-bar a:not(.button), button.menu-toggle, button.menu-toggle:hover {
        font-weight: bold;
    	font-size: 16px;
    }
     
    /*note you need to check the html structure to see which level of div to affect the width, since if its parent div has width limit, it won't go wider than its parent div, below is a example, the container under header is holding the menu*/
    @media screen and (min-width: 981px) {
        .site-header .ft-container{
            width:100% !important;
        }
    }

change login logo and link

  • functions.php
    function custom_login_logo() {
        echo '<style type="text/css">
            h1 a { background-image:url(/images/logo.jpg) !important; }
        </style>';
    }
    add_action('login_head', 'custom_login_logo');
     
    function my_login_logo_url() {
        return get_bloginfo( 'url' );
    }
    add_filter( 'login_headerurl', 'my_login_logo_url' );
     
    function my_login_logo_url_title() {
        return 'Your Site Name and Info';
    }
    add_filter( 'login_headertitle', 'my_login_logo_url_title' );
  • Plugin: Black Studio TinyMCE widget
    • allow create a full visual text editor widget
  • Plugin: Meta Slider by Team Updraft: it will create a slider element for you to add in pages

Plugin - WooCommerce Customize

addition ref:

ref: https://www.youtube.com/watch?v=W73umJTCFDE

  1. install normal wordpress first
  2. during initial setup, choose skip setup wizard to avoid error.
  3. install woocommerce and storefront theme
  4. upgrade php to 5.6 at least for woocommerce strip (go cpanel to switch php version, latest is 7.x)

Setup PayPal checkout otpion

  1. all you need is just that email in the PayPal setting, that is it.

Problem and Solution: install missing WooCommerce default pages

  • Plugin > WooCommerce settings > Status page > Tools tab: and run “Create default WooCommerce pages”
  • so that it will create all the core function pages like cart, shop like that.
  • Note: idealy, you should re-install fresh and follow above, so that eventually you should not have this issue

Extra related plugin

  • Woocommerce Social Media Share Buttons by Toastie Studio: add social share button to products
  • Homepage Control by WooThemes: it will add home page control in Customize panel, allow what storefront section to show in homepage
  • StoreFront site logo by wooassist: it will add a branding section in Customize panel, allow you to add logo, title, tag line

StoreFront customize

Customize Guide

  • center content in div
    <div align='center'></div>
  • display tag in Single post view (single.php in theme folder)
    • display tag, edit single.php
      /* find <?php the_content(); ?>, and put this code next to it */
      <p><?php the_tags(); ?></p>
  • display tag in Post Flow view (loop.php in theme folder)
  • in theme folder, edit functions.php:
    <?php
     
    /* My customize */
     
    // remove wordpress icon and menu on top admin bar
     
    function remove_wp_admin_bar_logo() {
            global $wp_admin_bar;
     
            $wp_admin_bar->remove_menu('wp-logo');
    }
     
    add_action('wp_before_admin_bar_render', 'remove_wp_admin_bar_logo', 0);
    ?>
     
    <?php
    // add custom widget in dash board
    // Add a widget in WordPress Dashboard
    function wpc_dashboard_widget_function() {
    	// Entering the text between the quotes
    	echo "<ul>
    	<li>Release Date: 2013 April</li>
    	<li>Author: Name</li>
    	<li>Website version: 1.1</li>
    	</ul>";
    }
    function wpc_add_dashboard_widgets() {
    	wp_add_dashboard_widget('wp_dashboard_widget', 'Technical information', 'wpc_dashboard_widget_function');
    }
    add_action('wp_dashboard_setup', 'wpc_add_dashboard_widgets' );
    ?>
     
    <?php
    // remove dashboard panels
    add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');
     
    function my_custom_dashboard_widgets() {
    global $wp_meta_boxes;
     //Right Now - Comments, Posts, Pages at a glance
    //unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
    //Recent Comments
    //unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
    //Incoming Links
    //unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
    //Plugins - Popular, New and Recently updated WordPress Plugins
    //unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
     
    //Wordpress Development Blog Feed
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
    //Other WordPress News Feed
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
    //Quick Press Form
    //unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);
    //Recent Drafts List
    //unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_recent_drafts']);
    }
    ?>
     
    <?php
    /** REMOVE DASHBOARD WIDGETS v 2.0**/
    function remove_dashboard_widgets() {
     
    global $wp_meta_boxes;
     
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
    //unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
    //unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_recent_drafts']);
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
     
    remove_action( 'wp_version_check', 'wp_version_check' );
    remove_action( 'admin_init', '_maybe_update_core' );
    add_filter( 'pre_transient_update_core', create_function( '$a', "return null;" ) );
     
    } 
    add_action('wp_dashboard_setup', 'remove_dashboard_widgets' );
     
    ?>
     
     
    <?php
    // Admin footer modification
     
    function remove_footer_admin () 
    {
        echo '<span id="footer-thankyou">Developed by <a href="#" target="_blank">Name</a></span>';
    }
    add_filter('admin_footer_text', 'remove_footer_admin');
    ?>
     
     
    <?php
    // Use your own external URL logo link
    function wpc_url_login(){
    	return "#"; // your URL here
    }
    add_filter('login_headerurl', 'wpc_url_login');
    ?>
     
    <?php
    // remove update menu
    add_action( 'admin_init', 'wpse_38111' );
    function wpse_38111() {
        remove_submenu_page( 'index.php', 'update-core.php' );
    }
    ?>
     
    <?php
    // ref link: http://webdesignandsuch.com/remove-menus-in-wordpress-admin-menu-dashboar/
    ?>
     
    <?php
    // remove all menu (including removing update menu)
    add_action('admin_menu', 'remove_menus', 102);
    function remove_menus()
    {
    global $submenu;
     
    //remove_menu_page( 'edit.php' ); // Posts
    //remove_menu_page( 'upload.php' ); // Media
    remove_menu_page( 'edit.php?post_type=gallery' ); // gallery
    remove_menu_page( 'link-manager.php' ); // Links
    //remove_menu_page( 'edit-comments.php' ); // Comments
    //remove_menu_page( 'edit.php?post_type=page' ); // Pages
    remove_menu_page( 'plugins.php' ); // Plugins
    //remove_menu_page( 'themes.php' ); // Appearance
    //remove_menu_page( 'users.php' ); // Users
    remove_menu_page( 'tools.php' ); // Tools
    //remove_menu_page(‘options-general.php’); // Settings
     
    remove_submenu_page ( 'index.php', 'update-core.php' );    //Dashboard->Updates
    remove_submenu_page ( 'themes.php', 'themes.php' ); // Appearance-->Themes
    remove_submenu_page ( 'themes.php', 'widgets.php' ); // Appearance-->Widgets
    //remove_submenu_page ( 'themes.php', 'theme-editor.php' ); // Appearance-->Editor
    remove_submenu_page ( 'options-general.php', 'options-general.php' ); // Settings->General
    remove_submenu_page ( 'options-general.php', 'options-writing.php' ); // Settings->writing
    //remove_submenu_page ( 'options-general.php', 'options-reading.php' ); // Settings->Reading
    remove_submenu_page ( 'options-general.php', 'options-discussion.php' ); // Settings->Discussion
    //remove_submenu_page ( 'options-general.php', 'options-media.php' ); // Settings->Media
    remove_submenu_page ( 'options-general.php', 'options-privacy.php' ); // Settings->Privacy
    }
     
    ?>
     
     
    <?php
    // change wording of menu
    // ref: http://wordpress.stackexchange.com/questions/9211/changing-admin-menu-labels
    // ref: http://wp.tutsplus.com/tutorials/creative-coding/customizing-your-wordpress-admin/
    //change the menu items label
    function edit_admin_menus() {  
        global $menu;  
     
        $menu[2][0] = 'Home'; // Change Dashboard to home
    }  
    add_action( 'admin_menu', 'edit_admin_menus' ); 
    ?>
     
    <?php
    // other method for change wording
    // ref: http://botcrawl.com/how-to-change-the-posts-menu-title-to-articles-in-the-wordpress-dashboard/
    // or use plugin: http://wordpress.org/extend/plugins/admin-menu-editor/
    </?>
     
    <?php
    // change howdy to welcome
    function replace_howdy( $wp_admin_bar ) {
     $my_account=$wp_admin_bar->get_node('my-account');
     $newtitle = str_replace( 'Howdy,', 'welcome,', $my_account->title );
     $wp_admin_bar->add_node( array(
     'id' => 'my-account',
     'title' => $newtitle,
     ) );
     }
     add_filter( 'admin_bar_menu', 'replace_howdy',25 );
    ?>
     
    <?php
    // remove wordpress word from browser title bar
    add_filter('admin_title', 'my_admin_title', 10, 2);
     
    function my_admin_title($admin_title, $title)
    {
        return get_bloginfo('name').' &bull; '.$title;
    }
    ?>
  • wp-includes folder, edit default-widgets.php, search for WordPress.org and replace <li> with this
    <?php
    /*
    <li><a href="<?php esc_attr_e( 'http://wordpress.org/' ); ?>" title="<?php echo esc_attr(__('Powered by WordPress, state-of-the-art semantic personal publishing platform.')); ?>"><?php
    // translators: meta widget link text 
    _e( 'WordPress.org' );
    ?></a></li>
    */
    ?>

WordPress Theme Structure

root main wordpress functional parts html structure
page-templates for templates of per page setup
inc function module and library
  • create a new folder inside the wp-content/themes directory, call the child theme “YourMainTheme-child”
  • under it, create style.css
    /*
     Theme Name:   YourMainThemName Child
     Description:  Anything
     Author:       Any
     Author URI:   
     Template:     YourMainThemName
     Version:      1.0.0
    */
  • create functions.php
    <?php
    function my_theme_enqueue_styles() {
     
        $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
     
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array( $parent_style ),
            wp_get_theme()->get('Version')
        );
    }
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    ?>
    ?>

Admin Panel Links

  • plugin: /wp-admin/plugins.php

Plugins for Page Builder tool

Plugins for Extra Functions

  • Feedback system
    • WP social feedback: (add feedback system with WordPress database)
    • UserNoise: (add modal feedback panel to WP)
    • disable comment
    • form
        • addon for storing form database: https://wordpress.org/plugins/contact-form-cfdb7/
        • after sent ok javascript setting in advance code area
          # this old js code not working after version 7
          on_sent_ok: "alert('sent ok');"
          on_sent_ok:  "document.getElementById('contactform').style.display = 'none';"
          ref: https://contactform7.com/dom-events/
          
          # after version 7, actually the contact form advanced setting area not useful anymore,
          need to use dom event function in wp theme functions.php part.
          ref: https://stackoverflow.com/questions/37802072/calling-a-javascript-function-on-contact-form-7-submission/49003426#49003426
          
          in theme functions.php, make sure in a code editor, so you know which is ending bracket "?>". add below above last line.
          # 123 is your contact form 7 id. so it can filter multiple form in your site.
          function mycustom_wp_footer() {
              ?>
              <script type="text/javascript">
                  var wpcf7Elm = document.querySelector( '.wpcf7' );
          
                  wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
                      if ( '123' == event.detail.contactFormId ) {
                          var x = document.getElementsByClassName('download-button');
                          var i;
                          for (i = 0; i < x.length; i++) {
                              x[i].style.display = 'block';
                          } 
                      }
                  }, false );
              </script>
              <?php
          }
          add_action( 'wp_footer', 'mycustom_wp_footer' );
          
          
      • message
        Thank you for your message. It has been sent.
        谢谢,您的消息已发送成功。
        There was an error trying to send your message. Please try again later.
        您的消息发送失败,请检查网络稍后重试。
        One or more fields have an error. Please check and try again.
        表格信息填写有误,请检查后再重新提交。
        There was an error trying to send your message. Please try again later.
        消息发送失败,请稍后重试。
        You must accept the terms and conditions before sending your message.
        请同意条款后再点击发送。
        The field is required.
        此项必填。
        The field is too long.
        此项信息类容过长。
        The field is too short.
        此项信息类容过短。
        The date format is incorrect.
        日期格式的填写不符合规范。
        The date is before the earliest one allowed.
        所填日期不可早于规定的最早有效日期。
        The date is after the latest one allowed.
        所填日期不可迟于规定的最晚有效日期。
        
        The number format is invalid.
        请输入有效数字。
        
        The answer to the quiz is incorrect.
        验证问题答案不正确。
        The e-mail address entered is invalid.
        请输入有效邮箱。
        The URL is invalid.
        请输入有效链接。
        The telephone number is invalid.
        请输入有效联系电话。
        
  • Forum inside WordPress:
    • Simple:Press (a forum with WordPress database)
  • Download and Asset Management
      • template customize, it is under the plugin/template folder, name pattern “content-download-YourName.php”, and in its setting page, choose custom template, and put input as “YourName”
    • Email before Download (a linker between “Download Monitor” and “Contact Form 7”): https://wordpress.org/plugins/email-before-download/
      • syntax for multiple download files after a form submit
        [email-download download_id="11,15,26" contact_form_id="23" checked]
      • for future customize of result html code, you need to copy the resulting page html and modify based on your need, then change the shortcode into actual html final code you modified in Post Edit.

Problem and Fix

  • Note: seems the max of max php setting allow is 128MB or something near, since php based is limited by nature, if you have tons of big video file like that, better use ftp or file manager from hosting cPanel to upload it (644 as file permission default) to wp_content/upload
  • make video shortcode full width of its parent div
    • html code part
      <div style="text-align:center" class="video">[video mp4="http://elitemarketing.online/wp-content/uploads/Smart_Service_System.mp4"][/video]</div>
    • additional css part in customize panel
      .wp-video, video.wp-video-shortcode, .mejs-container, .mejs-overlay.load {
          width: 100% !important;
          height: 100% !important;
      }
      .mejs-container {
          padding-top: 56.25%;
      }
      .wp-video, video.wp-video-shortcode {
          max-width: 100% !important;
      }
      video.wp-video-shortcode {
          position: relative;
      }
      .mejs-mediaelement {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
      }
      .mejs-controls {
          display: none;
      }
      .mejs-overlay-play {
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          width: auto !important;
          height: auto !important;
      }

Future Reference

https://drupal.org/start
http://www.drupalgardens.com/
https://drupal.org/project/sweaver

http://www.sitepoint.com/forums/showthread.php?1173215-Wordpress-vs-custom-solution
http://www.sitepoint.com/forums/showthread.php?1171051-developing-a-web-app-using-existing-CMS-or-not
http://www.sitepoint.com/forums/showthread.php?996116-Why-Drupal

http://www.youtube.com/user/ShovelCreative/videos
http://shovelcreative.com/#all

https://headway101.com/headway-theme-examples-2013/
http://headwaythemes.com/pricing/
http://headwaythemes.com/features/

http://www.gravityforms.com/
http://www.buzzr.com/

Wordpress vs self-contained Website system

  • Wordpress is free web system that you can download and install anywhere locally or remotely, as long as you have or set up a hosting server.
  • other self contained website system (like wix, weebly, squarespace) is providing All-in-One package system, which contains host server, drag and drop web builder and a black-box model web system with some customize options supported by one company.
Wordpress self-contained web system
system cost free subscription cost
host cost self setup cost or rental cost included in subscription
plugin and theme options free+premium free+premium
initial setup and design require knowledge or money hire drag and drop
follow up customize require knowledge or money hire drag and drop
deep customize require knowledge or money hire very limited
other system integration require knowledge or money hire very limited