• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Red Kite Creative logo

Red Kite Creative

  • Web Design
    • Custom WordPress Website Development
    • Responsive Design
    • Completely Custom Web Design
    • Ecommerce Website Design
  • Site Management
    • WordPress Maintenance and Support
    • WordPress Performance Optimization
    • WordPress Training and Consulting
  • Portfolio
    • All Projects
    • WordPress
    • Ecommerce
  • About
    • About Red Kite
    • What We Do
    • Working With Us
    • Testimonials
  • Blog
    • The “Minding Your Business” Blog
  • Contact

Training

Making a Custom Slideout Menu for Genesis

May 4, 2019 by Debbie Campbell

Slideout menu screenshotI’ve been designing and building custom WordPress themes from scratch since 2009. Back on January 1 I switched to custom theming using the Genesis framework – not a huge transition but still something of a learning curve!

A few months ago I needed to create a sliding toggle menu for mobile browsers for a client’s site (see the final version to the right). I’d done this for other frameworks numerous times and had the code snippets for it. But getting it working in Genesis took some extra steps. Here we go…

I’m assuming here you’re already familiar with the Genesis framework, know how to properly enqueue scripts in WordPress, and know how to add elements to functions.php. I’m using a custom theme based on the Genesis Sample Theme.

Here’s a CodePen showing a simple version of the slideout menu:

See the Pen Slideout Menu based on Slideout.js by Debbie Campbell (@kanjigirl) on CodePen.0

1. Let’s start by registering a new custom menu for the slideout for mobile devices.

// Register new side menu
function register_side_menu() {
   register_nav_menu( 'side-menu',__( 'Side Navigation Menu' ));
}
add_action( 'init', 'register_side_menu' );

2. Then let’s build the function for adding this new menu to the site.

The #menu will go just after the opening body tag. Below that, everything else needs to be enclosed in the #panel div.

// Custom Slideout mobile menu
function custom_side_menu() { ?>
    <div id="menu">
        <div class="wrap">
            <!-- Side Menu Header -->
            <div class="menu-header">
                <span class="close-icon">Close</span>
            </div>
            <!-- Nav menu -->
            <div class="nav-menu">
            	<?php wp_nav_menu( array( 'theme_location' => 'side-menu' ) ); ?>
            </div>
        </div>
    </div>

    <div id="panel">
<?php
}
add_action( 'genesis_before', 'custom_side_menu' );

Using the ‘genesis_before’ hook drops this code into the page right after the opening body tag. We use media queries to hide the desktop menu on mobile and vice versa.

Notice we open #panel at the end of this function to enclose everything else below this point. So, we also need to add a closing tag for that div:

function close_panel() { ?>
    </div><!-- close Panel -->
<?php
}
add_action( 'genesis_after', 'close_panel' );

Using ‘genesis_after’ drops this code in just before the closing body tag.

3. Get the Slideout script and enqueue it in WordPress.

You’ll find it here: https://slideout.js.org/.

4. Add this code snippet to the Footer Scripts section on the Genesis Theme Settings page.

<script type="text/javascript">
jQuery(document).ready(function() {
  var slideout = new Slideout({ 
    'panel': document.getElementById('panel'),
    'menu': document.getElementById('menu'),
    'padding': 256,
    'tolerance': 70
  });
});
</script>

5. Your slideout  menu will need some CSS styling.

The CSS from the Slideout site is a good starting point.

body {
  width: 100%;
  height: 100%;
}

.slideout-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 256px;
  min-height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 0;
  display: none;
}

.slideout-menu-left {
  left: 0;
}

.slideout-menu-right {
  right: 0;
}

.slideout-panel {
  position: relative;
  z-index: 1;
  will-change: transform;
  background-color: #FFF; /* A background-color is required */
  min-height: 100vh;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}

.slideout-open .slideout-menu {
  display: block;
}

And now you should have a functional mobile Genesis slideout menu. Don’t forget to add media queries to control the display of this menu vs. the regular desktop one. 

Please let me know when you use this tutorial and if you have any problems, post in the comments.

Filed Under: Tutorials, Responsive Web Design Tagged With: genesis, slideout menu, mobile menus, mobile design

