appwiki:wordpress [ShiningWiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
Quick links:
  * [[appwiki:wordpress:theme|WP theme build]]

====== WordPress Essential Setup List ======

  - increase file upload size to 8MB
  - Make sure your PHP version is version 7 and above, or WordPress 5.0+ won't load.


====== 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.
    * XAMPP: https://www.apachefriends.org/index.html
  * 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)
      - press Ctrl+R to bring up prompt, and enter "cmd"
      - then type "ipconfig" to show your IPv4 address, that number is your local ip address where your neighbor computers can access you.

Tutorial
  * Local install: http://www.youtube.com/watch?v=b8U5SXnTEKE
  * Host install: http://www.youtube.com/watch?v=YsL4Ve-lyQo


====== 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 ([[https://wordpress.org/plugins/updraftplus/|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 ([[https://wordpress.org/plugins/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: ([[https://www.elegantthemes.com/blog/resources/get-your-site-moving-with-9-of-the-best-wordpress-migration-plugins|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

  * ref: https://codex.wordpress.org/WordPress_Backups

**Restore Method**

  * Plugin method:
    * option A: UpdraftPlus plugin ([[https://wordpress.org/plugins/updraftplus/|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 ([[https://wordpress.org/plugins/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: ([[https://www.elegantthemes.com/blog/resources/get-your-site-moving-with-9-of-the-best-wordpress-migration-plugins|link]])
  * Manually method:
    * upload wordpress web page folders
    * create database and insert exported SQL data file (you may search replace site address if domain changed)
      * alos for domain change, go phpmyadmin, in wp_options table, change siteurl and home value
    * correct "wp-conf.php" for database connection and "siteurl,name change" and "database url replace" (maybe) and ".htaccess rewrite setup"
    * ref:
      * https://help.vodien.com/articles/change-database-configuration-in-wordpress/

**Problem and Issue on Restore**

__404 Error after Move or Migrate or Restore__
  - if main page got 404, means your wp-config.php file and wp_options table is not config correct
  - check below tips for fix

__Image not showing up__
  - most likely the uploaded contents like image got old url path, so need string replace in server post table to upload those links
  - check below tips for fix

__Page link not working__
  - 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"
  - so the problem is on the permalink creation part, need .htaccess fix or server config fix to make it work
  - check below tips for fix

__Content or Function issue__
  - need to check code on related page or content in database for fix

__Switch Database for WordPress__
  - go wordpress main web page folder, and edit wp-config <code php>
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');
</code>

__Change WordPress Domain name__
  - change database > wp_options table
    - siteurl: http://newName.com/optionalPath
    - home: http://newName.com/optionalPath
  - fix all upload file url link, like images
    - install "search and replace" plugin ([[https://wordpress.org/plugins/search-and-replace/|link]])
    - search "http://oldName.com/optionalOldSubPath" to "http://NewName.com/optionalNewLocationSubPath"
  - optionally clean url rewrite cache to fix permalink not working problem
    - empty or backup current .htaccess file in wordpress main folder
    - WP-admin page, go Setting > Permalinks, just click save to re-generate the rewrite rules
  - if above permalink not working, specially you working on local server or custom alias document path,
    - in server config file, like apache's httpd.conf 
      - make sure rewrite url is loaded in httpd.conf <code>LoadModule rewrite_module modules/mod_rewrite.so</code>
      - make sure your custom path is enabled for rewrite <code><Directory "/Projects/SITE/my_local_addon_path">
    AllowOverride All
    Require all granted
</Directory>
</code>

  * ref:
    * http://www.wpbeginner.com/wp-tutorials/how-to-fix-wordpress-posts-returning-404-error/
    * http://www.wpbeginner.com/wp-tutorials/how-to-enable-custom-permalinks-in-wordpress-wamp-installation/
    * http://www.wpbeginner.com/beginners-guide/beginners-guide-how-to-restore-wordpress-from-backup/
    * https://wordpress.org/support/topic/404-error-and-permalinks-1/
    * https://codex.wordpress.org/Moving_WordPress
    * https://codex.wordpress.org/Backing_Up_Your_Database
    * https://www.sitepoint.com/how-to-migrate-a-wordpress-site-to-a-new-domain-and-hosting/
    * https://mediatemple.net/community/products/dv/204405334/how-can-i-change-the-domain-name-for-my-wordpress-site
    * https://sg.godaddy.com/help/fixing-broken-links-after-moving-your-wordpress-site-7572

====== Customize Wordpress ======

**Hide Side Panel**
  * Go page setting side panel, choose full-width template
  * if it doesn't have this template, go theme folder, duplicate page.php as full-width.php, and remove this code and its div <code php><?php get_sidebar(); ?></code>
  * to make wordpress recognize that php as template, put this code below the php tag <code>
/**
 * Template Name: fullwidth
 *
 * @package themename
 */
</code>
  * ref: http://www.wpbeginner.com/wp-themes/how-to-remove-the-sidebar-in-wordpress/

**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
    - under Beaver page builder, click Top Right Button "Tools", click in the pop menu "Global Setting"
    - 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 <code css>
@media screen and (min-width: 768px) {
.site-header  {
  height: 500px !important; 
}
}
</code>

**Change Menu Font size and bold and width**
  * css method <code css>
/*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;
    }
}

</code>

** change login logo and link**
  * ref: https://paulund.co.uk/change-wordpress-login-logo-without-a-plugin
  * functions.php <code 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' );
</code>
===== Useful Widget =====

  * Plugin: Black Studio TinyMCE widget
    * allow create a full visual text editor widget 

===== Useful Element for Page =====

  * Plugin: Meta Slider by Team Updraft: it will create a slider element for you to add in pages

====== Plugin - WooCommerce Customize ======

addition ref:
  * https://www.youtube.com/watch?v=-nEPFB0e4vs
  * booking: https://www.youtube.com/watch?v=c_LsUb_ahkw

ref: https://www.youtube.com/watch?v=W73umJTCFDE
  - install normal wordpress first
  - during initial setup, choose skip setup wizard to avoid error.
  - install woocommerce and storefront theme
  - upgrade php to 5.6 at least for woocommerce strip (go cpanel to switch php version, latest is 7.x)

**Setup PayPal checkout otpion**
  - 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
  * <del>StoreFront site logo by wooassist: it will add a branding section in Customize panel, allow you to add logo, title, tag line</del>

  * GeoIP data:
    * http://dev.maxmind.com/geoip/legacy/geolite/

**StoreFront customize**
  * menu and logo one same line: https://www.pootlepress.com/shop/align-menu-right-woothemes-storefront/
  * logo SVG for better scaling and less blur compare to png logo: 
    * enable SVG first with this plugin: https://wordpress.org/plugins/svg-support/
    * then enable skip cropping in functions.php: https://make.wordpress.org/core/2016/03/10/custom-logo/ 
    * for storefront, you need to use custom branding plugin instead of above for storefront: https://wordpress.org/plugins/storefront-site-logo/
  * header full width: <code css>.site-header .col-full{max-width:100%;}</code>
  * sale tag <code css>.product .onsale {background-color: #ef8200;}</code>

**All theme**

  * shop page
    * product title font size <code css>
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 20px !important;
}
/* price */
.woocommerce ul.products li.product .price{
  font-size: 20px !important;
}
</code>
  * single product page
    * product title font size <code css>
.single-product .product_title{ font-size:20px !important; }
</code>
  * order page, order number font size <code css>
.woocommerce-page.woocommerce-checkout .woocommerce-order ul.order_details, .woocommerce.woocommerce-checkout .woocommerce-order ul.order_details {
    font-size: 20px;
}
</code>

  * remove related product
    * edit child theme's functions.php <code>
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
</code>
====== Customize Guide ======

  * theme:
    * http://wordpress.org/extend/themes
    * install theme:
      * http://codex.wordpress.org/Using_Themes 
    * or upload theme into
      * wp-content/themes
    * steps for install Theme by FTP manually:
      - put it like wp-content/themes/YourNewTheme
      - for child theme (which is a theme inherits parent theme with extra changes parts )
        - put it like wp-content/themes/YourNewTheme-child

  * security:
    * change wordpress database table name:
      * http://tdot-blog.com/wordpress/6-simple-steps-to-change-your-table-prefix-in-wordpress
      * tool: http://wordpress.org/extend/plugins/change-table-prefix/

  * appearance:
    * footer (change footer area info):
      * edit functions.php footer function part in the theme folder.
      * footer.php: https://www.youtube.com/watch?v=6eoYSSjrcQU
    * login logo:
      * tool: http://wordpress.org/extend/plugins/login-logo/
      * tool: http://wordpress.org/extend/plugins/bm-custom-login/
      * video guide: http://www.youtube.com/watch?v=OJUmWF9Fw_I
    * top admin bar logo:
      * http://www.wpinsite.com/code-snippets/remove-the-wordpress-logo-from-admin-bar#lightbox[auto_group1]/1/
    * control panel:
      * http://wp.smashingmagazine.com/2012/05/17/customize-wordpress-admin-easily/
      * http://www.artofblog.com/white-labeling-wordpress/
    * overall admin panel theme change
      * http://wordpress.org/extend/plugins/ozh-admin-drop-down-menu/
      * <code php>
// in directory: \plugins\ozh-admin-drop-down-menu\inc\core.php
// search for "Thank you", comment out this part
/*
echo <<<HTML
<p id="footer-ozh-oam">Thank you for using <a href="http://planetozh.com/blog/my-projects/wordpress-admin-menu-drop-down-css/">Admin Drop Down Menu</a>, a wonderful plugin by <a href="http://planetozh.com/blog/">Ozh</a></p>
HTML;
*/
</code>

===== Custom Element =====

  * center content in div <code html><div align='center'></div></code>


===== Custom Font =====

  * use non-standard webfont or any font for wordpress
    * convert to web font format and css code it into page
    * online web font convertor: https://transfonter.org/
    * online font source: http://sc.chinaz.com/

  * ref:
    * use pc font: http://justcreative.com/2013/01/22/how-to-use-custom-fonts-with-font-face-on-wordpress/
    * use google font: http://wpsites.net/web-design/fonts-wordpress/
    * css code related: http://codex.wordpress.org/Playing_With_Fonts
===== Posts and Page Customize =====

  * display tag in Single post view (single.php in theme folder)
    * display tag, edit single.php <code php>
/* find <?php the_content(); ?>, and put this code next to it */
<p><?php the_tags(); ?></p>

</code>
  * display tag in Post Flow view (loop.php in theme folder)

===== Admin Panel Customize =====

  * in theme folder, edit functions.php: <code 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;
}
?>
</code>
  * remove "Powered by Wordpress":
    * use this plugin, easy and update proof: https://wordpress.org/plugins/remove-powered-by-wp/

  * additional reference link:
    * http://www.catswhocode.com/blog/wordpress-dashboard-hacks-for-developers-and-freelancers
    * http://wordpress.stackexchange.com/questions/18163/how-can-i-change-the-dashboard-appearance

===== feature customize =====

  * disable all the wordpress update functions.
    * http://wordpress.org/extend/plugins/disable-wordpress-updates/




====== WordPress Theme Structure ======

^ root | main wordpress functional parts html structure |
^ page-templates | for templates of per page setup |
^ inc | function module and library |

===== Child Theme Create =====

  * ref: https://codex.wordpress.org/Child_Themes

  * create a new folder inside the wp-content/themes directory, call the child theme "YourMainTheme-child"
  * under it, create style.css <code css>
/*
 Theme Name:   YourMainThemName Child
 Description:  Anything
 Author:       Any
 Author URI:   
 Template:     YourMainThemName
 Version:      1.0.0
*/
</code>
  * create functions.php <code 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' );
?>
?></code>

====== Admin Panel Links======

  * plugin: /wp-admin/plugins.php

====== Plugins for Page Builder tool ======

  * compare table of common options:
    * https://www.codeinwp.com/blog/elementor-vs-divi-builder-vs-beaver-builder/
    * https://www.wpcrafter.com/versus/divi-vs-elementor/

  * https://www.youtube.com/watch?v=i_2BHgQ_yeA
    * elementor 2 vs beaver builder vs divi
      * Elementor: https://elementor.com/
      * Beaver Builder: https://www.wpbeaverbuilder.com/
      * Divi: https://www.elegantthemes.com/plugins/divi-builder/
      * Thrive Architect: https://thrivethemes.com/

    * recommended generic theme for integrating with other page builder
      * Astra: https://wpastra.com
      * GeneratePress: https://generatepress.com/
      * OceanWP: https://oceanwp.org/
      * WP-PBF: https://wp-pagebuilderframework.com/

====== Plugins for Extra Functions ======

  * slider
    * https://wordpress.org/plugins/ml-slider/
  * icon:
    * https://wordpress.org/plugins/svg-vector-icon-plugin/
    * font awesome:
      * icon syntax (fa-2x means the size, fa-fw means fix width, fab's b means brand bg) <code html>
<i class="fab fa-cc-visa fa-2x fa-fw"></i>
<i class="fab fa-cc-mastercard fa-2x fa-fw"></i>
<i class="fa fa-facebook-official fa-2x fa-fw"></i>
</code>
  * button:
    * method A: html+css way: https://www.designrush.com/resources/css3buttongenerator
    * button to top code <code html><a href="#top" class="showLink"><button class="showBtn">Go Top and Fill the form.</button></a></code>
    * method B: plugin way: https://themeisle.com/blog/add-buttons-in-wordpress/
  * mobile menu more detail plugin options:
    * WP Mobile Menu (more like replace built-in mobile menu): https://wordpress.org/plugins/mobile-menu/
  * custom menu per page:
    * conditional menu: https://wordpress.org/plugins/conditional-menus/ (70k, 1yo) (menu level condition only)
    * If menu - visibility control https://wordpress.org/plugins/if-menu/ (80k, 1yo) (menu item level)
      * ref: https://betterstudio.com/blog/conditional-menu-in-wordpress/
    * (above is better and newer) CE WP-Menu per Page: https://ppfeufer.de/wordpress-plugin/ce-wp-menu-per-page/
    * coding method: https://www.youtube.com/watch?v=OFieHs4E-P4
  * Admin Panel enhance
    * Admin menu editor: (change names admin menu to fit function)
      * http://wordpress.org/extend/plugins/admin-menu-editor/
  * Blog enhance
    * Blog Designer plug: https://wordpress.org/plugins/blog-designer/
      * shortcode to add layout of posts<code>[wp_blog_designer]</code>
      * single.php is the single post template
    * hide title: https://wordpress.org/plugins/hide-title/
    * display post shortcode: https://wordpress.org/plugins/display-posts-shortcode/
    * disable comment: https://wordpress.org/plugins/disable-comments/
    * advanced database cleaner (clean comment): https://wordpress.org/plugins/advanced-database-cleaner/
    * bootstrap integration: https://wordpress.org/plugins/bootstrap-integration/

  * Feedback system
    * WP social feedback: (add feedback system with WordPress database)
      * http://wordpress.org/extend/plugins/wp-social-feedback/screenshots/
    * UserNoise: (add modal feedback panel to WP)
      * http://wordpress.org/extend/plugins/usernoise/
    * disable comment
      * https://wordpress.org/plugins/disable-comments/
    * form
      * https://wordpress.org/plugins/contact-form-7/
        * addon for storing form database: https://wordpress.org/plugins/contact-form-cfdb7/
        * ref:https://www.youtube.com/watch?v=mcbIKJK6EJ0
        * after sent ok javascript setting in advance code area <code>
# 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' );


</code>
        * ref: https://contactform7.com/additional-settings/
      * message <code>
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.
请输入有效联系电话。

</code>

  * Forum inside WordPress:
    * Simple:Press (a forum with WordPress database)
      * http://simple-press.com/
        * Q & S:
          * fix logout page redirect: change in Forum-Components-Login And Registration

  * video channel streaming
    * jcwp youtube channel embed:
      * http://wordpress.org/extend/plugins/jcwp-youtube-channel-embed/screenshots/

  * radio channel stream
    * one of website: http://radiotuna.com/
      * embed method: http://radiotuna.com/OnlineRadioPlayer/EmbeddingHelp/Wordpress

  * wordpress related update manager:
    * Easy Updates Manager: https://wordpress.org/plugins/stops-core-theme-and-plugin-updates/

  * ecommerce: 
    * woocommerce: https://woocommerce.com/store-owners/

  * multi language:
    * polyLang: basically create the page for extra language
      * ref: http://www.wpbeginner.com/beginners-guide/how-to-easily-create-a-multilingual-wordpress-site/
    * WPML: one post per language
    * qTranslate-X, WPGlobus: all language in same page.
    * Multisite language Switcher, Multilingual Press, Zanto: link separate language site together 

  * social sharing
    * https://wordpress.org/plugins/simple-social-buttons
  * map
    * https://wordpress.org/plugins/wp-google-maps/
      * get google cloud platform > google maps > apis > Maps Javascript API > credentials
      * then, select the key and add allowed request site
  * robot proofing
    * https://wordpress.org/plugins/really-simple-captcha/

  * Download and Asset Management
    * Download Monitor: https://wordpress.org/plugins/download-monitor/
      * 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<code>[email-download download_id="11,15,26" contact_form_id="23" checked]</code>
      * 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.

  * Photo Gallery:
    * Photo Gallery by Envira (free version limited to basic grid layout): https://wordpress.org/plugins/envira-gallery-lite/
    * NextGEN Gallery (free version better than above, has grid, slide box, arrow, abit complex with album and gallery level): https://wordpress.org/plugins/nextgen-gallery/
    * Photo Gallery by web10 (ok, same as the one above, no thumb slide gallery)
    * FooGallery (far more grid option than all above, good for photo show, but no slider galerry for free)
    * Master Slider (best free option for gallery with thumbnail rows)
    * or use html code manually: https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp
  * Enable media replace:
    * https://wordpress.org/plugins/enable-media-replace/
  * booking:
    * booking calendar: https://wpbookingcalendar.com/
      * free version: only 1 calendar
      * paid version: add resource tab for each resource's calendar
    * woomill booking: https://woomill.com/downloads/bookings/
      * 10 usd: has resource and works with woo-commerce.
      * tutorial: https://www.youtube.com/watch?v=c_LsUb_ahkw
    * Easy appointment: https://easy-appointments.net/features/
      * https://www.youtube.com/watch?v=H7Hj4jfMDik&t=22s

  * social proof popups, notify, pop ups, FOMO
    * wpfomo: https://wordpress.org/plugins/wpfomo/

  * opt-in popup:(to get visitor email for free stuff)
    * pop-up maker: (can be used with contact form 7)
      * https://www.youtube.com/watch?v=n-oHKpXNNLQ

  * element (spoiler)
    * Shortcode Ultimate: https://wordpress.org/plugins/shortcodes-ultimate/
====== Problem and Fix======

  * RSS feed not working 
    * ref: http://www.w3it.org/blog/wordpress-feed-error-output-solution-how-to/
    * the fix in wp-includes\feed-rss2.php, same method for other feed type file<code php>
// put this line at top of code page, right after $more = 1;
$out = ob_get_contents();
$out = str_replace(array("\n", "\r", "\t", " "), "", $input);
ob_end_clean();
</code>
  * roles in WordPress, admin-editor-author-contributor
    * http://codex.wordpress.org/Roles_and_Capabilities

  * max upload file size limit in media browser
    * it is limited by hosting setting, and ideally should be fixed in host control panel, php upload and memory size
    * reason:
      * upload_max_filesize: max upload file size in php (base limit)
      * post_max_size: max upload file size in form submit (level 2 limit > base limit)
      * memory_limit: php memory limit, should larger than upload file size. (level 3 limit > level 2 limit > base limit)
    * solution:
      * for godaddy solution (cPanel php version setting): https://www.youtube.com/watch?v=YmS92xfmbFU
        * cPanel: select PHP version > PHP option: memory limit no touch (default), change upload limit to 64MB, post limit (64MB)
      * for other method:
          * php.ini method (runtime override): https://www.youtube.com/watch?v=_K7Z3SzVAIo
          * wordpress plugin method: https://wordpress.org/plugins/upload-max-file-size/#reviews
          * functions.php code method: http://www.wpbeginner.com/wp-tutorials/how-to-increase-the-maximum-file-upload-size-in-wordpress/
          * article: https://www.bitcatcha.com/blog/2016/increase-maximum-upload-file-size-in-wordpress/

  * 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
    * then use plugin: add from server to register them in media library
      * https://wordpress.org/plugins/add-from-server/


  * make video shortcode full width of its parent div
    * html code part <code html>
<div style="text-align:center" class="video">[video mp4="http://site.com/wp-content/uploads/test.mp4"][/video]</div>
</code>
    * additional css part in customize panel <code css>
.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;
}
</code>

  * Problem: "Maximum execution time of 30 seconds exceeded" when wordpress php process time is longer than default 30s
    * Solution: edit php.ini file, change max_execution_time = 300, so it will allow more time to process the content or installation plugin process.
====== Future Reference ======
<code>
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/
</code>

====== 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 |

  * ref:
    * Weebly vs WordPress 2017: https://www.youtube.com/watch?v=6I2LDFKXcHc

====== WordPress Security Scan and Guide ======

  * WordPress hack is always there, so keep everything updated and backup-ed in wordpress in extremely important

  * Your safety check
    * https://hackertarget.com/wordpress-security-scan/
    * https://sitecheck.sucuri.net/
    * https://urlscan.io/

  * Wordpress plugin as internal scanner:
    * Wordfence: https://wordpress.org/plugins/wordfence/
    * Sucuri: https://wordpress.org/plugins/sucuri-scanner/
      * compare: https://www.collectiveray.com/wordpress/wordpress-plugins/sucuri-vs-wordfence-wp-security-plugin.html


====== Problem and Solution ======

  * Problem: WP plugin - Elementor widget panel keep loading:
    * solution: 
      - sometimes, it maybe browser cache mess up, just open a private browser tab to see if works or not, if not then try following
      - memory not enough, go cPanel File Manager, site location
      - edit wp-config.php, under define('WP_DEBUG', false); line add <code>
define('WP_MEMORY_LIMIT', '256M');
define('WP_MAX_MEMORY_LIMIT', '128M');
</code>
      - save and reload that page, it should work

  * Problem: some content loading in Safari, not in Chrome
    * Solution: if you use SSL in your website, most likely, the Chrome didn't load your site in https by default, that you need to force all browser to load https version instead of http version
      * the plugin: https://wordpress.org/plugins/wp-force-ssl/

  * Problem: run Elementor update ruin the whole wordpress
    * solution: disable all the plugin and only on Elementor, then run data updater, after it is done, reactive the old plugins

  * Problem use http or https link inside wordpress in transition period
    * Solution: if you will use ssl and https is the way, but sometimes "mixed content" in page, with https and http will make browser complain, sometimes for internal resource, you may use "protocol relative url" like "//doc/my.pdf"
    * research more: https://security.stackexchange.com/questions/216804/whats-the-security-risk-of-using-a-protocol-relative-url-in-a-css-stylesheet