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 : // Load Animated Modal function shift8_modal_scripts() { wp_enqueue_script( ‘animate-js’, plugin_dir_url( __FILE__ ) . ‘js/animatedModal.min.js’, array(), true ); wp_enqueue_style( ‘animate’, plugin_dir_url( __FILE__ ) […]

How to customize WordPress search results page

Hello! When designing websites, especially websites that have an active blog, it is often necessary to style, customize and design the WordPress search results page. When styling the search results, we typically like to modify the way the results are presented as well as append a few custom CSS container classes in order to ensure the results resemble the way content is arranged throughout the rest of the site. In addition to the CSS containers, we would also manipulate the results containers with responsive CSS @media queries in order to ensure that the results are displayed efficiently and responsively on mobile and tablet devices. Typically we like to keep things clean and minimal, so the data presented and styling are styled as such. Typically in most WordPress starter themes such as underscores, you will have a standard search.php file which will be our starting point. Modify your theme’s search.php file […]

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

Create self-populating ajax drop-down forms in Drupal with the Form API

Hello! At risk of making the title of this post a mouth full, I thought I’d share some of our experience with interacting with Drupal’s Form API (Specficially Drupal 7.x). There is a lot of documentation on different ways you can interact with the Form API to accomplish a wide range of tasks from collecting information, processing information or building complex search queries. The latter is where we ventured in our most recent work interacting with Drupal’s Form API. We worked on a project where the requirement was to build a drop-down based filtration system where content category choices in the drop-down boxes would auto populate dependent taxonomies based on the relationship of the taxonomies , content fields and content in general. After choosing all the drop-down boxes, the end-user would then be able to click a “Go” button to build a list of results that apply the selected filters. […]

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