How to use jQuery to sort and reorganize your content

Hello! Recently we were tasked with finding ways to re-organize search results on a Drupal page in such a way that we could prioritize, group and sort the results in a coherent way. The simplest way to look at organizing in general, especially content that is dynamically generated, is to either adjust the query that actually produces the results (back-end) OR adjust the results with jQuery (front-end). There are advantages and reasons why one way may be more advantageous over the other. Adjusting the query that produces the results may produce the sorted results quicker however the downside might be that making further adjustments or improvements requires extra overhead since building and executing database queries (for example) requires additional testing, QA and all that sort of stuff. Alternatively, if you sort the content / results on your page with jQuery, it is much more flexible and easier to manipulate the […]

How to create a custom gallery meta field for posts in WordPress

Hello! If you read our last post on us releasing a new WordPress Plugin for Portfolio Galleries, you would have seen us touch a bit on creating custom fields / meta boxes for your post type. One of the bigger challenges when creating the Portfolio Grid plugin was implementing the administrative jQuery to manipulate the WordPress media system in such a way to create custom galleries. The galleries were needed for the plugin. When you view a single portfolio item, you will be brought to a single post page template that displays a modal gallery of additional portfolio images. I’ll be walking you through how we manipulated the custom gallery field with jQuery. I will also show the final product which is the query to produce the gallery images as thumbnails with a modal window to expand the images if they are clicked. Create a meta box for posts in […]

WordPress plugin to display your portfolio in a full width grid

Hello! We just released a WordPress plugin, Shift8 Portfolio, to organize your portfolio in a grid using bootstrap scaffolding! This is a very straightforward plugin that we decided to write for our own portfolio page. After using it ourselves it was decided that we needed to share it with the world 🙂 There are many many portfolio type plugins that already exist but the desire was to write something that was very simple and could be expanded later on to accommodate any changes in the custom content that needed to be created such as different sorting categories as well as different shortcode options that might be needed. There are a few interesting things that had to happen when writing this plugin that might be helpful to share for anyone who is interested. How to create a custom post type in WordPress Instead of using the built-in WordPress blog post type, […]

New Company Site Launch for Shift8 Web

Hello! We are excited to announce that we have created a brand new website for ourselves! Sometimes its difficult to focus on ourselves when we are so often focused on our clients. With new and exciting projects on the horizon, we thought we would take the opportunity to chip away and eventually launch a new website for ourselves. While previous site was on the Drupal CMS, we decided it would be nice to migrate back to our old friend, WordPress. Though our site may seem kind of simple, there’s a few interesting things that we did that we wanted to share. Mobile Detection with jQuery Why does anyone ever need to detect for mobile devices anymore? Don’t we just use media queries? Well, yes that is the best practice answer. But throw in multiple layers of caching like Memcache, Page caching, Object caching and Varnish caching and you will soon […]

WordPress plugin for a mobile friendly sticky navigation menu

Hello! Creating a unique, original and flexible navigation menu in WordPress can be challenging. There are many commercial and free plugins out there to establish navigation systems, however many of the commercial options seem to be “overkill” providing many bloated options with embedded CSS that can be difficult to adjust by a novice user. What we wanted to do is put together a very simple and clean navigation menu that sticks to the top of the screen and is mobile friendly in a simple yet flexible way. We created a plugin, which you can view by clicking here, to do just that! The plugin utilizes FontAwesome, Modernizr, Google Fonts and CSS from Codyhouse to put together a simple and clean navigation menu solution. Below I’ll walk through the different components that went into this plugin in order to tie everything together in an easy to use solution. Register settings to […]

Create a custom mobile and tablet friendly dropdown menu in WordPress

Hello! In our many instances where we are developing, designing and deploying a WordPress site for a client, it is a constant necessity to implement a mobile / tablet friendly dropdown menu. Because this happens often, we have developed a “starter” mobile menu for our WordPress implementations. We prefer to create a CSS based responsive mobile menu from scratch instead of using an out-of-the-box plugin because although the commercial (or free) WordPress menu plugin may make it much easier to roll out a mobile menu, as soon as the client comes to us with requests for customization, changes, positioning and styling it can become problematic. This is because often times a WordPress plugin such as Superfly or Uber Menu will have their own stylesheets that are prioritized and sometimes difficult to override. This is also true with the built in jQuery effects such as slideouts, fade-ins and anything along those […]

Use jQuery and CSS to make a sticky navigation menu

Hello! Some may argue that sticky navigation menus (menus that are fixed at the top or bottom of the page as you scroll) are a fashionable web design style. Whether or not its a “fad”, having a navigation bar that is fixed as you scroll throughout the the site is advantageous. This is especially so when you have a page that has a lot of content to scroll through. Keeping the navigation front-and-center as the end-user browses throughout a site will ensure a smooth user experience. Having elements “stick” as you scroll doesn’t have to be just within the context of navigation. You might want to have a sticky newsletter signup, sales chat window or even an e-commerce “cart” block or widget. We thought we would share a simple example that can be injected into any CMS or flat file template. The example includes HTML to generate the menu content […]

Creating custom post types and pulling them into a custom page template in WordPress

Hello! Occasionally in WordPress it is necessary to push, what is primarily a blogging content management system, to its limits in order to create a dynamic website. The reason why it may be necessary to create a custom wordpress post type is in just that scenario where you need to create custom and dynamic types of content that go beyond what a wordpress blog “post” by default will allow you to modify. For example you may want to create a car website that lists all sorts of different cars and has a multiple car listing page and single car listing pages. Each car could have many fields like color, make, model, year, engine, features and so on. Doing this in a wordpress blog post just wouldn’t work because out of the box you only have fields like post title, categories, tags and post content. While it is possible to simply […]

Detect browser type or device type and assign custom CSS in WordPress

Howdy! With the advent of responsive web design in recent years, developing “mobile only” websites has somewhat become a thing of the past. That is to say we no longer need to maintain a separate version of a website for mobile devices as we once did. All that said, it is sometimes necessary to address things on specific devices or specific browsers. A potential scenario could be that a particular jquery plugin, sticky header menu or HTML form may not work in Safari (for example) where it works fine in IE, FireFox and Chrome. There are quite a lot of differences between all the major browsers that any web developer or web designer should be aware of. A scenario we recently had to deal with here @ Shift8 was a particular WordPress sticky / fixed header menu that was overlapping content only on iPhone devices using Safari. A user on […]

Some cute flat icons that we made

Hello There! Here is a collection of some of the most popular Social Media platform icons that we created using http://fontawesome.io/ You can download these icons and use them for whatever you please. They are .png files and each icon is 32px. These icons are using the colours from the Shift8 Web brand, but you can adjust the colours in Adobe Fireworks to whatever you wish. In this case the icons are images, but if you are interested in using Font Awesome icon set  on your wordpress website or blog, you can do this really easily using a really simple plugin: https://wordpress.org/plugins/font-awesome/ The plugin will allow you to use all 361 Font Awesome icons, there is a lot of documentation that you can read through on the plugin download page.