Blog

Create alternative page templates in Underscores theme

Create a template with no title

I look to create templates with no automatic title so that I can use a good title for SEO and manually insert my own h1 header in the body of the page.

To do this, make a copy of the file template-parts/content-page.php and call it content-no-title.php

In your new file, content-no-title.php, remove the following lines

	<header class="entry-header">
		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
	</header><!-- .entry-header -->

Next, make a file of page.php and call it notitle.php

In your new file, notitle.php, replace the first few lines

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site may use a
 * different template.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package {theme_slug}
 */

with

<?php
/*
 * Template Name: No Title
 * @package {theme_slug}
 */

You will also need to replace

get_template_part( 'template-parts/content', 'page' );

with

get_template_part( 'template-parts/content', 'no-title' );

To create a full width template

Create a new file called fullwidth.php and copy the following code.

<?php
/*
 * Template Name: Full Width
 * @package {theme_slug}
 */

get_header(); ?>
<div class="container">
	<div id="primary" class="content-area">
		<main id="main" class="site-main">

			<?php
			while ( have_posts() ) : the_post();

				get_template_part( 'template-parts/content', 'page' );

				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) :
					comments_template();
				endif;

			endwhile; // End of the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .container -->
<?php
get_footer();

WordPress: Bootstrap 4.1.3 and Font Awesome 5.2 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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' );
	wp_enqueue_style( 'font-awesome', 'https://use.fontawesome.com/releases/v5.2.0/css/all.css' );
	wp_enqueue_style( '{theme_slug}-style', get_stylesheet_uri() );
	wp_enqueue_script( 'bootstrap_js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/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() &amp;&amp; comments_open() &amp;&amp; get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', '{theme_slug}_scripts' );

The latest CDN url for Bootstrap can be found here –
Bootstrap – https://www.bootstrapcdn.com/

The latest CDN url for Font Awsome can be found here –
Font Awesome – https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

Add menu compatibility

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

Extract class-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 get_template_directory() . '/class-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-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-navbar-collapse-1" aria-controls="bs-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
    </button>
	<?php
	wp_nav_menu( array(
		'theme_location'    => 'menu-1',                
		'menu_id'           => 'primary-menu', 
		'depth'             => 2,
		'container'         => 'div',
		'container_class'   => 'collapse navbar-collapse',
		'container_id'      => 'bs-navbar-collapse-1',
		'menu_class'        => 'nav navbar-nav',
		'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
		'walker'            => new WP_Bootstrap_Navwalker(),
	) );
	?>
    </div>
</nav><!-- #site-navigation -->

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.