Category Archive: Development

A Fresh Coat of Paint

As with most things, a little change can be a great thing.

I’ve finally gotten the basics of my new WordPress theme finished and uploaded. I got so bored with all of these business themes with their straight lines and boring colors…

… so I decided to kick it up a notch!

This is the new version of my site. There’s a lot of angles, colors, and various insights to my life that aren’t work related. Eventually I want to do a lot more, but I know that the best things in life are built a bit at a time… Rome wasn’t built in a day, after all!

Everything is built with CSS and Flexbox. I debated using Grid, but I knew I could get Flexbox to behave – especially with the vertical timeline in the middle of the page.

I still need to add my portfolio, but I feel like this is a much more vibrant representation of who I am. I’m not stuffy, business minded… I want to make the web a more beautiful place.

The site also adds in a few of my other passions as well: specifically, gaming, ministry, and culture. I know this seems like a smorgasbord of topics, but they all come together to form who I am, and they (combined with my design and development work) are the lenses in which I view life.

Some things to note:

  • The lines are angled at 1.75 degrees
  • The backgrounds all scroll at the same rate, even those the images are different.
  • I created a function specifically to randomize the background color on some sections because I love a little bit of chaos 🙂
  • The calendar is running a customized version of Modern Tribe’s “The Events Calendar”. I wanted something where I could have a nice way to look at upcoming stuff. Eventually, I’ll have streams (Twitch or YouTube) and other ‘short term’ items that aren’t just conferences.
  • I have a few other ideas that will be coming soon. But I want to nail down what I have before I add on, and that’s nearly done!

I’ve never felt so good about a design as I do about this one, and I feel like it’s… me. It’s a little rad, a little chaotic, and bright – just like I aspire to be in real life!


Local by Flywheel: An Overview

I’ve been using Vagrant and VVV with VV (a site creation wizard) for a while now as the cornerstone of my development workflow. I have customized my VVV quite a bit over the years, and – while I was happy with it – I was always on the lookout for something better to see if it would fit my development workflow better.  On a whim, I decided to check out a new app on a recommendation from a co-worker: Local by Flywheel.

Flywheel is a fantastic WordPress host, and I’ve had the chance to meet a few of their reps at the last WordCamp – they’ve got a great service, and to see them focusing on the entire development process (from local development to the final production site) is refreshing.

Local Installation

Installation of Local is easy: simply visit https://local.getflywheel.com/ and click on the obvious “Free Download” button. It’ll ask for a few pieces of information, and whether or not you want to use the Mac OSX version (stable) or a beta version of their Windows client. Run through the install process and run the program. It’ll set up the initial run-through and will set a few variables and settings on your machine.

Once you’ve installed the software, you’ll be taken to the home screen, where the fun really begins.

The Settings Tab

The screen has two tabs at the top (Sites and Settings). The Settings tab runs through the various options you can set up for your install. A lot of the options can be left at their default, but I want to go over a few of the important ones.

New Site Defaults

I like to set the Admin Username, Admin Password, and Admin Email here – that will allow any new sites to be created to default to those values.  The Default Sites Path is also good – I set mine to something in my home directory so I’d have quick access to it.

Add-Ons

I installed two add-ons at the time of this article: The “Pressmatic Stats”, and “Live Links”. I’ll assume you’ve installed them too, and will reference them later in this post.

The Sites Tab

The left bar will contain any sites that you’ve installed. Right now, we don’t have any, so let’s create one – Click on the plus sign in the bottom left corner and click “Add New Site”.

Enter a Site Name. The domain and path will auto-fill, but you can change those values as you need to. Under the Environment tab, you can customize your environment details. Personally, I like PHP 7.0.3+ and nginx as my server of choice, but that’s because it mimic’s my production environment. If your production environment is different, you can set the options to match.

Under WordPress, you can set up a multisite, as well as customize the Admin Username/Password/Email you set up earlier.

Click “Add Site”, and your computer -may- ask you for Administrator access. This is to auto update your hosts file so visiting the Site Domain (sitename.dev) will resolve correctly.

Once your site is live, you can view it at the link you put in the Site Domain.

Modifying a Site

