It goes without saying that there’s already hundreds of awesome Bootstrap powered websites out there and many of them are WordPress sites. One of the things that is often lacking is the ability to actually create the proper Bootstrap menu – with dropdowns, icons, dividers & headers.

Making a Bootstrap WordPress responsive menu is a problem because it actually requires a custom navwalker class. The navwalker class is something that some WordPress theme developers don’t have much experience with.

I’ll be preparing a complete post about starting a Bootstrap WP theme from scratch so I won’t go into much detail about doing that here. Instead I’ll get right to building a responsive Bootstrap menu in WordPress.

Add a WordPress Menu

The first thing you need to do is to add a WordPress menu. If you’ve already done this, or are using one of your theme’s existing menus then skip to the next section.

Find your theme’s setup function and add the register_nav_menus(); function with your new menu. If you can’t find a setup function in your theme that’s ok, just create one that’s the same as the following.

function mytheme_setup() {

register_nav_menus(
array(
'footer-nav' => __( 'Header Menu', 'bootpress' ),
'top_menu' => __( 'Top Menu', 'bootpress' )
)
);

}
add_action( 'after_setup_theme', 'mytheme_setup' );

This code registers 2 theme menu spots, the footer-nav and the top_menu. You can add as many custom menus here as you want. We will be using the top_menu to create out Bootstrap WordPress responsive menu.

Adding the Bootstrap Icons & Dropdowns to a WordPress Menu

WordPress default menu markup doesn’t work to create Bootstrap Navbars. You have to edit it. For a basic Bootstrap menu in WordPress all you need to do is add some classes to the items in the menu and you’re done.

There’s limitations on what you can put in the menu when you make the adjustments like that. To have a true Bootstrap menu you need to have a complete custom walker.

WordPress Menu Walker Classes

What a custom walker class does is changes how the whole menu gets handled and created. It allows you complete control over how the menu behaves. To create a custom walker you have to extend the existing walker class, going beyond standard WordPress theme level of programming. Bringing in true object orientated programming logic into the mix.

Bootstrap Responsive WordPress Menu Walker Class

I don’t have to go into detail about how to create the Bootstrap specific walker class because Twittem created one that works great and uploaded it to Github. Just download it and include it in your theme.

Download Bootstrap Navwalker

Including it in your theme is easy, just copy the wp-bootstrap-navwalker.php file into your theme then add the following line to your functions.php file.

// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');

Adding the Bootstrap Responsive Menu to your WordPress Theme

Now we’ve got a custom menu and we can run it through the Bootstrap navwalker it’s time to add it to your theme. I will be adding my menu to the header of my theme so I’ll be opening header.php. If you want to have it in a different place then just paste this code in wherever you want it to appear.

