Adding AOS scrolling animation to WordPress

Add aos.scss to sass/assets folder and import in child-theme.scss

Add aos.js to src/js/

Add path to gulpfile.js

Add AOS.init to custom-javascript.js:

AOS.init({
delay: 150, // values from 0 to 3000, with step 50ms
duration: 1000,
mirror: true
});

Installing BX Slider on WordPress

To install BX Slider on WordPress requires 3 stages:

1. Create the bxslider.js file and add to Gulp Script Compiler

  • Get the js file from the BX Slider GitHub project source
  • Copy and paste to a new file in src/js/bxslider.js
  • Open gulpfile.js
  • add new path to the scripts variable under gulp.task( ‘scripts’ … paths.dev + ‘/js/bxslider.js’

2. Add CSS

  • Get CSS from source. Copy and paste to new file sass/assets/bx-slider.scss
  • Find and replace all instances of images/ with the name of your images folder (ie img)
  • Edit sass/child-theme.scss to include the bx-slider Sass

3. Copy images to Image folder

  • Save bx-loader.gif and controls.png from Project source to your images folder

Edit your custom js to trigger

  • Add the jQuery code:
$("#testimonial-slider").bxSlider({

adaptiveHeight: true,

auto: true,

pause: 8000,

mode: "fade",

pager: false,

controls: false

});

 

Customising WordPress Admin Backend

  1. Add admin.php to inc folder
  2. Add login.css to css folder
  3. Require admin.php in functions.php

1. Add admin.php to inc folder

<?php
/*
This file handles the admin area and functions.
You can use this file to make changes to the
dashboard. Updates to this page are coming soon.
It's turned off by default, but you can call it
via the functions file.

Developed by: Eddie Machado
URL: http://themble.com/pedrev/

Special Thanks for code & inspiration to:
@jackmcconnell - http://www.voltronik.co.uk/
Digging into WP - http://digwp.com/2010/10/customize-wordpress-dashboard/

*/


/************* CUSTOM LOGIN PAGE *****************/

// calling your own login css so you can style it

//Updated to proper 'enqueue' method
//http://codex.wordpress.org/Plugin_API/Action_Reference/login_enqueue_scripts
function custom_login_css() {
wp_enqueue_style( 'custom_login_css', get_stylesheet_directory_uri() . '/css/login.css', false );
}

// changing the logo link from wordpress.org to your site
function custom_login_url() { return home_url(); }

// changing the alt text on the logo to show your site name
function custom_login_title() { return get_option( 'blogname' ); }

// calling it only on the login page
add_action( 'login_enqueue_scripts', 'custom_login_css', 10 );
add_filter( 'login_headerurl', 'custom_login_url' );
add_filter( 'login_headertitle', 'custom_login_title' );


/************* CUSTOMIZE ADMIN *******************/

/*
I don't really recommend editing the admin too much
as things may get funky if WordPress updates. Here
are a few funtions which you can choose to use if
you like.
*/

// Custom Backend Footer
function custom_admin_footer() {
_e( '<span id="footer-thankyou">Developed by <a href="http://samwell.me" target="_blank">Duncan Samwell</a></span>', 'understrap' );
}

// adding it to the admin area
add_filter( 'admin_footer_text', 'custom_admin_footer' );


// Add sidebar (widgets) and Menus editing capabilities to Editor role
$role = get_role('editor'); 
$role->add_cap('edit_theme_options');
?>

2 Create a login.css

/******************************************************************
Site Name:
Author:

Stylesheet: Login Stylesheet

This stylesheet is loaded (if admin.php is setup in your
functions file) on the login page. This way you can style
the login page. It won't affect any other page, admin or front-end.

For more info, check out the codex:
http://codex.wordpress.org/Creating_Admin_Themes

******************************************************************/
/* the form box */
body.login {
background: rgb(113, 0, 33); /* Old browsers */
background: -moz-linear-gradient(
left,
rgba(113, 0, 33, 1) 1%,
rgba(139, 0, 40, 1) 50%,
rgba(113, 0, 33, 1) 100%
); /* FF3.6+ */
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(1%, rgba(113, 0, 33, 1)),
color-stop(50%, rgba(139, 0, 40, 1)),
color-stop(100%, rgba(113, 0, 33, 1))
); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(
left,
rgba(113, 0, 33, 1) 1%,
rgba(139, 0, 40, 1) 50%,
rgba(113, 0, 33, 1) 100%
); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(
left,
rgba(113, 0, 33, 1) 1%,
rgba(139, 0, 40, 1) 50%,
rgba(113, 0, 33, 1) 100%
); /* Opera 11.10+ */
background: -ms-linear-gradient(
left,
rgba(113, 0, 33, 1) 1%,
rgba(139, 0, 40, 1) 50%,
rgba(113, 0, 33, 1) 100%
); /* IE10+ */
background: linear-gradient(
to right,
rgba(113, 0, 33, 1) 1%,
rgba(139, 0, 40, 1) 50%,
rgba(113, 0, 33, 1) 100%
); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#710021', endColorstr='#710021',GradientType=1 ); /* IE6-9 */

/*
This is the WordPress logo in the admin area.
You'll have to load your own images and mess
with the width and height.
*/
/*
You'll have to override some of the default styles
but since we're referencing the id, it should be easy.
*/
/* login button*/
}
body.login h1 a {
background: url(../img/broadland-consultants-logo-trans.png) no-repeat top
center;
/* make sure to replace this! */
width: 310px;
height: 220px;
text-indent: -9999px;
overflow: hidden;
padding-bottom: 0;
display: block;
margin-bottom: 10px;
}
body.login form {
margin-top: 0;
margin-left: 8px;
padding: 26px 24px 46px;
font-weight: normal;
background: #8b0028;
border: 1px solid #8b0028;
color: #8b0028;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.2);
}
body.login form .input {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
sans-serif;
font-weight: 200;
font-size: 24px;
width: 97%;
padding: 3px;
margin-top: 2px;
margin-right: 6px;
margin-bottom: 16px;
border: 1px solid #8b0028;
background: #fbfbfb;
outline: none;
-webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
-moz-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
}