Clicking on a created site in the left bar brings up the options panel. If the “light” next to the site is on, that means the site is active, and can’t be modified. Any sites that are off can have options modified upon their next activation.

Database

You can find all of the database credentials in the Database tab – as well as buttons that will automatically connect you via Sequel Pro or Adminer into the database – very useful if you’re migrating in a current site and want to drop the database in.

SSL

One of my favorite features, small irregardless, is the ability to trust the SSL certificate to allow secure access to the site. Done via OpenSSL, it’s a nice feature if you want to test security features and/or integrations (API, eCommerce, etc) on a secure production-like environment.

Utilities

The Mailcatcher is super useful – it’ll catch any outgoing emails from WordPress and hold them – great for seeing outgoing eCommerce emails, or other WordPress notifications.

The big thing here, however, is the Live Link.  If you downloaded the appropriate add-on earlier, you can activate this button and get a link to your WordPress install that works outside of your local environment. Developing a site and want to demo progress without pushing to a staging server? Activate the live link and send them the URL.

The More tab will also (if you installed the add-on) show you CPU and Memory usage via a handy-dandy scrolling graph.

The Verdict

The Live Link alone was worth switching to Local from Vagrant / VVV. I know there’s methods to allow that functionality in Vagrant / VVV, but the sheer ease-of-use makes it a slam dunk for me. I’ve been using it for a few weeks now – to properly put it through its paces – and it’s so much faster than Vagrant. I don’t have to wait to have the Vagrant box re-provision itself. Local uses a docker container setup and it makes the whole process so much more speedy.

So, if you’re like me and want a reliable, easy-to-use local environment, then head over to the Flywheel Site and download it!  If you’ve used it, or have a question, hit the comments below!


Functions.php Vs Writing a Plugin

When it comes to developing a new site, every developer has a stash of favorite code snippets or reusable modules they keep handy.  It could be a homemade widget, a section or module that is adaptable to multiple sites, or custom code that you use to personally extend the functionality of WordPress, but every developer worth their salt has them.  But over and over again I keep hearing the same question from new and old developers alike: Should these snippets be put into the functions.php file, or stored in a plugin?

What’s The Difference?

If you’re not familiar with it, the functions.php file is a special template file that stores any theme specific code that runs only when your theme (or a child theme) is activated.  Most times, pro themes will put all of their “on theme activation” codes, option panels, color pickers, and what-not in the functions.php file – or at least, in a file that’s included IN the functions.php file.

Plugins, on the other hand, will run no matter what theme you have.  You could change themes once a day for 30 days and still have the functionality of your plugin going strong.

Best Practices

The way I see it, there’s a fairly standard rule of thumb to use when it comes to this sort of thing: if you have a bit of functionality that needs to run on any theme, then it should go in a plugin.  If your functionality is theme specific and won’t transfer over to another theme, it should probably go into the theme’s functions.php file.

A Few Examples

Goes In A Plugin

  • Custom Post Type Setup
  • Custom Taxonomies
  • Google Analytics Code (if you add it via a hook to wp_footer() )
  • oEmbed extensions (Twitch, JustinTV, other services)

Goes in the Theme File

  • Custom Image Sizes
  • Javascript / Other Script Enqueues

The differences between these lists: The theme functions would stop working if the theme was switched, but  you’d still have Google Analytics, all your custom post types / taxonomies, and any extensions.

Agree? Disagree?  Have any special practices or rules of thumb you use for your own development?  Leave them in the comments below!


Advanced CSS Selectors

It’s my firm belief that between CSS and jQuery, there’s nothing on a page that I can’t manipulate.  CSS is amazing in that (as long as the proper hooks are in place) you can use it to manipulate elements with granular precision.  What most people don’t realize, however, is that you can use so much more than IDs or classes to select the various page elements.  Learning how to do this effectively means that you open your designs up to a lot more flexibility (and some really cool effects too)!

Here are some of the more advanced ways to select elements in CSS (along with a few of my favorite tips and tricks!).

The Basic CSS Selectors: IDs and Classes

I do want to start from the beginning because I see a lot of new developers misusing these.  To break it down to its simplest form:

  • A class is an element that you will reuse, or one that is part of a looped statement.
  • An ID is unique and special – there’s only one of them on the page. Period.