Moving From HTTP to HTTPS: Part 2 of 2

May 2, 2017 by Debbie Campbell

This is Part 2 of my initial article on Moving From HTTP to HTTPS from April…

To pick up where we left off… the last thing we did was add the 301 redirects from the old HTTP URLs to the new ones using HTTPS.

Let’s continue…

6) If your robots.txt file has any hard-coded HTTP links, change them to HTTPS.

You may or may not have a robots.txt file in the root directory of your site; it’s a file that lets you indicate what parts of your site you don’t want crawled by search engine bots.

7) If your site uses a CDN (content delivery network), make sure the URLs get updated there, too.

If you’re using a managed host like WP Engine this is as simple as clearing the caches. For other hosts or for CDN services like CloudFlare, if you’re not sure, ask the host or CDN manager.

8) Enable HTTP/2 support on your CDN.

This is a BIG benefit of moving to HTTPS!  If your host or CDN provides it, sites delivered over HTTP/2 can be 50-70% faster than the old HTTP standard. This only works with HTTPS.

9) Update the URL for the site at Google Analytics.

Go to Admin, select your Property. Change the prefix under Default URL from HTTP to HTTPS – that was easy!

10) Add the www and non-www HTTPS versions of your site to Google Search Console.

In GSC, you’ll want to create two new properties  and claim them – https://yourdomain.com and https://www.yourdomain.com.

11) Generate a new sitemap and add it to Google Search Console.

In GSC go to Crawl > Site Maps and add the link to your new site map.

12) Fetch and index the new pages in Google Search Console.

To speed up the inclusion of your new HTTPS URLs by Google Search, go to Crawl > Fetch as Google. Enter the home page and click Fetch, then click Request Indexing. Choose ‘Crawl this URL and its direct links’ to get your entire site indexed.

13) If you’ve ever submitted a Disavow file in Google Search Console, redo it.

If you’ve ever tried to recover from negative SEO you probably at some point created a disavow file. You’ll need to go to the Google Disavow Tool under your original HTTP Google Search Console profile and download it. Then,go to your new HTTPS profile and upload it, waiting for the confirmation message.

14) The last step is changing links that point to your site.

This includes your social media profiles, 3rd party ad networks, email marketing software URLs, email signatures, other external links to your site, business cards, and other print marketing materials. Basically, anywhere that links to your website and has the HTTP in the URL will eventually need to be changed.


Yes, it is a big messy process, but it’s worth it to have the additional security and credibility as well as not being called out by Google and other browsers for being a risk to your site visitors. If you have questions about this process or need help, please ask.

Filed Under: Resources, Security, Tutorials Tagged With: security, https, ssl

Adding Simple User Reviews to Your WordPress Website

March 30, 2015 by Debbie Campbell

Need to add some very simple reviews to your website – like reviews for a service or product, or even testimonials – but are not using a shopping cart that will make it easy for you? You can create a form for visitors to add reviews or testimonials and display them throughout your site – no coding required!

This tutorial uses no coding – just the popular Gravity Forms plugin (a commercial one, but the best forms plugin you can buy IMO) and a custom post type plugin.

I’ll walk you through the process step by step, showing you how to create a custom post type, create and add your reviews form, then display the new reviews in a widget on your site.

This article was originally published in Tuts+ so head over there to read the rest.

Filed Under: WordPress Info, Tutorials Tagged With: gravity forms, reviews, tutorial, wordpress

Just Finished a WooCommerce Course…

March 22, 2015 by Debbie Campbell

I have a lot of clients using WooCommerce, a very popular ecommerce plugin for WordPress. I’ve learned a lot about WooCommerce (especially the backend!) by working on clients’ websites, but I knew a bit less about all the details of setup and daily usage than I liked. So I found a WooCommerce class on lynda.com…

If you have a WooCommerce store and are not yet what you would consider to be an ‘expert’ at using it, this is very good course. I found that I was pleasantly up to date on most of the topics, but I did learn some very useful things that will help me when working with clients using this cart in the future.