body.login label {
color: #ccc;
}

body.login #nav a,
body.login #backtoblog a {
color: #fff;
}

#login {
padding: 5% 0 0;
}

3 Require admin.php in functions.php

Add the require statement in functions.php

require get_stylesheet_directory() . '/inc/admin.php';

Useful WordPress Functions: Global Options

/*===================================================================================
* Add global options

Courtesy of Raelene Morey
https://gist.github.com/raewrites/bb060a35594d546464d2

Use get_option() function to display info ie: echo get_option(company_phone)
* =================================================================================*/

/**
 *
 * The page content surrounding the settings fields. Usually you use this to instruct non-techy people what to do.
 *
 */
function theme_settings_page(){ 
	?>
	<div class="wrap">
		<h1>Contact Info</h1>
		<p>This information is used around the website, so changing these here will update them across the website.</p>
		<form method="post" action="options.php">
			<?php
			settings_fields("section");
			do_settings_sections("theme-options");
			submit_button();
			?>
		</form>
	</div>
	
	<?php }

/**
 *
 * Next comes the settings fields to display. Use anything from inputs and textareas, to checkboxes multi-selects.
 *
 */

 // Business Name
function display_company_name_element(){ ?>
	
	<input type="text" name="company_name" placeholder="Official Company Name" value="<?php echo get_option('company_name'); ?>" size="35">

<?php }

 // Business Tagline
function display_company_tagline_element(){ ?>
	
	<input type="text" name="company_tagline" placeholder="Company Tagline" value="<?php echo get_option('company_tagline'); ?>" size="135">

<?php }

// Address
function display_company_address_element(){ ?>
	
	<input type="text" name="company_address" placeholder="Enter company address" value="<?php echo get_option('company_address'); ?>" size="135">

<?php }


// Phone
function display_company_phone_element(){ ?>
	
	<input type="tel" name="company_phone" placeholder="Enter phone number" value="<?php echo get_option('company_phone'); ?>" size="35">

<?php }

// Fax
function display_company_fax_element(){ ?>
	
	<input type="tel" name="company_fax" placeholder="Enter fax number" value="<?php echo get_option('company_fax'); ?>" size="35">

<?php }

// Email
function display_company_email_element(){ ?>
	
	<input type="email" name="company_email" placeholder="Enter email address" value="<?php echo get_option('company_email'); ?>" size="35">
	
<?php }

// Elevate Platform URL
function display_company_login_element(){ ?>
	
	<input type="url" name="company_login" placeholder="Paste Elevate Pltform login URL address" value="<?php echo get_option('company_login'); ?>" size="35">
	
<?php }

// Facebook
function display_company_facebook_element(){ ?>
	
	<input type="url" name="company_facebook" placeholder="Paste Facebook URL address" value="<?php echo get_option('company_facebook'); ?>" size="35">
	
<?php }

// twitter
function display_company_twitter_element(){ ?>
	
	<input type="url" name="company_twitter" placeholder="Paste twitter URL address" value="<?php echo get_option('company_twitter'); ?>" size="35">
	
<?php }

// LinkedIn
function display_company_linkedin_element(){ ?>
	
	<input type="url" name="company_linkedin" placeholder="Paste LinkedIn URL address" value="<?php echo get_option('company_linkedin'); ?>" size="35">
	
<?php }