So, an example:

<div id="content">
    <article class="post">
        ...
    </article>
    <article class="post">
        ....
    </article>
</div>

What we have here is a typical content layout.  There’s only one “content” area.  That means it’s selected with an ID.  There are, however, multiple articles inside of that content area.  Those are marked by classes.  If you want to change the look of every article, it’s easy to do so by calling the article class inside of CSS.

JSFiddle Example: http://jsfiddle.net/studionashvegas/vYr7R/1/

Advanced Element Selectors

Now that the basics are established, let’s move onto some of the more advanced ones.

Element > Element

You can use the > symbol to specify the exact nested relationship of elements.  In the above example, you could target ONLY articles in the #content region by using:

#content > .article{
   ...
}

This would allow articles OUTSIDE of that content area to remain unformatted – very useful if you have multiple sections with separate formatting.

JSFiddle Example: http://jsfiddle.net/studionashvegas/49Qwx/

Element + Element

This allows elements that are sequentially positioned to be targeted, allowing you to specify different styles for elements adjacent.  For example: you want to give the <p> tags that are immediately following <H2> tags a special font size (as a leader paragraph).  The code…

h2 + p{
   ...
}

…would allow that to happen.  Any <p> tag immediately following a <h2> tag gets the benefit.

JSFiddle Example: http://jsfiddle.net/studionashvegas/gJ9HX/

Attribute-Based CSS Selectors

I love attribute-based  CSS selectors because they let you become extremely granular, but give you the flexibility of having just the code you need to get the job done.  Attributes, for the unaware, are things that are not css based: ‘src’, ‘href’, ‘title’, and ‘target’ are the more well known CSS selectors.  And, we can use those as hooks for CSS code.

[attribute=”value”]

A selector that allows you to select any tag that has exactly the determined value.  Did you know that you can signify if a link has a “blank” target (or opens in a new window)?

a[target="_blank"]{ border: 2px dashed red; }

A red 2px dashed border gets applied to any links that do not open in the same tab.  Pretty handy if you’re trying to make sure your outbound links are all opening off-tab!

JSFiddle Example: http://jsfiddle.net/studionashvegas/J3Gzn/

[attribute*=”value”]

Does a boolean search inside of the attribute.  If the word is found, even in the middle of other words, the style is applied.

a[title*="cap"]{ border: 2px dashed red; }

The above would work on titles such as “cap”, “captain”, “marketcap”, “encapsule”, and various other words that contain the letters c-a-p.

JSFiddle Example: http://jsfiddle.net/studionashvegas/HagT8/

[attribute~=”value”]

If this phrase is found (whole word, separated by spaces), the style is applied.

a[title~="cap"]{ border: 2px dashed red; }

The above code would work if the title was “my blue cap”, since cap is the requested selector.  It would not work, however, if it was “my-blue-cap”, since it would consider that phrase an entire word.

JSFiddle Example: http://jsfiddle.net/studionashvegas/m9Txj/1/

[attribute^=”value”]

The attribute’s first characters are the value.  This allows you to select any phrase that starts with that value.  My favorite use of this is to change hyperlinks based on their top-level domain.

a[href^="http://mitchcanter.com"]{
  background: url(../img/nashvegas.png) no-repeat left center;
  padding-left: 26px;
}

a[href^="http://www.binarychurch.com"]{
  background: url(../img/binary.png) no-repeat left center;
  padding-left: 26px;
}

a.rsswidget[href^="http://mitchcanter.me/blog"],
a.rsswidget[href^="http://www.mitchcanter.me/blog"]{
  background: url(../img/mitchblog.png) no-repeat left center;
  padding-left: 26px;
}

The above sets a special icon background based on the TLD of the domain.

Links with special TLD CSS Styles.

I built a really nifty RSS feed that combines all of the blogs I do online into one.  This allows me to specify the icon based on which site it links out too (I also use jQuery to automatically target these links to a new window, which makes it a basic lifestream of the blogging I do).

JSFiddle Example: http://jsfiddle.net/studionashvegas/tB5rz/

[attribute$=”value”]

