Add WP Bootstrap Navwalker To You WordPress Theme

Why Add Bootstrap Navwalker?

The main reason for adding this addition to your WordPress Theme is best said by its author [Git Link]

A custom WordPress Nav Walker Class to fully implement the Bootstrap 4 navigation style in a custom theme using the WordPress built in menu manager.”

By implementing this code, you will be changing how the menus are generated by WordPress. This will allow the incorporation of Bootstrap 4 styling and standards found on a pure Bootstrap built website. This addition should be pair with an installation of Bootstrap by Twitter [Link] and a consideration for using a Bootstrap focused design.

Please check out “ADDING BOOTSTRAP TO AN UNDERSCORES THEME”  for a detailed guide demonstrating how to add and create a brand new underscores theme with a bootstrap integration.

Downloading the Navwalker Files

Lets head over to the main Git Repo for WP Bootstrap Navwalker [Link]. Go ahead and download a copy of repository and open the downloaded Zip file.

Open the downloaded Zip and select the file called:

class-wp-bootstrap-navwalker.php

Place this file in your active theme folder, or the theme folder you plan to use. File Path should look like so:

Main website folder (folder) -> wp-content (folder) -> themes (folder) -> theme folder (folder) -> add class-wp-bootstrap-navwalker.php

Integration of WP Navwalker

Now that your file has been added to your theme we can start hooking up the Navwalker to your Menus, First lets head over to the functions.php file located in the theme folder – and add the following code:

/**
 * Register Custom Navigation Walker
 */
function register_navwalker(){
	require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );

If you encounter errors with the above code use a check like this to return clean errors to help diagnose the problem.

if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
    // File does not exist... return an error.
    return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
    // File exists... require it.
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}

If no menu has been previously declared, please declare a new menu in your functions.php file.

register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );

Using WP Navwalker in your menu

Lets take a second to look at what we have completed. First, we added the files needed to use WP Navwalker with our theme, added the code necessary to connect the new WP Navwalker file to our WordPress Theme, and for our last step we will create a Menu (most likely located in the header.php file) that will use WP Navwalker!

To update any Wordpress Menu in your theme with the newly added Navwalker use the new wp_nav_menu argument by adding a ‘walker’ item to the wp_nav_menu args array.

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
    'walker'          => new WP_Bootstrap_Navwalker(),
) );

You menu will now implement the same drop down features found in the Bootstrap by Twitter examples!

Typically additional markup is added to these menus, here is an example of a fixed-top menu that collapse for responsive navigation at the md breakpoint. Additional menu options can also be found in the Bootstrap documentation as well [Link]

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
        <?php
        wp_nav_menu( array(
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker(),
        ) );
        ?>
    </div>
</nav>

To change your menu style add Bootstrap nav class names to the menu_class declaration.

Review options in the Bootstrap docs for more information on nav classes.

You should now have a fully functioning Bootstrap by Twitter Drop down menu integrating into you WordPress theme!

Adding Bootstrap to an UnderScores Theme

In this article, we will be discussing how to add Bootstrap by Twitter to an Underscores.me WordPress Theme! There is much to be desired from this simple combination, and for most it is a great place to start for creating you own custom WordPress Theme. This article will expect that you understand the folder and file structure of a WordPress site, as well as the multiple different hooks and functions found in a WordPress Theme’s function.php file.

Add Underscores Theme Template

First we will need to download our theme template by going to Underscores.me and generating the base theme. Feel free to name your theme during this step as well!

home page of underscores.me

Now that your Underscores Theme is downloaded, head over to the backend of your WordPress website. Once logged in, go to “Appearance” -> “Themes”, click the “Add New” button and then the “Upload Theme” button located around the top of the page. Select the previously downloaded .zip file from Underscores and click “Install Now”. All that should be left is to “Activate” your new blank and almost formate-less theme.

Theme section of a WordPress webstie

Download & Add Bootstrap

Now that we have your Underscores.me theme added and activated, its time to download and add our Bootstrap files! Go to getBootstrap.com click on the “Download” button located at the top right of the page, then download the files under the section titles “Compiled CSS and JS”.

download Bootstrap