// Google+
function display_company_google_element(){ ?>
	
	<input type="url" name="company_google" placeholder="Paste Google+ URL address" value="<?php echo get_option('company_google'); ?>" size="35">
	
<?php }

/**
 *
 * Here you tell WP what to enqueue into the <form> area. You need:
 *
 * 1. add_settings_section
 * 2. add_settings_field
 * 3. register_setting
 *
 */

function display_custom_info_fields(){
	
	add_settings_section("section", "Company Information", null, "theme-options");
    add_settings_field("company_name", "Official Company Name.", "display_company_name_element", "theme-options", "section");
	add_settings_field("company_tagline", "Official Company Tagline.", "display_company_tagline_element", "theme-options", "section");
	add_settings_field("company_address", "Company Address", "display_company_address_element", "theme-options", "section");
	add_settings_field("company_phone", "Company Phone No.", "display_company_phone_element", "theme-options", "section");
	add_settings_field("company_fax", "Company Fax No.", "display_company_fax_element", "theme-options", "section");
    add_settings_field("company_email", "Company Email address", "display_company_email_element", "theme-options", "section");
    add_settings_field("company_login", "Company Elevate Platfom login URL", "display_company_login_element", "theme-options", "section");
	add_settings_field("company_facebook", "Company Facebook URL", "display_company_facebook_element", "theme-options", "section");
    add_settings_field("company_twitter", "Company Twitter URL", "display_company_twitter_element", "theme-options", "section");
    add_settings_field("company_linkedin", "Company LinkedIn URL", "display_company_linkedin_element", "theme-options", "section");
    add_settings_field("company_google", "Company Google+ URL", "display_company_google_element", "theme-options", "section");

    register_setting("section", "company_name");
    register_setting("section", "company_tagline");
	register_setting("section", "company_address");
	register_setting("section", "company_phone");
	register_setting("section", "company_fax");
	register_setting("section", "company_email");
	register_setting("section", "company_login");
    register_setting("section", "company_facebook");
    register_setting("section", "company_twitter");
    register_setting("section", "company_linkedin");
    register_setting("section", "company_google");
	
}

add_action("admin_init", "display_custom_info_fields");

/**
 *
 * Tie it all together by adding the settings page to wherever you like. For this example it will appear
 * in Settings > Contact Info
 *
 */

function add_custom_info_menu_item(){
	
	add_menu_page("Contact Info", "Contact Info", "edit_pages", "contact-info", "theme_settings_page", null, 99);
	
}

add_action("admin_menu", "add_custom_info_menu_item");


// Add editor capability to save options for this particular menu item
add_filter( 'option_page_capability_section', 'bc_settings_permissions', 10, 1 );
function bc_settings_permissions( $capability ) {
    return 'edit_pages';
}


// Function to show the social media settings

function social_media_footerlinks($platform) {
    if ( get_option('company_' . $platform)) {
        echo "<div class='" . $platform . "'><a href='" . get_option('company_' . $platform) . "' target='_blank'><span class='fa fa-" . $platform . "'></span></a></div>";
    }
}

Setting Up Custom Post Types + MetaBoxes for Understraps

To set up Custom Post Types & Metaboxes for the Understrap Child template you need to do four things.

  1. Copy your cmb2 folder into vendors
  2. Add custom-metaboxes.php to inc folder in child directory
  3. Add custom-post-type.php to inc folder in child directory
  4. require new scripts in functions.php

1. Create the CMB2 folder

Go to the GitHub project for CMB2 and download the project.

Copy the following folders and files to the vendor folder in your child theme (you will need to create this if it doesn’t exist).

/css

/images

/includes

/js

/languages

bootstrap.php

index.php

init.php

2. Create custom-metaboxes.php

Copy the contents of example-functions.php and copy them into a new file: inc/custom-metaboxes.php

Edit lines 16 – 19 to redefine the path to include the vendors folder