Same as above, but this lets you specify how the attribute ends.  The best use for this: links to files of a certain extension get special icons.

a[href$=".pdf"]{
  background: url(../img/pdf.png) no-repeat left center;
  padding-left: 26px;
}

Now, any PDF links you include automatically get a PDF icon to signify to users that’s what they’re clicking on.

JSFiddle Example: http://jsfiddle.net/studionashvegas/Uw3qZ/1/

Pseudo Selectors

These CSS selectors are special, as they are dependent on positioning, number, and order.  If the order changes, so does the element that is modified.

element:hover

This one is the most popular.  If you hover over the element, the style is applied.

JSFiddle Example: http://jsfiddle.net/studionashvegas/LcxA7/

:before, :after

This one, not so much known.  Did you know that you can insert content using CSS?

a.read-more-link:before{
content:"Read this: ";
}

Any link with the class of “read-more-link” now has the words “Read This: ” put before it.

div.last:after{
content:" ";
display: block;
clear: both;
}

This puts a “clearing div” after the last column (useful for clearing out any weirdness that occurs due to the nature of CSS floats).  This allows you to keep the HTML extremely clean on the template side.

JSFiddle Example: http://jsfiddle.net/studionashvegas/9gvFu/1/

:not

Every element BUT the one in question.

p:not(.special){
...
}

This selects all paragraphs except the one with the class of “special”.

JSFiddle Example: http://jsfiddle.net/studionashvegas/ZLZCD/

:nth-child(x)

Ah, algebra.  The last selector we cover today is one that’s extremely reliant on math skills.  This selector allows you to select any element that matches the formula you insert.

Odd/Event

p:nth-child(odd){ color: red; }
p:nth-child(even){ color: blue; }

This code makes all odd paragraphs (1,3,5,7) red, and the even ones (2,4,6,8) blue.

JSFiddle Example: http://jsfiddle.net/studionashvegas/Gprju/1/

an + b

You can select any numbers based on the formula you input.

Some examples:

  • (3n+0): every third element (3,6,9)
  • (2n+3): every second element, offset by 3 (5,7,9)
  • (4n-1): every fourth element, offset negatively by 1 (3,7,11)

JSFiddle Example: http://jsfiddle.net/studionashvegas/58yLX/1/

Final Notes

You can hook CSS selectors together (even the pseudo and attribute based ones) to gain even more flexibility.  For example:

 a[href^="mitchcanter.com"]:not(.orange){
    ...
}

…would allow you to select all links to this site (but not the ones with the “orange” class).

What’s your favorite selector?  And what’s the coolest thing you’ve gotten CSS selectors to do.  Tell me your story in the comments below!


PHP ‘include’, ‘get_template_part’, and ‘require’: Best Practices

Including files in a PHP environment can be tricky for new developers.  There are no less than four ways to include a file: include, include_once, require, and require_once.  Moreso, there’s very subtle differences in the reasons behind using each one.  Throw in WordPress (which has its own specific flavor of include tag – get_template_part) and it can be downright confusing.  Using the wrong one, especially in plugin development, can mean the difference between a working plugin and a fatal error.

Let’s break down the various tags and shed some light on their usage.

PHP ‘include’ and ‘include_once’

The include tags are fairly straightforward.  From the PHP Manual:

<?php include(); ?> – The include statement includes and evaluates the specified file.

Simple enough. If you need to call in an external file, using include will bring all of the code into the script you’re running, at the exact spot you’ve placed the tag.  This also means that the file gets access to all of the functions and variables you’ve previously written.  It serves the same function as taking the file, copying its contents, and placing it in the same spot as the tag.

Include_once is very similar, but with one very important difference:

<?php include_once(); ?> – The include_once statement includes and evaluates the specified file during the execution of the script. This is a behavior similar to the include statement, with the only difference being that if the code from a file has already been included, it will not be included again. As the name suggests, it will be included just once.

Include_once is useful when you worry about variable reassignment or “double-calling” existing functions.  Use it, and worry not about duplicate scripts being called.

PHP ‘require’ and ‘require_once’

The require tags are actually very similar as well.  The key difference lies in the effect of calling a file that’s missing.  From the manual:

<?php require(); ?> – require is identical to include except upon failure it will also produce a fatal E_COMPILE_ERROR level error. In other words, it will halt the script whereasinclude only emits a warning (E_WARNING) which allows the script to continue.

<?php require_once(); ?> – The require_once statement is identical to require except PHP will check if the file has already been included, and if so, not include (require) it again.

It’s amazing how easy it is to break these commands down, and yet how subtle the differences are.  If you require a file, and that file doesn’t exist, it’ll throw an error message and will halt the script where it stands.  Include, on the other hand, will simply throw a warning message, allowing the script to continue running.

PHP ‘get_template_part’

This is WordPress’ built in command to include files that are located in the theme’s directory.  But it goes beyond that.  Let’s look at a sample tag:

<?php get_template_part( 'loop', 'single' ); ?>

This is a fairly standard usage.  Get_template_part works well with WordPress because it’s a degrading include – it looks for the more specific template first, before (upon failure to locate) moving to a more general template.

In this case, it would look for the files in this order:

  • wp-content/themes/childtheme/loop-single.php
  • wp-content/themes/parenttheme/loop-single.php
  • wp-content/themes/childtheme/loop.php
  • wp-content/themes/parenttheme/loop.php

It starts with the file in a child theme folder, then in the parent theme, and finally checking for a more generic template (child theme first).

So, what gets used when?

Here’s a few very simple rules of thumb.  Obviously, you will want to check your own needs before making a final decision, but this is more of a catch-all, quick thinking way to remember what to do.

  • The larger your site, the more likely you’d rather use require_once than include_once.  Smaller scripts can get away with include_once; the more moving parts there are, the more likely you want exact control of which files get called and where.
  • Any time a file you need is in your WordPress theme folder, use get_template_part. Period.
  • Variables, unless they are global, are un-accessible in templates called with get_template_part. If you need to access a variable, make it a global variable.
  • When using require and include, never use absolute links.  The second you deploy your site, things will start to go haywire.  Instead, use relative links.

If you want my honest opinion (and this is strictly that – an opinion) unless you’re doing some outside-of-WordPress stuff that needs to be brought in, most files that need to be brought in through WordPress should be done with get_template_part.  If it’s outside of WordPress (calls to external databases or content), then you can use include_once or require_once.

Any best practices I missed? Feel free to share them below!

Thanks to Ben Woodard for the inspiration for today’s post!

Photo by CalEvans


Workflow: Questioning the Tried and True Methods

My workflow, for the curious, looks something like this:

  • Digital wireframe.
  • Overlay wireframe on Photoshop (onto 16 column grid).
  • Design mockups.
  • Solicit feedback from client.
  • Make changes.
  • Get approval from client.
  • Code mockup into CSS/WordPress template.
  • Load Content
  • Browser Check
  • Responsive Check
  • Final Client Check
  • Launch

Seems relatively straight-forward, right?  I’ve been seeing post after post online saying that “designing with Photoshop is dead” and “the bell tolls for Photoshop”.  While the article titles are a bit on the apocalyptic side, they did get me thinking: is my workflow wrong?  Am I working in an outdated method?

And then, I stopped.  Because I realized something:

This workflow works for me.

I’ve got this down to a science.  Clients end up with websites they are happy with, and I end up with products that I’m proud of (and am willing to put on my portfolio).  Granted, there are pros and cons to both, but everyone has a workflow that they’re used to, that works for them, and that lets them do what they do best: design/develop/write.

I’d love to know your workflow, if you’re in the business (or if not, hey that’s fine too).  I feel like mine works for me, and it allows me to get stuff done in a timely fashion, and I think (ultimately) that’s what matters.

Just a little inspiration for those of you who are out there “doing” it day to day.  Don’t sweat the details.  Just go out and do awesome stuff.


Using A Child Theme in WordPress

If you develop WordPress themes, chances are that you fall into one of two camps.  You may be the person who takes premium themes and customizes them to your client’s wishes.  Or, you may be a custom builder who writes everything from scratch.  Chances are you use a lot of the same code, functions, and themes in your endeavors, and may even have a core theme created with all of those little bits of code.

