What is good web design?

Hello! Trends in web design have come and gone over the years, however there have been some recurring indicators that have manifested as good web design in different iterations as styles change, web development technologies change and the internet changes. CSS, HTML and Javascript frameworks have all come a long way in terms of front end development and the tools that the different technologies bring to the table that allow us to implement modern, interesting, artistic, clean and beautiful websites. But what makes good design? That’s the million dollar question! At Shift8, we have offered web design in Toronto for hundreds and hundreds of businesses across all niche markets. Each marketplace or industry has their own unique challenges, however there are common elements and expectations that we have noted happens for the most part across almost all of our projects. I will attempt to break down these challenges in order […]

How to inject advanced custom fields into your WPBakery post grid

Hello! Yes of course WPBakery / Visual Composer is bloated. Absolutely correct its more ideal to simply create your own page template with a custom WordPress query and design your own post grid from scratch. For smaller budget WordPress projects where time is money, it is sometimes ideal to go the post grid route. Why not? The customer wants the designed and customized end result but they have a restricted budget. WPBakery (aka “Visual Composer”) does save time in these scenarios, and there’s something to be said about applying customized CSS and jQuery to customize and tailor the vanilla packaged look and feel that these types of WordPress bundled solutions usually bring to the table. All that said, the point of this post is to describe how to properly inject custom ACF fields (advanced custom fields fields) into your post grids. Why would you want to do that? Well if […]

How to integrate Chart.js into WordPress Woocommerce to show charts and graphs of your products

Hello! One of the nice things about Woocommerce is that it is very easily customized. Actions can be removed and re-added in order to adjust the default behavior. Additionally you can override many of the default templates that come with Woocommerce and its many extensions to fine tune and adjust the way you want your e-commerce to behave. Whether you are selling t-shirts or auto parts, sometimes its nice to have a clean visual representation of the statistics of each of your products. This will allow the customer to easily attain the pertinent information that they may be looking for, perhaps even assisting in leading them into an online sale. One of the best javascript libraries out there for “charting” is Chart.js. It is very simple yet extremely flexible for plotting and drawing visual representations of data. Things like chart colors, borders and a responsive layout are all things that […]

Read and auto populate fields in WordPress Gravity forms with jQuery

Hello! When designing and implementing Gravity forms there may be occasions where you would want to auto populate multiple fields based on a preceding field selection. This was the case in our scenario where we wanted to populate the selection of a drop-down box based on a Google Map location field within Gravity Forms on WordPress. What we wanted was for the person to enter their location in a Google Map location field (within gravity forms) and based on that selection, read the respective City within that location and based on that selection, populate a drop-down box. Gravity forms already possesses the ability to implement conditional logic, however it largely is designed for the purpose of revealing/hiding/activating input elements based on preceding choices. We need to actually inject an input selection I’ll try to walk through the process to implementing this type of logic specifically with Gravity Forms. Get the […]

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 […]

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 […]

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 […]

WordPress plugin to integrate your Facebook page feed

Hello! We have created yet another WordPress plugin! We are highly motivated to roll out any and all WordPress custom development as a neatly packaged plugin for the general public to use. We have many more ideas and many more plugins in the works. Check out the plugin hereThis latest plugin, recently approved by the WordPress plugin auditing community, pulls your Facebook page’s feed and injects it into your site anywhere (by use of a simple shortcode). As with other similar Facebook plugins, this plugin requires you to generate a simple Facebook app with API key/secrets in order to connect and pull the data. The plugin utilizes the PHP Facebook SDK in order to connect and pull the data. I’ll walk you through the different parts of the plugin’s code, however if you’re interested click the SDK link to read more about how the Facebook SDK works. Load Facebook’s SDK […]

WordPress plugin to create animated full screen modal flyouts

Hello! We have recently created & submitted our first official WordPress plugin : Shift8 Modal. This is a relatively straightforward plugin that integrates the animatedModal jQuery library into WordPress as an easy-to-use shortcode. Submitting our plugin to the WordPress plugin directyl took roughly 7 days to complete. WordPress has pretty straightforward (though sometimes changing) development policies, standards and best practices to follow. Once approved, a WordPress team member provides SVN access to submit / commit your code to the plugin directory. This plugin is pretty simple in terms of what it does, but I’ll break down what it does. Load animatedModal.js and Animate.css The animatedModal library makes use of the (popular) Animate.css library as well. So we’ll need to load both as an enqueue within the plugin :

Without the above files, the entire plugin will not function properly. Depending on what other libraries you are using, you might […]