open the downloaded .zip file “bootstrap-{version #}-dist.zip”, and rename the extracted folder to “bootstrap”. placed the newly renamed folder inside of your newly added underscores theme folder. This will be located: WordPress (Root Folder) -> wp-content (folder) -> themes (folder) -> {underscores theme name} (folder) – place the “bootstrap” (folder) here.

File Order

Connecting Bootstrap to Underscores Theme

Now that Bootstrap is located inside of your Underscore.me Theme, its time to hook them together. Open your function.php file located in your Underscores.me Theme folder. Add the following code in the to the style enqueuing function located around line:145


// Adding Bootstrap to the Theme - Start

wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap-js' , get_template_directory_uri() . '/bootstrap/js/bootstrap.bundle.min.js', array('jquery') );

// Adding Bootstrap to the Theme - Start

Example of a completed function.php file:

Save the function.php and you are all done! Now all that is left is to enjoy creating a custom WordPress theme!

Disable Comments on Media

Comments can be a great way to interact with your Users and add some personality to your website by including your them in the conversation. However, you may not need the comments section for all features on your site.

In this article we will be focusing on how to remove the comment section from WordPress “Media” content

Where Are We Disabling Comments…?

The specific place we will be removing comments can be found through the following steps:

  1. Log into the backend of you WordPress Website
  2. Go to the “Media Library”
  3. Click on one of the media sources located in the “Media Library”
  4. Open the link titled “View attachment page”

steps 2-3

step 4

How To Disable Comments on Media

Go to the functions.php file located in the Theme folder of your WordPress website.

Add the following code to the bottom the the functions.php file:


function filter_media_comment_status( $open, $post_id ) {
$post = get_post( $post_id );
if( $post->post_type == 'attachment' ) {
return false;
}
return $open;
}
add_filter( 'comments_open', 'filter_media_comment_status', 10 , 2 );

Now sit back and relax knowing no one will be commenting on your Media anymore!

How To Increase Maximum File Upload Size in WordPress

Are you looking to increase the maximum file size you’re able to upload to your WordPress Site? Sometimes the default settings might not be enough to handle the uploads you are looking to make. Whether you’re looking to upload larger images, new plugins, or large theme files, having control over the size limit is an important skill to have. Now let’s dive into how to increase the maximum file upload size in WordPress.

***This is a intermediate skill and REQUIRES some WordPress, File Structure, and FTP Access***

These solutions may also not work with some shared host, however contacting you hosting service provider for support should solve your problem. Also, these are solutions that have been found successful in a number of unique situations, however do note that these solutions do not account for all possible situations.

First Let’s Check Your CURRENT Max File Upload Size

WordPress will automatically show you the current maximum file limit in the “”Media” area of you Admin Dashboard. To find the maximum upload file size go to Admin Dashboard >> Media >> Add New.

1. Editing the Theme Functions File

In some instance all you need to do is copy and paste the following code to your functions.php file. If you want a different size limit, Change ’64M’ to the appropriate amount, example: ‘128M’ . You can get to this file by: Admin Dashboard >> Appearance >> Theme Editor >> Select File “Functions.php”

@ini_set( 'upload_max_size' , '64M' );
@ini_set( 'post_max_size', '64M');
@ini_set( 'max_execution_time', '300' );

Through ini_set(); we can access our PHP configurations and re-write them to suit our needs

2. Creating / Editing a php.ini File

For this next method you will need to have access to your website’s root folder, whether it be through FTP or some other File Managment App

When in your root folder look for a file called “php.ini” this is a configuration file for your site. If you Do NOT see a “php.ini” file please create a blank file called “php.ini”. Once inside this file, whether the file is brand new or old, add the following code to it.

upload_max_filesize = 64M
post_max_size = 64M
max_execution_time = 300

Now that the code is in your file, save and check your site. If you are adding this code to an existing php.ini file search through the file, should be fairly small, and make sure that the code you have copy and pasted into this file is not located any where else. If so delete the code with the incorrect values.

3. Editing the .htaccess File

This last and final method involves editing the .htaccess file that is found in the root folder of your website.

Open the file and copy and paste the following code:

php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300

Again it is important to note that these methods have worked well for a lot of different websites in a lot different situation, however the 3 methods above can not account for all possible development environments. If you are on a shared hosting package I highly suggest contacting your web hosting provider and discuss increasing the limit for you first.

Hope this article has helped you along your way and has improved your site!

What is a Hard Refresh and How to do it

What is a Hard Refresh?

Hard Refresh is a way of clearing out the browser’s (i.e. Chrome, Firefox, Safari, etc.) cache for a specific page. Clearing the cache will force your browser to load the most recent version of the files used for a specific page, this usually include stylesheets or other important scripts. Clearing of a browser’s cache should be completed every time an update is made on a site, this will allow a view to always see the intended files associated with any and all updates.

Clicking the refresh button located near the address bar IS NOT the same as a hard refresh

How to Hard Refresh in Google Chrome Chrome Logo

Make sure you are on the web page you would like too hard refresh.

  • Windows: hold down Ctrl and then press F5 on your keyboard
  • MAC: hold down ⌘ Cmd and ⇧ Shift and then press R on your keyboard

How to Hard Refresh in Firefox Firefox Logo

Make sure you are on the web page you would like too hard refresh.

  • Windows: hold down Ctrl and then press F5 on your keyboard
  • MAC: hold down ⌘ Cmd and ⇧ Shift and then press R on your keyboard

How to Hard Refresh in Safari Safari Logo

Make sure you are on the web page you would like too hard refresh on a MAC computer.

  • Step #1: Go to Safari (Top right corner of screen near Apple logo) → Preferences → Advanced → (Check Box) Show Develop menu in menu bar
  • Step #2: Go to Develop (Top right corner of screen near Apple logo and left of Safari) → Empty Caches

 

Create Your First Google reCaptcha Keys

Why Do I Need a reCAPTCHA?

According to Google:

reCAPTCHA is a free service from Google that helps protect websites from spam and abuse. A “CAPTCHA” is a turing test to tell human and bots apart. It is easy for humans to solve, but hard for “bots” and other malicious software to figure out.

Google

Basically adding a reCAPTCHA will help reduce the amount of SPAM / BOTS trying to submit or add to your site.

However, You are here in order to learn how to CREATE a Google reCAPTCHA. So let’s get started

Log Into Your Google Acct. & Search

search for google recaptcha

  • Make sure you are signed into your, or your company’s, google
  • Search for “google recaptcha admin” at google.com

Google reCAPTCHA Admin

  • Look for the Google reCAPTCHA link in your google search results

The Form

below is a blank version of the form that you will be directed to.

Filling Out The Form

STEP #1 (Label)

  • This section is purely for your reference, I suggest using your Domain name and some descriptor
    • Example: dhali.com – reCAPTCHA

Step #2 (reCAPTCHA type)

  • Select the version of reCAPTCHA you would like to use **Which reCAPTCHA you pick is determined by the service you are using**
    • The example above is specifically for the reCAPTCHA Check Box as seen below.
    • This reCAPTCHA check is what you will want to use if you are using the Gravity Forms Plugin by RocketGenius
  • To get reCAPTCHA check box
    • Select: reCAPTCHA v2
      • Select: “I’m not a robot” Checkbox

Step #3 (Domains)

  • In this section you will be letting Google know which website you want this reCAPTCHA to work on.
  • In the text field simply but your website Domain Name.
  • If you copy your website’s url you might see something like this
    • https://www.dhali.com
  • The part that you want to type into this section is just the Domain, for example:
    • dhali.com
    • NO http// or https//, NO www.
  • If you have additional Domain names you’d like to add simply click the “+” and add another using the same logic.

Step #4 (Owners)

In this section you will see the email address associated with the current Google Account you are using is already present. If you would like to allow another Google Account access to this reCAPTCHA settings page you will add their email here.

Step #5 (Accept the Terms & Email Notifications)

  • Read Terms and Conditions
    • Check the box – Accepting Terms of Service
  • If you would like Google to notify you about suspicious activity on the form where your reCAPTCHA located check the box
    • Send Alerts to Owners
  • Everything should now be filled out!
    • click “Submit”

Copy & Save reCAPTCHA Keys

Above is the Site Key and the Site Secret Key for your new Google reCAPTCHA! Copy these keys and add them to your Plugin or Favorite Developer!

 

Create a Google Maps API Key

Login To Your Google Account

  • Start by searching Google for the “Google Developer’s Console”

  • Should be the very first search result

  • Sign into your current Google account (You have a Google Account if you have a Gmail), or simply create a new account now.

Activate Your Google Account

  • Agree to the Terms and Services and then Click the “Activate” button in the top right of the screen in order to begin creating your API Key

Personal, Business, and Billing Information

  • The next few steps will involve putting in simple personal/business information and billing information needed to activate the account.
  • You will start each account with a Gifted $300 credit, so no worries about getting charged for anything immediately.

API Library

  • Now that you have activated your Account, head over to the “Library” Section located on the navigation menu on the left hang side.

  • In the API Library Search bar, type the words “Geocoding API

  • Select the “Geocoding API”

Enable the API

Repeat Previous Steps Searching For…

  • Go back to the API Library and complete these same steps by searching for “Maps JavaScript API” and then repeating the same steps searching for “Places API

Create The API Key

  • In the same place you found “Library”, now click on “Credentials” on the navigation located on the right side of the page
  • Around the middle top of the page click “+ CREATE CREDENTIALS”
  • Then Click “API Key”

Copy Your New API Key

  • Simply copy the the Key and you are all done.
  • Speak with your IT Professional about the appropriate ways to keep your API key secure.