Regardless of your method to the madness, I cringe a little bit when I see someone slicing and dicing a theme straight out of the box.  You lose the ability to further update functionality in the core theme, and you end up (sometimes completely) rewriting the theme just to make your site work.  It’s inelegant, and may lead to problems in the future.  But, there’s a better way:  Build a child theme, and customize that intead.

child theme is a theme that is based on an already created template set.  It takes the functionality, color scheme, options, and code from the parent theme and allows you to make changes without messing with the original code.  If you update the parent theme, the child theme will still retain any changes while adding any new functionality straight in — a win-win for everyone!

Funny thing: It’s highly underutilized.  A survey by Elegant Themes shows that only 35% of people who customize their theme use a child theme when doing so.  I think it’s because people don’t understand how.  And I’m here to fix that!

Creating a Child Theme

Step 1: Create a sub-folder for your child theme (FTP)

A Child Theme in WordPress

You can name it ‘themename-child’, or name it something completely different.  That’s up to you.

Step 2: Create the minimum files for your child theme

A Child Theme in WordPress

At the bare minimum, you need a style.css file.  This file will do two things:

  1. Contain the over-writes for any style changes you want to make
  2. Let WordPress know that this theme is a child theme instead of a parent theme.

Here’s an example of the top of my old style.css theme

/*
Theme Name: The Binary Church
Version: 3.0.3
Description: This is a child theme.
Author: Mitch Canter
Author URI: http://mitchcanter.com
Author Email: mitch@studionashvegas.com
License: GNU General Public License v3.0 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: parthenon-core
*/
/* Import Standard Styles
---------------------------------------------------------------------------------- */
@import url( '../parthenon-core/style.css' );

There’s a couple of things worth noting here:

  • The ‘template’ line has a link to the folder name of the theme I’m building on top of.  That could be ‘standard’, ‘twentytwelve’, or any number of things – it’ll depend on which theme you’re using.
  • That same slug is used below in the @import URL statement.  That import statement brings in the current theme’s stylesheet.
  • The only required entries here are Theme Name and Description – everything else is optional (but nice to have).

Step 3: Activate the Theme in WordPress

A Child Theme in WordPress

Once you’ve done this, go back to your site and view it. It should look exactly the same – and that’s good!  Unless you’ve made any style changes to the theme, nothing will be different – it’s still pulling from the old styles (and your new stylesheet).  One thing to keep in mind: any new styles you add need to go under the import statement; the order of operations say that styles further down the file will overwrite ones closer to the top, so any styles you use will over-write the default styles pulled in by the import statement.

Step 4: Make a copy of any .php files in your WordPress theme you want to change

Want to add something to the header? Make a copy of header.php and insert it into the new folder.  Now, WordPress will call that file first, and will call any changes.  Any un-changed files can remain in the parent theme directory and will be untouched.

A Quick Rule of Thumb on Theme Location using BlogInfo

There’s two ways to pull information from a theme’s folder using <?php bloginfo(); ?>: ‘stylesheet_directory’ and ‘template_directory’.  Using ‘stylesheet_directory’ will pull from the child theme folder, while ‘template_directory’ will pull from the parent theme folder.  Make sure to use them accordingly!


A Responsive Menu Solution for WordPress

Edited 01/14/14 to work with WordPress 3.8

A few months ago I modified a really cool WordPress template and started using it for my own clients.  As part of the overhaul, I realized that there was no really good way (included) to turn a WordPress unordered list into a menu that would work on a mobile device.  I tried a few different solutions, but in the end went for the simple one.  A selection (drop-down) menu works well, allows for an infinite number of parent and child categories, and is easily done with a simple jQuery script.

I’ve since modified that script, and wanted to share it as a snippit with you.  Make sure you have jQuery loaded somewhere before this script:

<script>
// Create the dropdown base
jQuery(".menu-main-container li a").addClass("top-level");
jQuery(".menu-main-container .sub-menu li a").addClass("second-level");
jQuery("<select class='main-drop' />").appendTo(".menu-main-container");

// Create default option "Go to..."
jQuery("<option />", {
"selected": "selected",
"value" : "",
"text" : "Main Navigation"
}).appendTo(".menu-main-container select");

