Blog

WordPress: Bootstrap and Font Awesome Support in Underscores

Many themes now come with support for Bootstrap built in, but what if you want to built a theme up from scratch to your own liking. This tutorial will walk you through the process of adding Bootstrap and Font Awesome to the Underscores base theme (underscores.me).

Add Bootstrap and Font Awesome CSS and JS files to functions.php

Add the highlighted lines to your functions.php

/**
 * Enqueue scripts and styles.
 */
function {theme_slug}_scripts() {
	wp_enqueue_style( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
	wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
	wp_enqueue_style( '{theme_slug}-style', get_stylesheet_uri() );
	wp_enqueue_script( 'bootstrap_js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery') );
	wp_enqueue_script( '{theme_slug}-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
	wp_enqueue_script( '{theme_slug}-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', '{theme_slug}_scripts' );

The latest CDN url for Bootstrap and Font Awsome can be found here –
Bootstrap – https://www.bootstrapcdn.com/
Font Awesome – https://www.bootstrapcdn.com/fontawesome/

Add menu compatibility

Download the WP Bootstrap Navwalker from Github – https://github.com/wp-bootstrap/wp-bootstrap-navwalker

Extract wp-bootstrap-navwalker.php from the downloaded zip file and place it in the root directory of your theme – wp-content/themes/{theme_name}

Add this code to the end of your functions.php

// Register Custom Navigation Walker
require_once('wp-bootstrap-navwalker.php');

and replace this code in header.php

<nav id="site-navigation" class="main-navigation"> 
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', '{theme_slug}' ); ?></button> 
    <?php 
        wp_nav_menu( array( 
            'theme_location' => 'menu-1', 
            'menu_id'        => 'primary-menu', 
        ) ); 
    ?> 
</nav><!-- #site-navigation -->

with this

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">  
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
                <span class="sr-only">Toggle navigation</span> 
                <span class="icon-bar"></span>  
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span>  
            </button> 
        </div> 
        <?php 
            wp_nav_menu( array( 
                'theme_location'    => 'menu-1', 
                'menu_id'           => 'primary-menu', 
                'depth'             => 2, 
                'container'         => 'div', 
                'container_class'   => 'collapse navbar-collapse', 
                'container_id'      => 'navbar-collapse-1', 
                'menu_class'        => 'nav navbar-nav', 
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',  
                'walker'            => new wp_bootstrap_navwalker()) 
            ); 
        ?> 
    </div> 
</nav><!-- #site-navigation -->

Once completed I find that the font size is a bit on the small side. Add this CSS to the end of your style.css to return to the standard font size (can be changed to suit)

body,
button,
input,
select,
optgroup,
textarea,
input[type="button"], 
input[type="reset"], 
input[type="submit"] {
    font-size: 1.6rem;
}

Set up pages to use Bootstrap grid layout

We will set up the grid layout to use an 2/3 to 1/3 split on screen with a full width option on mobile. As Bootstrap uses a 12-grid layout we will allocate 8 “squares” to the Primary content and 4 “squares” to the sidebar whilst allocating 12 “squares” to each on mobile so that they each take up the full width of the screen. The width of each section can be altered by changing the cumber in the class name col-md-*. As long as the total in a row adds up to 12!

We will need to change index.php, page.php, archive.php, single.php. On each file replace

get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main">

with

get_header(); ?>
<div class="container">
	<div class="row">
  		<div class="col-md-8 col-xs-12">
			<div id="primary" class="content-area">
				<main id="main" class="site-main">

then replace

		</main><!-- #main -->
	</div><!-- #primary -->

<?php
get_sidebar();
get_footer();

with

				</main><!-- #main -->
			</div><!-- #primary -->
		</div><!-- .col-md-8 .col-xs-12 -->
<?php
get_sidebar();
get_footer();

In sidebar.php replace

<aside id="secondary" class="widget-area">
	<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->

with

		<div class="col-md-4 col-xs-12">
			<aside id="secondary" class="widget-area">
				<?php dynamic_sidebar( 'sidebar-1' ); ?>
			</aside><!-- #secondary -->
		</div><!-- .col-md-4 .col-xs-12-->
	</div><!-- .row -->
</div><!-- .container -->

Finally, in footer.php replace

	<footer id="colophon" class="site-footer">
		<div class="site-info">
............
		</div><!-- .site-info -->
	</footer><!-- #colophon -->

with

	<footer id="colophon" class="site-footer">
		<div class="container">
			<div class="site-info">
................
			</div><!-- .site-info -->
		</div><!-- .container -->
	</footer><!-- #colophon -->

That’s it! You now have the underscores theme with Bootstrap and Font Awesome fully integrated.

Increase your Facebook Page Likes

Did you know that you can invite users who have liked your page posts but not your page to follow you?

No? Let me show you how.

1 – Find a post on your page and click under the post where Facebook shows you how many people have liked the post.

add likes pic 1

2 – In the windows that appears you will see a list of all the users who have liked your post. There are 3 different buttons that show on the right hand side of the window. These are –

  • Invited – These are users that have previously been invited to like your page. These users cannot be invited again by you.
  • Liked – These users already like and follow your page.
  • Invite – These are the users you are interested in. Click on the Invite button to send them an invitation to like your Page.

add likes pic 2

That’s it! A simple feature to help you to invite Facebook users who are already interested in what you have to say to like your page.

Have something to add to this or any other tips to help increase likes on your Facebook page? Please comment below.

How to – Invite your Facebook friends to Like a Facebook page

Small businesses thrive when customers pass on their recommendations to friends and family. This is how many businesses continue to grow year on year despite spending a minimal amount on advertising. Face to face it is easy to pass on your recommendations but what about on Facebook?

There are two ways to do this:

1. Send an invitation from the page to any of your friends that you think would like to follow the page. This will send the individual users a notification telling them that you would like them to follow the page.

Click on “Invite your friend to like this page” on any Facebook page

fb-invite

then simply click “Invite” next to the names of the friends you would like to invite to follow the page. You can also select “All friends” which will list everyone in your friends list allowing you to invite as few or as many of your friends as you like.

2. Share a link to the page on your timeline. This will create a post on your timeline that will be visible to your friends showing that you like the page.

Click on the “…” in the header and from the drop down menu that appears select “Share”

fb-share

Give it a try now – visit www.facebook.com/prsystems and invite your friends to follow P R Systems.