<?php
wp_nav_menu( array(
'menu' => 'top_menu',
'depth' => 2,
'container' => false,
'menu_class' => 'nav',
'fallback_cb' => 'wp_page_menu',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>

You can replace the nav with nav-pills or nav-tabs if you want and it will display accordingly.

Because I want to make this a navbar and make it responsive I need to wrap it in some more Bootstrap Markup. The code above is can be placed within the default Bootstrap responsive navbar markup. The block of code below is the responsive navbar code from the Bootstrap Docs.

<div class="navbar navbar-fixed">
<div class="navbar-inner">
<div class="container-fluid">

<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>

<!-- Be sure to leave the brand out there if you want it shown -->
<span class="brand navigation-label hidden-desktop">Navigation</span>

<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<?php
wp_nav_menu( array(
'menu' => 'top_menu',
'depth' => 2,
'container' => false,
'menu_class' => 'nav',
'fallback_cb' => 'wp_page_menu',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>

</div>
</div>
</div>

Final Product

The final product, once you’ve added some items and set the icons looks something like this.

If you have any problems getting this set-up or working I would be happy to take a look, just leave a comment below or use the WordPress Q&A form to ask me for help.

PattonWebz

Build a Bootstrap WordPress Responsive Menu

The book walks you through creating 3 unique designs using 3 different responsive HTML5 & CSS3 ready front-end frameworks.

1. Skeleton – a super slim css boilerplate with a responsive grid system and defaults for typography, forms and css buttons.
2. Bootstrap – my favorite front-end framework. Bootstrap looks awesome and has a ton of cool JavaScript built in that makes it do amazing things but it is pretty big so you will want to strip out anything you aren’t using.
3. Zurb Foundation – a framework I’d previously never heard of.

Each of the 3 projects in the book goes into detail about all of the code used, how media queries affect what you see and why it’s done that way. Very little previous knowledge is presumed and there’s plenty of reference material linked throughout if you do want to dig a bit deeper.

The only thing you need to know before you read this book is some basic HTML and CSS – as such it’s recommended for the beginner through to the intermediate web developer. Advanced web developers will still get something from this book though as the reference material is great for advanced devs and Thoriq goes into detail of setting up & using CSS Preprocessors, like Saa and less.

If you’re interested in the difference between Sass and Less then I encourage you to check out Thoriq’s blog post comparing the 2 CSS preprocessors.

Disclosure: I was contacted by the publisher and asked for my opinions. I was more than happy to oblige because I actually wind up reading Thoriq’s blog posts when I’m trying to figure something out for myself, so I knew the book would be good and I’m actually pretty chuffed to have been asked.

PattonWebz

Responsive Web Design By Example – Review

Download the Plugin filesPlugin files on Github

Just upload the folder from those downloads to your plugins folder and it will show up in on plugins page.

But for those of you who want to know how to do it yourself here’s the rundown of what that plugin includes.

Making an Empty WordPress Plugin

The plugin files above don’t actually do anything in terms of functionality. It will show up in the plugins menu and allow you to activate/de-activate it but that’s about it. It’s just a completely empty plugin for you to turn into the next must-have, super-awesome WordPress Plugin .

To make a plugin that shows up in WordPress’ Plugin menu all you need is some header markup in one of the files to tell WordPress what the name of the plugin is.

The name of the plugin is the minimum requirement, there’s also some additional information you could (and should) include.

<?php
/*
Plugin Name: Plugin Starter
Plugin URI: http://www.pattonwebz.com/wordpress-custom/make-wordpress-plugin-in-2-minutes/
Description: This is a completely empty plugin. It doesn't do anything! Well it shows up in the plugins menu and you can activate it and deactivate it till your heart's content but it won't affect anything... anywhere.
Version: 1.0
Author: William Patton
Author URI: http://www.pattonwebz.com/
License: GPL2
*/
?>

Copy and paste that into a php file, place that file in a it’s own folder and upload it to the plugins folder in wp-content. That’s all you need to do and you now have a WordPress plugin. Told you it was easy didn’t I?

Things You Can Do With The Plugin

The amount of things you could do with this is basically unlimited. I’ve listed a couple of the things you could do with it below.

1. One of the best things you could do if you make customizations to your site is to do it via your own custom functionality plugin.
2. Make a simple Google+ Mark-up plugin for single author sites (which I will be updating to add rel=publisher markup too!).
3. Use a plugin to enqueue jQuery properly in your theme.

Those are just some of the things you could do with an empty plugin. Use your imagination and see what you can come up with. Of if you’ve got an idea, but don’t have the programming skills, then contact me or use the comments form and tell me about it. I’ll see if I can build something which you’ll use .

PattonWebz

Make a WordPress Plugin in 2 Minutes Flat

If you want to get right into some demo files I don’t blame you, that’s how I learn best too. The custom loop I’ve got in this post is from the WordPress default theme, Twenty Twelve. Take a look at the code contained within that theme to see how this works in practice. There’s also some content-{post format}.php files defined for you to get inspiration on what information could get highlighted with each post type.

What is get_template_part()?

The get_template_part() function does exactly what you imagine. It includes part of a template within another template. For instance within index.php you could place the following code, borrowed directly from the TwentyTwelve theme.

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, get_post_format() ); ?>
<?php endwhile; ?>

The above code actually pulls selectively chosen content for different post formats so we can easily display only what we want for each post format and focus on what’s important to that content type.

It pulls selective content because it makes use of the get_post_format() function to figure out what type of post is being processed by the loop. Combining that with get_template_part() makes for a very powerful default loop.

What the Code Does

Normally within the loop we have code that pulls out a post and it’s metadata to display it in a page. In this version of the loop all of that code is moved into another file, one called content.php. But that’s just the default page, WordPress has some post formats that you can selectively show or remove what you want.

The post formats available to you are listed on WordPress.org as:

• aside - Typically styled without a title. Similar to a Facebook note update.
• gallery - A gallery of images. Post will likely contain a gallery shortcode and will have image attachments.
• link - A link to another site. Themes may wish to use the first <a href=””> tag in the post content as the external link for that post. An alternative approach could be if the post consists only of a URL, then that will be the URL and the title (post_title) will be the name attached to the anchor for it.
• image - A single image. The first <img /> tag in the post could be considered the image. Alternatively, if the post consists only of a URL, that will be the image URL and the title of the post (post_title) will be the title attribute for the image.
• quote - A quotation. Probably will contain a blockquote holding the quote content. Alternatively, the quote may be just the content, with the source/author being the title.
• status - A short status update, similar to a Twitter status update.
• video - A single video. The first <video /> tag or object/embed in the post content could be considered the video. Alternatively, if the post consists only of a URL, that will be the video URL. May also contain the video as an attachment to the post, if video support is enabled on the blog (like via a plugin).
• audio - An audio file. Could be used for Podcasting.
• chat - A chat transcript.

Custom loops depending on post format

Lets take a couple from that list and explain what the above loop actually does. I’ll use status and video posts as examples of how this works.

As the loop is going through your posts let’s say it comes across a post with the post format of ‘status‘. It’s probably a short piece of text and requires no title. So we could make a file called content-status.php and build our loop differently within it to display the content but not the title (and possibly in it’s own little box to make it stand out from the other posts). Sort of the kind of status you would find on social networks.

The next post it comes across is marked as a ‘video‘ post so WordPress will look for content-video.php and use the loop contained within that to build that post. It probably has a post title and some text to describe the video but you’ll want the focus to be on the video rather than the text. So you build the code around how you want to display the video, rather than having to style it directly in the post editor.

Lets say that the next post has the post format ‘audio‘. WordPress will look for the file content-audio.php but we haven’t actually created a custom file for that post format so content-audio.php doesn’t actually exist. What happens then? Well WordPress will fallback to the content.php file which we will have created (because we always build a fallback ).

In Conclusion

The get_template_part() function combined with get_post_format() makes for a pretty robust way to display different content types in a way that focuses on what’s important to that content. I’ll be making use of this code within my Theme-Dev framework because it makes for very simple, plugable  child themes and that’s sort of what you want with a framework

Next time we look at get_template_part() it will be within the framework. You’ll get to see some practical examples and the demo files that go along with them. The current progress of the Theme-Dev framework can be followed on GitHub.

PattonWebz

WordPress Theme Development From Scratch – get_template_part()

For those who are serious in improving the presence of their websites on the Internet, it is possible to see these sites enjoy the premier pages of search engines. But, why do website owners want top search engine ranking? For one thing, being at very first position in the top search engine page is important for any company that is doing business on the Internet.

If an online company or business wants to establish a brand name and make it popular to more people on the Internet, this can be done simply by rendering it to become more visible. Establishing greater visibility and attracting more attention on the Internet can be made possible via effective SEO and link building services.

However, not all SEO service providers are created equal. Some firms have been doing it for years and are able to render effective link building and optimization techniques to their clients. On the other hand, there are search engine optimization providers that are mediocre and can even damage one’s website instead of making it better in terms of search engine ranking. This is why it is important for a website owner to hire a SEO company that possesses the desirable features in order to receive the best optimization services.

A good SEO service assures realistic SEO promises

A reliable optimization service provider must promise SEO techniques that are doable. Unfortunately, many SEO firms offer promises that are obviously impossible just to obtain the business of as many clients as possible. Hence, a website owner must be able to discern a realistic link building SEO provider and choose this over a service that delivers empty promises. An ideal optimization service provider promises to deliver the best possible link building results at the most realistic time using decent and doable optimization strategies.

Offers clients details about their SEO and link building strategies

A good website optimization service firm divulges important SEO information and details to their clients upon request. The firm deems that this is necessary so that the client has a good idea on how its website is able to improve in its search engine ranking. It is a must that a link building service provider informs the website owner about the sources of the back links; this is to assure that the links that his site enjoys are relevant and of high quality value.

Needless to say, if a SEO firm is open about the optimization techniques and processes that it implements on a client’s website, the latter will have a peace of mind knowing that his website is only engaged in legitimate SEO and is on its way to gaining top ranking in Google and other major search engines.

Offers continuous services

A reliable optimization service provider offers SEO and link building services long after the actual service has been rendered and paid for. It is aware that search engine optimization process is continuous and so it must be willing to offer free and continuous service to ensure the growth of the client’s website. Its service actually includes the maintenance of the high SEO ranking that it earned.

Nicole McGrey is a teacher at Edinburg High School for 5 years and currently taking PHd at University of Illinois. Her writing includes few notes about Eric Schiffer seop. Follow her on Twitter @NicoleMcGrey

PattonWebz

Qualities and Features of Dependable SEO and Link Building Services

• Firstly scripts should be registered with WordPress and then added to just the front end using wp_enqueue_script.
• Secondly WordPress already includes a local copy of the jQuery library and it’s already registered.
• Thirdly WordPress implements noConflict() as standard so you need to define your objects ever so slightly different than you normally would.

Including the jQuery Library in Your Theme

You might just be tempted to paste something like  into your header.php file. That would be the wrong way of doing it. It’s wrong mostly for the reason of duplication. What if a plugin used jQuery and also included it? Then you would have 2 copies in your code, that means 2 lookups and 2 downloads of the same script. Increasing the look-up time and download size of your page for no reason is just silly so let’s learn how to do it the right way.

To include the jQuery library in your theme’s <head> section you should to enqueue the script. Enqueueing it ensures that it’s only included in the code once. No matter how many different plugins/pages try to include it WordPress will still only include it the one time, and because it’s using wp_enqueue_script it will only be included on the front-end – where it’s needed.

As WordPress already includes a local copy of the jQuery library and it’s already registered we can skip over a few of the parameters that wp_enqueue_script accepts and do everything in a single, easy to understand, line of code.

wp_enqueue_script( 'jquery' );

Just so you can see a full call, with all parameters, here’s what it would look like if everything was passed.

wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array('jquery'), '1.9.1', true);

In the second code we are giving a name to our script (jquery) the address of it (on googleapis.com), telling it that it depends on ‘jquery’ to be loaded first (I’ll talk about that in the next section) and what the version is.

The final parameter says if you want the script in the footer, setting it to true includes it there while setting it as false, or not including the parameter at all, places the script in the head.

Adding scripts to the footer relies on wp_footer() being present. Similarly adding it to the head requires wp_head(). Both of those hooks should be included in all WordPress themes, so you likely don’t even need to think about them but if your scripts aren’t being included look to see if you have those hooks present in header.php and footer.php.

The second code block is enqueueing and registering the script at the same time, but as WordPress already registers its local copy of the script under the name ‘jquery’ you can just tell it to enqueue.

So all we need in our functions.php file is the first code block wp_enqueue_script( 'jquery' ); and jquery will be included in the head of our script. Simply change it to wp_enqueue_script( 'jquery', true ); if you want it in the footer.

Writing your custom jQuery script for WordPress

WordPress includes the jQuery library in noConflict() mode by default for a couple of reasons. Mostly to prevent conflicts arising from other JavaScript libraries WordPress can use, and because if one plugin uses jQuery and a second uses it too there is a chance of the second getting data from the first, causing a conflict, and leading to some crazy results.

The fact that noConflict() mode is on causes problems for some people because not knowing, and not programming accordingly, will make their scripts simply not work.

jQuery for WordPress

I have a very small piece of jQuery in my Theme-Dev framework that controls opening and closing the responsive nav on smaller screen devices.

/*! Responsive Nav */
jQuery(document).ready(function($){
$("#nav-toggle").click(function(){
$("#responsive-nav").toggle(800);
});
});

I have it in an external file and enqueue it, like the example above, and it works fine but when I programmed it I done it directly in the head section using a

I wrote it like this:

/*! Responsive Nav */
$(document).ready(function(){
$("#nav-toggle").click(function(){
$("#responsive-nav").toggle(800);
});
});

It worked when I tested it in a static file locally but when I moved it to an external file and enqueued it within my WordPress theme it did not. I was like WTF! But then I remembered the noConflict() mode enabled by default and facepalmed lol

I had referenced the jQuery object using the shortcut ‘$‘ just as I normally do but when noConflict() mode is enable that reference is to something that doesn’t exist, or another library altogether. There’s a couple of ways around this but a really quick fix it to change the first reference to ‘$‘ to ‘jQuery‘ and then reassign it to a variable named ‘$‘. You can do all that in the first line of the code changing $(document).ready(function(){ to jQuery(document).ready(function($){. After that you can reference jQuery within the function simply with ‘$‘.

Or you can create a variable to reference the jQuery object with like this

$j = jQuery

As I discovered when trying to write this post it’s pretty hard to put into words how this all works so if you still have trouble understanding it then there’s some pretty useful documentation on using jQuery with WordPress on the WordPress.org wp_enqueue_script page.

Once you have the jQuery library included, and you have written your custom script you can register it and enqueue it with wp_enqueue_script the same as I showed above with the jQuery snippet. You should use get_template_directly_uri() to point to your theme location. My script is called ‘responsive-nav.js‘ and is in the ‘js‘ folder of my theme.

wp_enqueue_script( 'responsive-nav', get_template_directory_uri() . '/js/responsive-nav.js', array('jquery'), '1.0', true);

I’ve given my custom script the name ‘responsive-nav‘, pointed to the address of it, told WordPress it depends on ‘jquery‘, it’s version 1.0 of the script and we want it to be included in the footer instead of the header.

Telling WordPress that our script depends on ‘jquery‘ means that our script will be added after the jQuery library is loaded and if it doesn’t get loaded, neither does our custom script – because it won’t work without the jQuery library.

In Conclusion

Using jQuery with WordPress isn’t quite the same as using it within static pages however once you understand the basics of it you can then make use of it the same way you would on any other page. Sure, it might take a little bit of time to get the hang of but once you do you shouldn’t need to treat it any differently than you do elsewhere.

PattonWebz

Using jQuery in a WordPress Theme

Lists of keywords have to be built and then evaluated.

I’ve built a tool to do help out with building keyword lists using Google Docs and Google Drive. If you haven’t heard of Google Drive before then you should read all about what Google Drive is over on TekSocial.

If you don’t have time to read the whole article and build this tool yourself, don’t worry I’ve got you covered, just click the button below to get the app.

Building your Keywords List

I make good use of Google Suggest to find keyword ideas in the early stages of building my lists. I use it for a couple of reasons. I know that those terms have search volume and I can easily see how searchers link my keyword with other search terms to get some natural language variants for my chosen term.

Getting the whole list of all suggestions Google will give for your keyword would take someone a long to do manually so we use tools like Ubersuggest to speed up that process and give us all the auto-suggest keywords for our term with an easy way to copy them all to the clipboard for use in other tools.

When you have that information you could then paste it into the Google Adwords Keyword Tool and get some search traffic information about each keyword to begin the evaluation process or combine the list with an existing list and remove duplicates.

There’s plenty of things you can do with an auto-suggest keyword list.

Ubersuggest Google Doc

This is what the advance version of the app looks like. It’s really just a nicer looking, better formatted version with one or two modifications.

We can go one better and automate the collection of all of those keywords from Ubersuggest into a Google Docs spreadsheet using ImportXML() and XPath.

You could then still copy/paste them into Adwords or do whatever you want with them, as well as have a copy of the original list saved.

Building an Ubersuggest App

The steps to building a simple version of this app are surprisingly easy. Simply follow the instructions and copy the code into the suggested boxes.

• A cell to enter the keyword to search.
• Convert the keyword into a URL friendly version.
• Combine the keyword into the URL.
• Get the page with ImportXML()and use XPath to find the keywords in the page and place them in the sheet.

So just 4 steps? Not that hard!

1. Cell A1 will be the cell that the keyword gets entered into.
2. Click cell B1 and use Substitate() to change the keyword’s spaces into dashes: =substitute(A1, " ", "+")
3. You need to combine the Keyword into the URL so we do it in 3 parts. Part 1 is the beginning of the URL, part 2 is the keyword, part 3 is the end of the URL which contains locale and search type. Put the start of the URL into cell C1 http://ubersuggest.org/?query= and the end into D1 &format=html&language=English%2FUSA&source=web. The end of the URL requests standard web results in English for the USA locale. We can then build the query right in our import or we can build it in it’s own cell. We’ll be using concatenate() to join the pieces to for the URL and putting it in it’s own cell. Click in cell E1 and paste =CONCATENATE(C1,B1,D1). That will join all the pieces and make a clickable link for you if you want it.
4. We get a copy of the page using ImportXML() and use Xpath queries to look through the page and find elements with a specific class. I’ve looked at the HTML of the Ubersuggest pages and they give their keywords the “keyword” class and search type class, which for us is “web”, and they are all listed in H4 tags. It’s all done with a single command so just paste this into cell A3 and the keywords will appear in a list moving downwards through the cells. =ImportXML(E1,"//span[@class='keyword web ']")

This is what the spreadsheet looks like when it’s been run and a screenshot of the formulas used to create it.

The more advanced version of this app was inspired by a Google Doc by Jeremy McDonald of BeetleWeb which accomplishes the very same thing as mine.

The advanced version brings in the ability to select the locale for results and it looks much nicer that the simple version. With a future version i have plans to enable the ability to change search type.

Both the simple and the advanced versions of this app are available in the Google Doc. Just click the button below to view the sheet, make a copy of it and then enter your own keyword in the box. It really is as simple as that.

Updated: April 10th.

Too many bots were scrapping Ubersuggest. He had to add a captcha to the site to stop mass bot scraping  This, of course, affects us little guys who just want to scrape a single keyword at a time. Don’t know about you but I would rather the service remained open and I had to visit the site, solve the captcha and then scrape the keywords than it being closed down.

Until I figure out a workaround or find a way for users to solve the captcha within the Doc this one doesn’t work anymore

PattonWebz

Build your own SEO Tools – Ubersuggest, Google Docs and ImportXML()

Build your own SEO Tools – Our ‘Big Data’ store.

The thing is that lots of the data that premium SEO tools collect and organize is actually publicly available data – readily available for you to gather and make use of yourself if you know how.

The rest of the data they use requires API access to certain services but luckily for us most of those APIs give out free API keys – albeit with usage limits or certain restrictions. You’ll be signing up for a bunch of those API keys throughout the building of these tools but the keys will allow us to gather as much data from as many different sources as we need.

Getting the Data is no longer a Problem. Organizing it all is.

The real magic to all of this is when you combine public data with the freely available data from APIs to create tools that show you in depth information and provide insights into things you wouldn’t normally notice if the information wasn’t combined and sorted.

In just a few seconds you can gather serious amounts of information about practically anything you want. It’s no longer a problem accessing that data: the problem arises when you need to make sense of what you collect.

This is where our SEO Tools come into play, we need to scrape everything and make sense of it.

SEO Toolset Features

• Rankings Tracker – with Google Analytics integration so you can check the rankings of keywords you see in your reports and keep a note over time.
• Social Share Count – You obviously want to be keeping track of how your pages are performing socially to help get an overview of how people are engaging with your content.
  • Possibly even make this take note of mentions and what they say and keep a note of #hashtags used in tweets for future reference and content generation.
• Keyword Research – Using various different services including the Google Adwords Keywords API and Ubersuggest.
• Content Brainstorming – This one will search various different sites for you keyword with different advance search operators to help you find topics to create content about.
• Outreach/Currently in Industry – This one will make use of social networks to find out things people in your industry are talking about now and see if you can jump in on them

Next Time – We Start Building

Those are just a few of the core features I’d like my SEO Tools to have and eventually I’d like to have them all completely integrated into the one big tool with both a Google Docs version and an online version for me to build into my WordPress installs to help with smart content creation.

A Google rank and social share counter will be the first things we’ll build. So I’ll go into the importXML() function and XPath which is the basis of how we gather all our data.

PattonWebz

Build your own SEO Tools for Free – Part 1

Create a WordPress Menu in your Theme

I created pages to use as the homepage and the blog and added them to a menu – all within the WordPress dashboard. In my theme framework’s functions.php file I added support for a custom ‘header-menu’ and placed it at the bottom of the header.php file using standard syntax giving it an id and a class which we’ll use to control and style it.

<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container_id' => 'responsive-nav', 'container_class' => 'nav-links' ) ); ?>

Once you add the code to your functions.php file you’ll see the ‘Menus’ option under ‘Appearance’.

Place the following code in your theme’s functions.php file if it doesn’t already support a custom menu. The code adds 2 menus to your theme but in this tutorial we will only be using header-menu.

function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );

I floated the elements and styled the links to match the site text but when I got down to smaller sizes things just took up too much of the screen and shrinking the text to fit made it almost unreadable. So I wanted a dropdown nav on smaller viewports – a touch friendly mobile nav. I’ve yet to make a final decision on where this breakpoint will be set because I’ve not tested with different amounts of links, screen sizes and browsers etc but I’m not simply going to say ‘when you reach the size of an iphone turn into a mobile dropdown menu’ because then I run the risk of simply designing a mobile version of the site when the best practice is to tweak the layout when visually required.

For now I’ll be using loosely defined test sizes of ‘large’ and ‘tiny’ and choosing the breakpoint for the framework later you should choose a breakpoint that works for you.

Taking a mobile first approach I’ll be starting with a dropdown menu and use a media query to define the larger version. I’ll be using a custom CSS3 styled button to open and close the menu but for now I’ll just use 2 ordinary html buttons for ease. The menu will consist of an un-ordered list of links hidden until the button is pressed which requires a little JavaScript to add and remove styles using the onclick method. I’ve wrapped the nav menu in a nav tag instead of an ordinary div.

Within our WordPress theme’s header.php we have this code to create the menu.

<nav id="site-nav" class="main-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container_id' => 'responsive-nav', 'container_class' => 'nav-links' ) ); ?>
<div class="clearfix"></div>
<button id="pull" onclick="showNav()">Navigation</button>
<button id="push" onclick="hideNav()">Navigation away</button>
</nav>

That creates the following markup when used on the Theme-Dev site, your markup will be very similar.

<nav id="site-nav" role="navigation">
<div id="responsive-nav">
<ul id="menu-main">
<li id="menu-item-17"><a title="Theme-Dev" href="http://theme-dev.com/">Home</a></li>
<li id="menu-item-18"><a href="http://theme-dev.com/sample-page/">Sample Page</a></li>
</ul>
</div>
<button id="pull" onclick="showNav()">Navigation</button>
<button id="push" onclick="hideNav()">Navigation away</button>
</nav>

We need to include some JavaScript to handle those onclick events.

function showNav(){
document.getElementById("responsive-nav").className += " nav-show";
}
function hideNav(){
document.getElementById("responsive-nav").className = document.getElementById("responsive-nav").className.replace( /(?:^|s)nav-show(?!S)/g , '' )
}
window.onload = function()
{
document.getElementById("pull").addEventListener( 'click' , showNav );
document.getElementById("push").addEventListener( 'click' , hideNav );
}

That adds the ‘nav-show‘ class (which is also added through a larger viewport media query when scalled). Speaking of classes here’s the basic css to make it work. One thing to note is that the nav-show class is repeatedly added when the button is clicked because I haven’t yet included a way of checking if the class is already added.

Update: I’ve changed up the JavaScript a bit since I wrote this to eliminate the repeated adds to the classes using a single function to add and remove the hidden attribute coupled with bottom up media queries and a slightly improved UI. The new code can be found in the updated version included in the Theme Dev core.

#site-nav ul{
text-align: center;
}
.nav-links{
display:none;
}

The media query to swap it from a drop-down menu to a floated list.

@media all and (min-width:1200px) {
#site-nav li {
display:inline;
float:left;
}
#pull,
#push{
display:none;
}
.nav-links{
display:inline;
font-size:22px;
}
.nav-links li{
width:25%;
text-align:center;
}
}

And this is the class that shows the list when in pull mode.

.nav-show{ display:inline; }

Put it just that css into the stylesheet on Theme-Dev and the menu works exactly as expected. When the screen is large (defined as being more than 1200 pixels then show the list but if the screen is smaller than 1200 then show the buttons for the pull version. It’s pretty simple to get working and once you have it working you can then continue to style it however you please.

Responsive Nav on Theme Dev

I wrote this post based on findings I made when starting work on my responsive WordPress theme framework: Theme Dev. The code in this post works on it’s own without any additional sytlying but you can make it look any number of ways you want. When I coupled it with the tiny bit of styling I’d done to theme-dev.com it turned out to look pretty decent on it’s own without much additional work. Here’s what the default looks like in pull mode and in full mode.

PattonWebz

Build a Responsive Nav Menu for WordPress

Theme Header

The header brings sets up the document header with an html5 doctype, includes the page title element and does everything that needs done in your standard header. The wp_head() hook is placed here for plugins that rely on it.

It then goes on to display the site branding centered with title and tagline as the focus, always above the fold but getting bigger on larger screens.

The Responsive Nav

Navigation is important on almost every site. Theme-Dev has a lot of work to be done on the look and feel of the navigation but currently it’s completely responsive, with a pull-down version for small screens, switching at 800px to the full variant  Another 2 breakpoints are planned to bring a few stylistic changes for very small and medium-large sized screens. While nothing in my Theme-Dev framework is completely set in stone you can check out how I made the original WordPress menu responsive. I’ve made use of some jQuery code so read this is you don’t know how to properly enqueue and work with jQuery in WordPress.

Content Area & The Loop

The content will all still be pulled by a single loop located in the index.php file. Version 0.3 brings with it some improvements to the output of the loop and some conditionals to define different page types like single and home but this entire section remains largely the same as before.

Sidebar

The sidebar has been removed from version 0.3 in favor of providing no hard-coded output. Until I add a widgetized area for it in functions.php the sidebar file has been made empty.

Footer

The footer is where the tags opened in the header get closed. The hardcoded menu has been removed and a footer nav has been built created in functions.php.

It also includes a call to wp_footer() for anything that uses it – like the WP Admin Bar.

Plans for version 0.4 of Theme-Dev

I have a lot planned for version 1 for Theme Dev and I’ve allocated some of the tasks on a priority basis so for the next version I plan to work on a few set things and then see what else I have time for. On the cards for the next version is:

• Additional breakpoints are for some minor stylistic changes.
• Branding tweaks.
• More conditionals for the Loop.
• A theme options framework.
• More style changes.

The major focus of the update is to do with the content areas. Style will be brought to it along with some post meta.

PattonWebz

Theme-Dev Version 0.3 Feature Set Finalized