Since the site is to showcase both her graphic design and her art, Isla wanted a link in the menu bar which would allow easy switching between the two aspects of the site.  Clicking this link also needed to change the elements in the “Projects” drop-down menu. To achieve the latter I simply constructed two Project menu items in the built-in WordPress menu editor, added a different class to each, and used a bit of javascript to hide the Art projects when the Design link was clicked and vice versa.

To handle changing which posts are displayed I used MixItUp, a jQuery filtering and sorting plugin  from Kunka Labs. Like most javascript-based filters it only shows/hides elements that are already on the webpage.  However it also has an append method, which I hooked up to a variation of the “infinite scroll” pattern, to load more posts if the currently displayed ones don’t fill the screen, or if the user scrolls down. Each of the categories under the Projects menu also filters the displayed posts. To make it easier for Isla to add new categories which would also work as filters I added some code which automatically turned these menu items into filter buttons for MixItUp.

Since the different categories of post are shown on the home page depending on which filter is selected, rather than being showing on separate pages, I wanted to make it possible to link to a particular category. I first made each of the menu items add a hash to the url when clicked (e.g. #branding), and then added some code to check for these hashes when the page is being loaded. If the URL contains a hash for one of the categories then that category is loaded instead of the default view. I also set a cookie to remember the last category that was viewed; that way people who are interested in Isla’s artworks don’t need to change over from graphic design every time they view the site.

The post iocreative appeared first on Philip Allfrey.

One pain point of their existing website was that documents needed to be uploaded twice, once for member access and once for individual purchases. This was multiplied by needing to do this for each reseller site. I solved this by installing WordPress in multisite mode, and writing a custom plugin which copied uploaded documents from the master site to all sub-sites at the click of a button. I also wrote another plugin which parsed the XML of the MS Word documents and customised the footer with a different logo and contact information for each site, then used the FPDF library to generate a 5-page pdf sample of each document.  The Google Doc Embedder plugin then displays the sample document, so that users don’t have to leave the page to view it. To allow the client to keep the product description pages synced across all the sites I installed the Multi-Site Content Copier plugin and made some modifications to get the partially implementing syncing functionality working. I also needed to write a filter to make internal links relative rather than absolute, so that links to a particular page on the master site pointed to the correct page on the sub-site when copied across.

I used WooCommerce to handle the eCommerce side of the site. This also required some customisation. For example the client wanted logged-in subscribers to be able to download any document from its product description page, however out of the box WooCommerce only grants access to files associated with a particular product that has been purchased. To prevent the duplication of effort involved in adding files both to the single products and to the subscription I wrote a custom download handler, which changed the “Buy now” button to a direct download link if the member’s subscription was valid. On the document category pages the client wanted all documents to be displayed, grouped by subcategory. Again WooCommerce does not handle this out of the box so I needed to write some custom functions.

The client wanted to be able to do as much as possible from within the website backend, so for sending emails to customers I installed the SendPress Newsletter plugin. A few custom functions meant that SendPress had automatically updated lists of members, and a checkbox on the checkout page allowed signing up for the newsletter without filling in an additional form. I also customised the WP-CRM plugin to give a better interface for managing user information.

Customers found the new site easier to navigate than the previous one, leading to more sales which made the client happy.

The post HRtoolkit appeared first on Philip Allfrey.

The header needed special treatment to look good at all screen sizes, due to the large number of different elements. For smaller screens I successively made the menu tab width decrease, the “Book Now” flagpole disappear, and eventually combined the menus above and below the orange strip into a single off-canvas menu with the help of the jpanelmenu plugin for jQuery. To allow the client to still manage the two menus as normal in the WordPress backend I wrote a custom function which handles the work of combining them for the off-canvas menu.

There are a number of places in the site design where the client needs to be easily able to change images. For this I used the Simple Image Widget plugin from Cedaro, which has been my solution of choice for some time now. I’ve even started using it as a general “call to action” widget even when an image is not required, as it has a nice interface for adding links, and the appearance can be customised by a template.

For the Gallery page I used WordPress’s default gallery functionality, with the addition of the Responsive Lightbox plugin, to keep the lightbox effect working well on smaller screens. A gallery widget for the sidebar was also needed. Although a gallery shortcode could have been pasted into a text widget, I went for an easier interface for the client and installed the Rocket Galleries plugin.

The post Hone Heke Lodge appeared first on Philip Allfrey.

To make it easier for Jill to add content to specific areas of the page I used the Multiple Content Blocks plugin

The post Longitude Consulting appeared first on Philip Allfrey.

For the eCommerce side of things I used WooCommerce. The client provided a custom design, which I implemented, as usual, as a responsive,  mobile-first, Genesis child theme. With all the different types of vehicles a good search interface was key. Because much of the data was stored as custom fields I needed to install the Search Everything plugin in order for users to be able to locate the correct vehicle. The design also called for custom styled drop-down select boxes. These are a nightmare to try to handle cross-browser with CSS, so I used a jQuery plugin instead – Selecter from the Formstone family, which has a very elegant documentation website.

This project also had another couple of unusual features. One was a requirement for the possibility of having custom header image for each post, page, product, or category. While it is easy enough to use the featured image for such a purpose, most of these pages already used a featured image for another purpose. Instead I installed the Multiple Post Thumbnails plugin to handle most of these cases, WP Custom Category Image to handle the categories, and wrote a custom function to retrieve the appropriate image.

The second feature was to allow a large section of boilerplate text to be inserted on product pages via an iframe, to avoid falling foul of Google’s duplicate content penalty. To allow the client to easily edit it, this had to be a regular WordPress page with a custom page template. However because the height of the text would vary depending on the screen size I had to use a snippet of JavaScript to prevent scrollbars from appearing and breaking the illusion of seamless text.

Finally, to import and manage all the vehicles, whose prices change weekly, the client wanted the ability to upload from a spreadsheet, for which I used the free plugin WooCommerce CSV Import along with its premium addons. (This plugin has also proved used in setting up other WooCommerce sites.)

The post Driveline appeared first on Philip Allfrey.

Since this is an elite brand, it was important to Lee that the website look good on smartphones and tablets, as that is how many of his executive clients would access it. The design concepts I received from Switch adapted admirably to smaller sizes. For tablets I reduced the width to four columns (logo, plus two rows of three menu items), for mobile to one column. At all sizes I made sure to align all the elements to the grid both horizontally and vertically. For the menu at mobile sizes I was able to achieve a pleasing design pattern by stacking the menu items vertically. The resulting block was the same height as the logo, which meant I didn’t have to use a drop-down or off-canvas menu.

There were a number of places where I spent extra time on the  CSS to get things looking just right. For example, on the “About Lee” page at tablet sizes the blue quote slides over the logo as you scroll down the page. Since the quote has to have a transparent background (it lies partly over an image) the resulting combination of the text of the quote and the text in the logo was somewhat jarring. To smooth this out I added a semi-transparent background to the left-hand half of the quote only, and added soft edges via a box-shadow. This makes the quote and logo more obviously appear as separate layers, for a more aesthetically pleasing effect. As another example, the blue line below the image on the home page could not be a fixed length or it would collide with another quote, but to get the correct vertical alignment, it had to be implemented as the bottom border of the containing div. I solved this by using the :after pseudoelement to make generated content stretching 75% of the width of the div, to which I applied the blue border, then prevented this colliding with the quote by adding a 1px-wide black bottom border to the quote (again via :after generated content) which was offset in such a way as to “erase” the last part of the blue line.

In terms of the infrastructure, this website was a custom-built, mobile-first, responsive design, implemented as a Genesis child theme, which used normalize.css as the basis for my stylesheet. The font was specified by Switch as Gotham, which I implemented as a webfont using the Cloud Typography service from Hoefler & Frere-Jones.

The post Lee Parore Health Lab appeared first on Philip Allfrey.

As with my last project for this client, I built the website as a mobile-first, Genesis child theme. With this project, however, I switched from using Eric Meyer’s CSS Reset (which basically strips out all the browser’s default styles to provide cross-browser consistency) to Nicolas Gallagher’s normalize.css, (which makes the minimal necessary changes to produce consistency, while leaving sensible default styles intact). My primary motivation was that I was finding I needed to add reasonable defaults back on to the blank slate produced by CSS reset, but it also made debugging the CSS easier, because every element did not have a 60-selector rule at each stage of its inheritance! (There is also a couple of milliseconds performance gain, according to the CSS Selector Profile in Chrome’s Web Inspector.)

I also switched my off-canvas menu to Cloud Four’s offCanvasMenu jQuery plugin, because it was a more elegant method than my previous solution. To make it more obvious that the “three-line” icon is a link to a menu, I retained the navigation bar from the full-width design, replacing its contents with a breadcrumb trail at the left, and the “three-line” menu icon at the right. In order for the breadcrumb trail not to overflow I added some server side checks on the depth of the trail, the length of the page title and the total length of the breadcrumb text. These either truncated the string on the back end, or added a css class which hid part of the string on the front end.

The client also wanted some badges overlaid on the slider, rather than being incorporated into the image. To achieve this in a way which didn’t break at smaller screen sizes, I added the badges as a 100% background image on a percentage-sized :after pseudo-element. The percentage sizing meant that the badge area would not be too large when the slider was scaled down for smaller screens, while the 100% background-size made the badges scale with the size of their pseudo-element container. Inserting these badges as CSS generated content also meant I didn’t have to try to modify the markup of the slider plugin.

The post Gas Detectors appeared first on Philip Allfrey.

A number of design elements required some CSS trickery. The diagonal-line borders were an obvious candidate for the CSS3 border-image property, but the cross-browser support isn’t fully there yet, plus for this border style it was difficult getting the lines from the corner sections to join up smoothly with the lines from the sides. So I went with a repeating image covering the parent div instead.

As part of the responsive design of the site, at smaller screen sizes the horizontal navigation is replaced by the word “Menu” and a downward pointing arrow (the same as is used to indicate a drop-down menu at desktop sizes.) At the smallest screen sizes only the arrow is visible. Clicking on this brings an off-canvas menu sliding in from the right.

Having different colours to the left and right of a centered header while allowing the viewport to be an arbitrary size posed another challenge. I solved this one with the judicious use of :before and :after pseudoelement and z-indices.

One last challenge related to the slider. The client wanted that striking first image to be shown for about 60% longer than the other slides. I achieved this by adding a callback function with a timeout to the after event in the slider API.

The post Hot As appeared first on Philip Allfrey.

Chris Morris designed the site as a long, scrolling page, with a number of different layouts in the sub-sections, plus another template for the second-level bio pages. Because of the complexity I took a desktop-first approach to implementing the design as a WordPress theme, then added the necessary changes to make it work on smaller screens. Many of the sections had a two-column layout, which lent itself to simply moving the second column below the first on smaller screens. Other sections had two-column tables which I again coded as <dl> to facilitate turning rows into paragraphs while maintaining semantic markup. The relative positions of the contact details and vCard/social media icons on the bio pages caused some difficulties; I ended up defining four  different layouts, depending on the screen size.

One technical challenge was the requirement to have a downloadable vCard for each team member. Existing plugins didn’t quite fit the bill so I rolled my own solution with a Custom Post Type, Bill Erickson’s Custom Metaboxes library and some of the code from the hCard & vCard Generator plugin. I also found the Waypoints jQuery plugin very useful to highlight the current section in the nav bar when scrolling down the page.

The post PR Partners appeared first on Philip Allfrey.

I adopted a mobile-first, responsive design strategy for this project, optimising the design for small screens first, then modifying the layout for the increased space on larger screens. The design was based on the website of a similar UK charity, Living Streets.

One of the challenges on the coding side was getting a header image for each page based on which section it was in. I implemented this by making setting a post thumbnail on a parent page for the section, which also acted as table of contents, and making all other pages in the section children of this page.

Graphic design work on this project was done by Isla Osborne.

The post Walk Auckland appeared first on Philip Allfrey.