Typically, I use classes like .desktop, .tablet, and .mobile combined with media queries to switch between different-sized elements when building a website, in order to avoid loading the high resolution images on the handheld devices.
I find the class method a little tedious, and not as intuitive as I would like, so I’ve been looking for alternate ways to perform these transitions.
If your design is in a tiled layout, or you have a series of blog entries in rows and would like to show the “Read More” buttons below the lead-in text at the same height, this is a pretty straight-forward fix.
If you have transitioning content on your website, such as a Templated Page that will be launching at a certain date or time, you can setup a custom countdown landing container, and use a custom field to automatically update the content at a scheduled date and time.
Another way to style images dynamically based on window sizes is shown below.
If you’re using images that are set to a 2:1 ratio (where width is two times greater than the height), you can use the example below to dynamically scale the height of the containers as windows are loaded / resized.
If your Custom Post Types are not showing up in your archive.php or category.php templates (even with¬†‘has_archive’ => true enabled within the register_post_type function), you may need to do some additional theme adjustments!
Building custom menus and filters is unavoidable. If you’re not comfortable triggering the active item with jQuery to add an active class, you can find the current page ID, and use existing WordPress CSS classes to reapply styles already within your stylesheet.
Sometimes, when working with designers, the content of a multilingual website will end up on a single landing page. In this event, using suppress_filters to get_posts associated with the active language will provide posts in¬†both languages, and not provide the side-by-side translation effect desired.
I work with Gravity Forms, and Gravity Forms User Registration a lot, so being able to redirect users to a custom template instead of a front end user profile (such as Theme My Login) would be preferred.
With Gravity Forms, I’m able to enable custom notifications based on the fields that are updated.
I recently worked in a website that had multiple skins within a single domain. The different themes were controlled and activated by their related parent pages. I’ve already gone over how to add an ancestor class to the body, but I needed to add a couple additional features to this website as well.
Tribe Events Calendar is a great plugin, that has a lot of very simple queries you can use to create calendar feeds within your templates.
If you have an event on your website, and a calendar that’s launching before weeks (or even months) before the event is taking place, you can use a function to setup a start date for your calendar. The Calendar’s¬†default page¬†views (month, day, list) will load starting from the date entered in the function.
A deep¬†number of page levels¬†in a website can make navigation difficult for front end users. In addition to breadcrumbs, it is worthwhile to maintain your Top-Most Page Title in all areas to help your visitors find their way between the hierarchical sections of your site.
Sometimes Custom Post Types are built to organize and filter information, such as creating a Research archive or a Staff directory. ¬†That content is¬†meant to be seen on the front end in the single.php template.
However, when creating a Custom Post Type for a rotating Banner, or a single page listing all of your Testimonials, the single.php template is moot.
If you’re working with WooCommerce add-ons (e.g., Bundles), use this function to cycle between different WooCommerce Product Types, in order to display queries and functions in specific templates (operates similar to an if statement).
Coupon Creator Pro is a great plugin to highlight offers and deals available to your customers on your website. The coupons come with different themes available, allow for both image and text injection, and are responsive, as well as printable.
The default placeholder image in WooCommerce does not adjust¬†according to image changes made within the Settings (e.g., changing the number of columns from 4 to 3 will result in a smaller placeholder image).
The Advanced Custom Field plugin’s Taxonomy field type has been giving me a hard time for several hours now … This plugin is so versatile, that there¬†is simply not enough documentation on the website, despite all of the amazing work done by Elliot Condon.
Clients like to keep themselves organized, and will often send all of their images inside of a Word document, or PowerPoint presentation, to keep the image coupled with the instructions for their web updates.
Re-skinning live sites can be tricky and sometimes unavoidable.
I use the following snipped to target updated versions of stylesheets, headers and footers, and lock them to my user ID so all of the changes are only visible to myself until the theme is ready to launch.
By default, Category templates bring in the words “Category Archives:” ahead of the category name with most themes, and this isn’t always ideal. When theming Archives separately from Category pages, it’s necessary to target the title of Category to edit the default text.
Creating dynamic layouts can make it easier on your clients (and yourself) to update your content without worrying about checking the front end to make sure the selections are correct, or having to update various posts / content areas following updating new content.
The following example shows how to add a colour class to your container using the_loop, php and with some CSS adjustments, possibilities are endless!
Discovered this handy cheat-function over here¬†and it was just what I have been looking for to help me add further customization to all the Custom Post Types that are created by Plugins upon installation.
Sometimes it’s necessary to further customize archived data into sortable sections (organized by date, like below, or category), so it’s easier for visitors to find what they’re looking for at-a-glance.
A useful addendum to queries when multiple products / post types are going to be featured with the same / similar names. This will prevent the need to add alphanumeric differential identifiers to the titles, and the links, slugs or categories assigned to the content can be used to divide up the information accordingly.
Sourced here, this snippet can be inserted within single.php and used to isolate the previous and next navigation links when working with Custom Post Types that have multiple Taxonomies and Terms to allow for more streamlined navigation:
A recent WooCommerce update broke the shop layout, but wasn’t throwing any errors. Product thumbnails, Prices and Add to Cart buttons all vanished, but were still available on the individual product pages.
Here is the code that I’ve been waiting for!! Found here, you can use this to link to the default wp-login.php page using an image, or customize it further to take advantage of the pages generated by plugins like TML.
Sometimes transitional content is used in one area of a website, like to display hours in a Header or Sidebar. Instead of having the client (or yourself!) update this content every day, get your code to update it for you when the weekdays change.
Facebook has partnered with McAfee to keep malware, spam, and offensive content off of their social network, and as such, have begun blocking websites and IP addresses that turn up malicious results, or are reported by users.
If the BuddyPress plugin Activity Stream is not showing all updates / content that is being published, check if the site is set to Discourage Search Engines under Settings > Reading in the WordPress backend.
These handy two lines of code can prevent the Plugins submenu from being accessed within WordPress.¬†All users (including Administrators) will no longer have permission to add, edit, or see the update notifications for installed Plugins.
Comes in handy for sites run by Clients that have a lot of plugin customization.
Targeting the mailto field is pretty rudimentary, but you can keep yourself organized if you use such items like the cc-field, and the subject line in order to keep track of where your visitors are when they contact you.
Sometimes it’s handy to utilize the same features that are available within the Posts area, inside of your Pages. Adding the Excerpt to the Pages, provides you with an additional, native field to pull data from and take advantage of when building your WordPress website.
Using large sliding¬†banners with linked content can be both a blessing and a curse. ¬†This adds a beautiful level of style and information to the site, but also takes up a lot of space, and provides a lot of repetitive information that can be difficult for new visitors to navigate.
I recently needed to create a dynamic table for a visual aesthetic. A few background images had been strategically placed alongside the content, and the grid provided structure and flow. ¬†Using this bit of code, I was able to target a div to populate an empty table, and style it accordingly.
Sometimes you don’t want your clients to know that updates are needed. When Woocommerce is paired with powerhouse plugins like WPML, older versions can be difficult to update, and you should tread lightly: with backups.
Embedded fonts that are being loaded from a server / another website, or file, will sometimes load after the main css file, and after the page is loaded, resulting in a weird display. Typekit fonts can be loaded faster using a timeout script.
When Themes are upgraded in Shopify, script libraries are upgraded. Depending on the level of expertise of the individual that developed your Theme, this means errors can arise. If your mobile navigation stops working, you may need to find your scripts.js.liquid file and look for errors in syntax and coding. Check your console to be sure which file you should edit, and always make a back up!
Ever been hacked or had a change of staff and completely lose access to the website you’ve put so much time and effort into? The following code goes a long way, if you drop this into your sql through phpMyAdmin, this will create an Administrator account, granting you access to your website once again.
Sometimes fixing iframe and YouTube embed issues can be as simple as adding wmode=transparent to the iframe src string <iframe scr”http://youtube.com/embed/link_to_video” wmode=”transparent”></iframe> Other times, you may need to change this to wmode=”Opaque” If you’re still experiencing issues with drop down menus appearing behind iframes, and z-index is being ignored, the following code will come in handy. ¬†
IFrames can be difficult to customize. ¬†If you want to add a border, or a box shadow to them, it can be simpler to do so if you wrap them in a parent div, and apply the necessary changes to this container. ¬†Border-radius will work with a parent div, when you couple it with overflow: hidden; forcing the clipping of the contained elements, and giving the illusion of the effect you’re looking for.
The Archives.php and Archive.php templates are setup to pull in certain data within their loops, and these can be difficult to adjust. I found the below template for Thematic here and have used this to style main and monthly archive feeds in the past.
Menus can be tricky. Rather than being locked into the just using menu sort order, or alphabetical order, combine the two using wp_list_pages(); You can style the drop downs to respond on hover using CSS.
When working with background images, parallax websites, or full width and height sliders, you might find the need to have a div adjust to be the full width or height of the viewport automagically. This code will help you find your way. Sourced from the comments on css-tricks.com
Often, the WordPress Plugin Multiple Post Thumbnails is used within the page.php and single.php templates, and few conflicts arise. If you’re calling your thumbnails within header.php, footer.php or functions.php, the following code will help sort out issues with images not displaying via the simpler methods.
Working with Shopify, I found this bit of code, and was able to setup auto-switching full screen background images. You can use this to setup multiple background images that will change over automagically on page load.
A handy WordPress function to allow you to filter by child pages for great functionality. ¬†Please see reference and author here. Function and simple example usage. Please see website of Kevin Leary for greater functionality and more complex usage.
I’ve run into problems several times where exclude and include do not work, or work selectively, and as a result, either all of the posts are included, or none of them are. I’ve found an answer that works both inside and outside of the loop.
Background-Attachment: Fixed does not work in Safari when using multiple background images in Safari. ¬†The images will disappear when the browser is resized, or accessed¬†in mobile device. ¬†Background-Attachment: Fixed will render the images properly in Chrome, and Firefox, but even when coupled with Display: Block, and Overflow: Hidden to force images to appear, will not work properly in Safari.
The Photoshop Scratch Disk is your hard drive where Photoshop is installed. Photoshop uses your hard drive as temporary “swap” space, or virtual memory, when your system does not have enough RAM to perform an operation. This can become “full” if Photoshop crashes and/or several temporary files have been created by Photoshop and not cleared out properly.