// Populate dropdown with menu items
jQuery(".menu-main-container li a").each(function() {
var el = jQuery(this);
jQuery("<option />", {
"value" : el.attr("href"),
"text" : el.text(),
"class" : el.attr("class")
}).appendTo(".menu-main-container select");
});

// Allows user to automatically "submit" selection and travel to page
jQuery(".menu-main-container select").change(function() {
window.location = jQuery(this).find("option:selected").val();
});

// adds a dash to second-level classes
jQuery('<p>- </p>').prependTo('option.second-level');

</script>

There’s one bit of code you need to include in your stylesheet (or responsive stylesheet):

.main-drop{
display: none;
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

.main-drop{
display: block;
width: 94%;
margin: 10px 3% 10px;
}

}

This should work on most themes with a dynamic menu system.  There’s a bit of margin included with the drop downs, but you can adjust as needed.

So, what’s actually going on?

// Create the dropdown base
jQuery(".menu-main-container li a").addClass("top-level");
jQuery(".menu-main-container .sub-menu li a").addClass("second-level");
jQuery("<select class='main-drop' />").appendTo(".menu-main-container");

This code is adding classes to the links of the menu.  Typically, only the list items have a class attached to them, and this will allow us to differentiate between top level and second level navigation.  It also creates the base for the drop-downs (a “select” input) that we’ll soon populate with links.

// Create default option "Go to..."
jQuery("<option />", {
"selected": "selected",
"value" : "",
"text" : "Main Navigation"
}).appendTo(".menu-main-container select");

This creates a default option.  You can change the “text” value to whatever you want.  It becomes the default option.

// Populate dropdown with menu items
jQuery(".menu-main-container li a").each(function() {
var el = jQuery(this);
jQuery("<option />", {
"value" : el.attr("href"),
"text" : el.text(),
"class" : el.attr("class")
}).appendTo(".menu-main-container select");
});

This code searches each list item in the menu container and creates an option in the select box for each.  It pulls the link (href), the text, and the class we assigned earlier.

// Allows user to automatically "submit" selection and travel to page
jQuery(".menu-main-container select").change(function() {
window.location = jQuery(this).find("option:selected").val();
});

// adds a dash to second-level classes
jQuery('<p>- </p>').prependTo('option.second-level');

Since there’s no form element, selecting the drop-down options by themselves would do nothing.  This causes the browser to automatically go to whichever link in the drop-down is selected.  The second bit adds a dash to all second level classes – that will allow you to have a differentiates multi-level navigation.

This snippit has proven useful time and time again, and even though it’s built for WordPress, it can be adapted to any content management system that uses some sort of a semantic menu structure.


Add a Login Box to your Sidebar

I wrote a post a while back detailing how easy it was to add a Login Box to your template.  But, it’s even easier, it turns out, to add one to your sidebar.

Sidebar Login is a plugin that will let you throw a quick sidebar login box onto your site.  And, it’s AJAX compatable, which means that it logs the user in seamlessly and then displays typical “user” account options (profile, logout, etc).

Install the plugin and then drag the widget to your sidebar to install it.


The Case of the Disappearing Widgets

I’ve migrated tons of WordPress sites in my tenure as a WordPress developer, but over the years one thing would always bother me: my widgets kept disappearing.  I’d dump the SQL database and import it to the new server only to find that every single widget had vanished.

So, I looked for a solution.

WP-Migrate-DB (despite it’s fancy title) keeps every option and SQL line when you activate it, and saves it to a file just like a regular export.  The differences are very clear:

  • Unlike a traditional export, you can define ahead of time the destination URL and even the destination file structure (/home/snv/ – not  my actual structure, by the way, but a good example).
  • It saves all of the smaller options that are normally left out of an export.

You can download it through your blog or through the repository.

 


Contact/Hire Mitch

Want to book Mitch for a speaking event at your business or church?

Or does your business or project need some amazing design / development muscle?

Use the form below!


Don’t worry - your information is safe with us! We dont’ sell it, and we don’t like people who do!

Please only contact Mitch related to speaking engagements, projects, or personal messages.

NO SPAM EMAILS, PLEASE!