if ( file_exists( dirname( __FILE__ ) . '/../vendors/cmb2/init.php' ) ) {
require_once dirname( __FILE__ ) . '/../vendors/cmb2/init.php';
} elseif ( file_exists( dirname( __FILE__ ) . '/../vendors/CMB2/init.php' ) ) {
require_once dirname( __FILE__ ) . '/../vendors/CMB2/init.php';

Copy and replace all instances of your_prefix with the project prefix.

3. Create the custom-post-type.php

The file needs to have the following functions and actions: A function and action to flush rewrite rules for custom post types, A function and action to register CPTs (using register_post_type() function), A function and action to define the metaboxes for each custom post type.

Use the example below as a starting point (don’t forget to find and replaceyour_prefix with the project prefix) :

<?php
/* Custom Post Type Example – stolen from bonestheme
This page walks you through creating
a custom post type and taxonomies. You
can edit this one or copy the following code
to create another one.

Developed by: Eddie Machado
URL: http://themble.com/bones/

Remember to replace ‘your_prefix_’ with theme name.

*/

// Flush rewrite rules for custom post types
add_action( ‘after_switch_theme’, ‘your_prefix_flush_rewrite_rules’ );

// Flush your rewrite rules
function your_prefix_flush_rewrite_rules() {
flush_rewrite_rules();
}

/*
Register my Custom Post Types
*/

function cpt_register() {
// SERVICES CUSTOM POST TYPE
// creating (registering) the custom type
register_post_type( ‘services’, /* (http://codex.wordpress.org/Function_Reference/register_post_type) */
array( ‘labels’ => array(
‘name’ => __( ‘Services’, ‘bc’ ), /* This is the Title of the Group */
‘singular_name’ => __( ‘Service’, ‘bc’ ), /* This is the individual type */
‘all_items’ => __( ‘All Services’, ‘bc’ ), /* the all items menu item */
‘add_new’ => __( ‘Add New’, ‘bc’ ), /* The add new menu item */
‘add_new_item’ => __( ‘Add New Service’, ‘bc’ ), /* Add New Display Title */
‘edit’ => __( ‘Edit’, ‘bc’ ), /* Edit Dialog */
‘edit_item’ => __( ‘Edit Service’, ‘bc’ ), /* Edit Display Title */
‘new_item’ => __( ‘New Service’, ‘bc’ ), /* New Display Title */
‘view_item’ => __( ‘View Service’, ‘bc’ ), /* View Display Title */
‘search_items’ => __( ‘Search Service’, ‘bc’ ), /* Search Custom Type Title */
‘not_found’ => __( ‘Nothing found in the Database.’, ‘bc’ ), /* This displays if there are no entries yet */
‘not_found_in_trash’ => __( ‘Nothing found in Trash’, ‘bc’ ), /* This displays if there is nothing in the trash */
‘parent_item_colon’ => ”
), /* end of arrays */
‘description’ => __( ‘Financial Services Offered’, ‘bc’ ), /* Custom Type Description */
‘public’ => true,
‘publicly_queryable’ => true,
‘exclude_from_search’ => false,
‘show_ui’ => true,
‘query_var’ => true,
‘menu_position’ => 15, /* this is what order you want it to appear in on the left hand side menu */
‘menu_icon’ => ‘dashicons-format-aside’, /* the icon for the custom post type menu */
‘rewrite’ => array( ‘slug’ => ‘services’, ‘with_front’ => false ), /* you can specify its url slug */
‘has_archive’ => ‘financial-services’, /* you can rename the slug here */
‘capability_type’ => ‘post’,
‘hierarchical’ => false,
/* the next one is important, it tells what’s enabled in the post editor */
‘supports’ => array( ‘title’, ‘editor’, ‘page-attributes’, ‘thumbnail’, ‘excerpt’, ‘author’,’revisions’)
) /* end of options */
); /* end of register post type */
}

// adding the function to the WordPress init
add_action( ‘init’, ‘cpt_register’);

/***********************************************
* Meta Boxes for SERVICES CPT
************************************************/

add_action( ‘cmb2_admin_init’, ‘your_prefix_register_services_metabox’ );
// Hook in and add a metabox. Can only happen on the ‘cmb2_admin_init’ or ‘cmb2_init’ hook.
// cmb2_admin_init is defined in bootstrap.php

function your_prefix_register_services_metabox() {
$prefix = ‘your_prefix_services_’;

$cmb_services = new_cmb2_box( array(
‘id’ => $prefix . ‘metabox’,
‘title’ => esc_html__( ‘Service Options’, ‘cmb2’ ),
‘object_types’ => array( ‘services’, ), // Post type
) );

$cmb_services->add_field( array(
‘name’ => esc_html__( ‘Icon’, ‘cmb2’ ),
‘desc’ => esc_html__( ‘Icon to be displayed on Services menu’, ‘cmb2’ ),
‘id’ => $prefix . ‘icon’,
‘type’ => ‘file’
) );

}

?>

 

4. Add require commands in functions.php

Open the child theme’s functions.php file and paste the following:

// Add Custom Meta Box
/**
* Load Custom Metabox infomation
*/
require get_stylesheet_directory() . ‘/inc/custom-metaboxes.php’;

/**
* Load Custom Post Type
*/
require get_stylesheet_directory() . ‘/inc/custom-post-type.php’;