Complete Setup of NextGEN Gallery

Requirements

  • PHP version 5.6 or greater
  • MySQL version 5.6 or greater
  • The mod_rewrite Apache module
  • PHP Safe Mode turned OFF
  • At least 128MB memory allowed (250MB is ideal)
  • 10MB or larger upload limit

Installation

  • Log in to your site’s Dashboard (e.g. http://domain.com/wp-admin)
  • In the left panel, click “Plugins”, then click “Add New”.
  • Search for “NextGEN Gallery”
  • Click the “Install Now” button.
  • Wait for the installation to finish, then click the “Activate” button.
  • You can also download the zip file from plugin page (https://goo.gl/5JJjLo) and upload it from the Plugins >> Add New > Upload page.

Notes

Other settings to check:

  • 755 permissions set on /wp-content directory.
  • Images must optimize first before uploading to gallery to avoid slowness speed of the site (and load time of gallery)
  • For the best performance it is recommended resizing your images to no larger than 1920×1280.

Gallery types

  • Basic Thumbnail Gallery (gallery is a grid of images that when clicked on, open in a pop-up full view)
  • Basic Slideshow Gallery (single image display gallery with transition options for your photos)
  • Imagebrowser Gallery ( slideshow gallery with forward and back navigation)
  • Singlepics (this allows you to add a single picture from any gallery you have created previously. You have two options to add a single picture in a page or blog post)
  • TagCloud (you can combine all of your tags into a word cloud where your visitors can select any category to view all images tagged with that word)
  • Templates (To have custom effects for galleries, you may need to install a NextGEN Gallery extension plugin. Other effects are built-in or created by you.)

How to use / Setup

Adding Images

  • Go to Gallery > Add Gallery/Images > Add New Gallery
  • Choose the gallery in the dropdown to upload your images to, or create a new gallery by entering the name of your gallery in the text field. (If you’d like to create your gallery directly from your page or post, navigate to the insert gallery window icon ‘Add Gallery’ button icon: http://prntscr.com/ih8mtd)
  • Next, click the ‘Add Gallery / Images’ tab
  • You have three options of uploading images:
  • 1. Upload: http://prntscr.com/ih8q35
  • First, choose the gallery to upload images to (or create new)
  • Select your image files from your computer, or drag a batch of images (you can include .zip files) and drop them in the queue to upload
  • Click ‘Start Upload’
  • 2. Import wordpress media: http://prntscr.com/ih8q7z | http://prntscr.com/ih8qc7
  • Select folder to import images to, or provide a name to create a new gallery.
  • Click ‘Select Images’ and the WordPress media window will open where you’ll select your images to import.
  • Click ‘Select’. This will import the images to your gallery that will appear under Gallery > Manage Galleries.
  • 3. Import folder of images on server: http://prntscr.com/ih8qyy
  • Select a folder to import. *The folder name will be used as the title of the gallery.
  • You may select to keep images in original location, but if you keep this option unchecked, images will be copied over to your NextGEN ‘gallery’ folder under /wp-content/gallery
  • Click ‘Import folder’. This will import the images in that folder on your server, to a new folder that will appear under Gallery > Manage Galleries

Adding Gallery

  • Go to your page or blog post and click the insert gallery window ‘Add Gallery’
  • A pop up window will appear, here you can select your display type (i.e. Thumbnail gallery, Slideshow, Imagebrowser, Tagcloud, or Album): http://prntscr.com/ih8s8f
  • Next, click the ‘What would you like to display’ tab and select the gallery you wish to display: http://prntscr.com/ih8sex
  • Next you may adjust the gallery settings for this gallery (these are unique settings for this gallery only. Global settings are set under Gallery >> Gallery Settings) under ‘Customize the display settings’, and under ‘Sort or Exclude’.
  • When you are finished, click ‘save’ and the gallery will be added within your post as a thumbnail preview, click publish or update on your post/page
  • If you need to manage or edit your gallery click once on the thumbnail and the Insert Gallery Window will reappear.

Complete Setup of Yoast SEO

Requirements

  • PHP version 7 or greater
  • MySQL version 5.6 or greater OR MariaDB version 10.0 or greater

Installation

  • Visit ‘Plugins > Add New’
  • Search for ‘Yoast SEO’
  • Activate Yoast SEO from your Plugins page
  • Go to Tools and import this file to the Yoast SEO settings – https://goo.gl/NDYU8h
  • Go to General > Open the configuration wizard
  • Fill in the required information
    • I. General > Your Info
      • Website Name
      • Company or person
    • II. General > Webmaster Tools
      • Bing Webmaster Tools
      • Google Search Console
    • III. Social > Accounts
      • Facebook Page URL
      • LinkedIn URL
      • Google+ URL
    • *If not available ask the clients in notes or offer to create it for them

NOTES

  • For Google Analytics Code, DO NOT EDIT header.php.
  • Google Analytics code should be installed through Yoast plugin.

Useful Addon plugins

Moving W3 Total Cache CSS and JS to the footer

By default, W3 Total cache plugin does not provide any option to move CSS files to footer. It places the CSS files at the top of the page which results in render blocking the page. When we test the site on Pagespeed Insights, you will get the suggestion to remove the render blocking CSS and JS files.

Move W3 Total Cache CSS to Footer
Using the W3 Total Cache tag, we can easily move CSS and JS files to the footer by adding following code:

<!-- W3TC-include-css -->

Put above code before wp_footer(), so that our CSS to be loaded prior to our JavaScript files. This will move all Combined and Minified CSS Files to the footer.

Move W3 Total Cache JS to Footer
We can move JS files created by W3 Total Cache easily by choosing manual minify. This is to move JS files by inserting following code to the footer before the closing tag.

<!-- W3TC-include-js-head -->

WooCommerce One Page Checkout

This One Page Checkout extension displays product selection and checkout forms on a single page. Customers can add products to an order (or remove them) and complete payment without leaving the page.  One Page Checkout premium extension is $79 and can be purchase here.

One Page Checkout Features

  • Product Selection + Checkout
  • Curated Products
  • Custom Landing Pages
  • Built-in & Custom Templates

Standard Setup of Must-Have Plugins

1. Akismet

Below is the complete installation and setup of Akismet plugin:

  • Install Akismet plugin to the site
  • Activate and enter the Akismet.com API key
  • Select “Always put spam in the Spam folder for review.” on Strictness option

akismet-settings

2. BackupBuddy

IMPORTANT! Do not setup Backupbuddy if the site is on development server. Setup BackupBuddy plugin on live sites only.

Below is the complete installation and setup of BackupBuddy plugin:

  • Install and activate BackupBuddy plugin to the site
  • Go to the Settings > General Settings and set ImportBuddy password
  • Scroll down to Local Archive Storage Limits then set the age limit number of backups to 150 days
  • Keep 4 full backups and 30 database backup
  • On Schedules Settings, schedule weekly complete backup and daily database backup

backupbuddy-settings-databasebackup

Database Backup

backupbuddy-settings-fullbackup

Full Backup

3. Jetpack

Below is the complete installation and setup of Jetpack plugin:

  • Log in to your site’s Dashboard (e.g. http://www.domain.com/wp-admin)
  • In the left panel, click “Plugins”, then click “Add New”.
  • Search for “Jetpack”
  • Click the “Install Now” button.
  • Wait for the installation to finish, then click the “Activate” button.
  • Click the “Connect to WordPress.com” button. Login with your WordPress.com account or create an account.
  • Login with your WordPress.com account (or create one) and click “Authorize Jetpack”
  • Click the “Approve” button and wait for the connection process to finish.
  • Select Basic plan. You will be returned to your site’s Dashboard and see the message “Your Jetpack site is ready to go!”
  • Click “Activate recommended features” (optional)

wp-smush-settingsWP Smush Plugin Settings

4. WP Smush Plugin

Below is the complete installation and setup of WP Smush plugin:

  • Install and activate WP Smush Plugin
  • Make sure that all images are smushed and up to date.
  • Go to the Settings and enable automatic smush of the images

wp-smush-settings

5. Yoast SEO

  • Install Yoast SEO plugin
  • Go to Tools and import this file to the Yoast SEO settings – https://goo.gl/NDYU8h
  • Go to General > Open the configuration wizard
  • Fill in the required information

I. General > Your Info

  • Website Name
  • Company or person

II. General > Webmaster Tools

  • Google Search Console

* Always use noypi2020@gmail.com email to set up

III. Social > Accounts

  • Facebook Page URL
  • LinkedIn URL
  • Google+ URL

*If not available ask the clients in notes or offer to create it for them

6. Google Analytics

  • Access Google Anlytics account
  • Click Admin on main navigation.

google-analytics-step-1

  • Click the admin dropdown then select create new account.

google-analytics-step-2

  • Set account name, website name and website URL the click Get tracking ID button.

google-analytics-step-3

  • Get the tracking ID.

google-analytics-step-4

    • Access WordPress dashboard and install Google Analytics by MonsterInsights plugin
    • Go to Insights > Settings > General.
    • Click Authenticate with your Google account button

google-analytics-step-5

    • Paste Google Authentication code

google-analytics-step-5

  • Paste Google Authentication code
  • Select the website

7. Search Console

  • Access Google account
  • Go to Google Search Console Dashboard
  • Click add property.

google-console-step-1

  • Select Website as property type and add the www version of the site.

google-console-step-2

  • Next click the Alternate methods to verify the ownership.

google-console-step-3

  • Select HTML tag on the Alternate methods and copy the content value.

google-console-step-4

  • Access the wordpress site and go to Yoast SEO > Dashboard > Webmaster Tools.

google-console-step-5

  • Paste the code to the Google Search Console Field then click Save changes.

google-console-step-6

  • Go back to Google Search Console then click verify.

google-console-step-7

  • A confirmation message must show up then click continue.

google-console-step-8

  • Go back to Google Console and add the non-www version of the site.

google-console-step-9

  • Click the Alternate methods tab, select HTML tag and click verify.

google-console-step-10

  • On the non-www version of the site, click settings icon and select the option Site Settings.

google-console-step-11

  • Select the non-www on Preferred to domain then click Save.

google-console-step-12

8. XML Submission

  • Access WordPress site
  • Go to Yoast SEO > XML Sitemaps > Post types
  • Make sure that the XML sitemap functionality is enabled.

xml-submission-step-1

  • Go to Yoast SEO > XML Sitemaps > General and click the XML Sitemap link.

xml-submission-step-2

  • Get the XML Sitemap link
  • Access Google Console accountm, go to Dashboard > Crawl > Sitemaps.

xml-submission-step-3

  • Click Add/Test Sitemap button.

xml-submission-step-4

  • Paste the XML Sitemap link then click submit.

xml-submission-step-5

9. W3 Total Cache plugin

  • Install and activate W3 Total Cache plugin.
  • Go to Performance > General Settings.

w3-total-cache-step-1

  • Scroll down to Page Cache then check Enable.

w3-total-cache-step-2

  • Scroll down to Browser Cache then check Enable.

w3-total-cache-step-3

  • Click Save Settings & Purge Caches.
  • Go to Performance > Browser Cache > General
  • Make sure this 3 options are checked.

w3-total-cache-step-4

10. Wordfence Security plugin

    • Install and activate Wordfence Security plugin.
    • Go to Wordfence options in the side menu and email address to receive alerts.
    • On Basic options, uncheck Enable Live Traffic View.
    • How does Wordfence get IPs: From the drop-down menu, select “Use PHP’s built in REMOTE_ADDR…”.

wordfence-basic-options

    • Under Scans to include, select all options.

wordfence-scans-to-include-option

    • On Login Security Options, set the option same as on the screenshot

wordfence-login-security-options

11. Monarch plugin

    • Install and activate Monarch plugin.
    • Go Monarch Settings > Social Sharing > Location, then select Inline
    • Go Monarch Settings > Social Sharing > Networks, then add Google, Facebook and Twitter
    • Go Monarch Settings > Social Sharing > Inline, scroll down to post type settings then select Post



    • Access Facebook for Developers account
    • Click Add New App on My Apps button
    • Add Website Title to Display Name field
    • Select approriate category
    • You’ll be redirected to the Dashboard of Apss
    • On Dashboard, click Choose Platform then select Website
    • Scroll down to the page then add Site URL
    • Go back to the App Dashboard then go to Settings > Basic
    • Add the domain to the App Domain field then save changes
    • Go to App Review then select Yes to make the app public
    • Go to Dashboard then get App ID and App Secret key
    • Go to wordpress site, Tools > Monarch Settings then add the
    • App ID and App Secret key

Facebook Authentication
Facebook Authentication
Facebook Authentication
Facebook Authentication
Facebook Authentication
Facebook Authentication
Facebook Authentication
Facebook Authentication

13. AMP and Yoast SEO AMP glue plugin

  • Install & activate the AMP plugin and see what the AMP pages look like by adding /amp to the end of each posts.
  • Install & activate Yoast SEO AMP glue plugin.
  • Go to the SEO > AMP settings menu, design tab, and change the styling to fit website brand.

Gravity Forms: Hide labels

If you want to add an option to hide field labels on a field by field basis, simply add the following line of code to your themes (functions.php).

add_filter( 'gform_enable_field_label_visibility_settings', '__return_true' );