Here’s an overview of the main topics:

  1. Introduction (what you need to know before taking the course)
  2. Getting started (about WooCommerce)
  3. Setting Up Shop with WooCommerce (installation and settings)
  4. Setting Up Payment Gateways (payment options and using Paypal or Stripe)
  5. Setting Up Shipping Options (shipping methods)
  6. Adding Products (new products, variations, digital products and reviews)
  7. Customizing Your Store (front page, sidebar and category layout)
  8. Managing Sales (managing orders, reports and coupons)
  9. Conclusion (where to go next)

Taking a class like this is a great way to feel much more in control of your cart and ecommerce website.

Need more convincing? Use this link and you’ll get 10 free days of access to lynda.com.

Need help with your WooCommerce site?

Looking for a custom website to complement your online store? Or help with customizing WooCommerce? I’m here to assist! Get in touch today.

Filed Under: Ecommerce, Training Tagged With: class, course, woocommerce

A Simple, Current and FREE WordPress Guide

January 1, 2014 by Debbie Campbell

Easy WP Guide is a downloadable PDF or Word file that covers how to do practically anything in the WordPress admin side. Its best feature? It’s updated almost as often as WordPress is.

If you’re using an older book, or maybe have no WordPress documentation at all, I’d recommend downloading a free copy of Easy WP Guide. The latest version covers WordPress 3.8 which launched just a few weeks ago.

Filed Under: Tutorials, WordPress Info Tagged With: documentation, manual, wordpress guide

Quick Custom Google Map for Business Service Area

October 16, 2012 by Debbie Campbell

(Updated Oct. 14, 2013 – In order to import a KML, you’ll need to click on My Places, then instead of the red Create Map button, click the link underneath (“Or create with classic My Maps”). On the next screen you can import a KML; it’s Maps Engine Lite that won’t let you import KMLs at this time.)

——————-

Ever tried to use Google Maps to create something more than the typical road or location map? Frustrating, wasn’t it?

Map 1I needed to make a service area map for a client and started by doing a search for ‘google county map boundaries,’ since I knew that county lines were not part of Google maps by default. I found a map of US County Boundaries in Google’s Fusion Tables data. I only needed three counties, so I zoomed in, then used the Filter to select the County Name of each of those three counties. That produced a map like the one to the right.

However, I couldn’t edit this one. I needed the counties to be semi-transparent.

I went to Google Maps and created a new map, zoomed in on the area I needed. Then I clicked Import (it’s just above the title) to see if that would help, and it did: it told me I could import files with a format of KML.

I went back to my custom map and clicked File > Download, where I could choose the KML format. I downloaded this to my computer, then back in the new map clicked Import again to pull in the new file.

Map 2

Voila! That pulled in my county boundaries perfectly. Then, all I needed to do was click on each county and I could change the color and transparency of the overlay and lines.

Here’s my final edited map to the right. It took about 10 minutes to create, once I found the county line data. You can search for all types of map data to use in your own custom maps at Google Fusion.

Filed Under: Tutorials Tagged With: county map, custom map, google map, tutorial

  • Go to page 1
  • Go to page 2
  • Go to Next Page »

Primary Sidebar

Categories

  • +News
    • Launches
  • Ecommerce
  • +WordPress Info
    • Plugins
    • Website Performance
  • +Getting Help
    • Hiring a Web Professional
    • Consulting
  • Hosting
  • +Productivity
    • Client Relationships
    • CRM
  • +Resources
    • Analytics
  • +Security
    • Privacy
  • +Self-Promotion and Marketing
    • Blogging
    • Business Credibility
    • Measuring Website Success
    • Branding
    • Newsletters and Email Campaigns
    • Video Marketing
    • SEO
    • Podcasting
    • Social Media
    • Website Content
    • Establishing Trust
  • Scams
  • -Training
    • Tutorials
  • +Web Design
    • Website Usability
    • Graphic Design
    • Website Forms
    • CMS
    • Ecommerce
    • Responsive Web Design
    • UX
    • Information Architecture
    • Web Typography
    • Conversion Rates
© Copyright 2022 Red Kite Creative LLC · All Rights Reserved · Client Support · Privacy
Mmm, cookies! This website uses cookies to give you the best user experience. Manage cookies >View cookie policy >Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website.

We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.

Learn more about our privacy policy.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT