Landing website pages have been all the rage for a while now and although many of them come with a great design they can also come with a caveat: long body heights. This usually means that after users are done going through our awesome content they are forced into a scrolling sprint back to our website’s header in order to examine more navigation options (which also kinda means our landing page should have more interesting calls to action, but that’s a different story).

One way to mitigate this terrible experience and improve our website’s user friendliness would be to make our header sticky (which we’ll cover in another tutorial), but that’s something that’s not always desirable. Another way, one which we’ll cover in this tutorial, is to add a so-called “back to top” button which stays fixed as we scroll down and smoothly transitions us back to the very top when it gets clicked. This kind of “scroll to top” behavior is so necessary in some use-cases that iOS even has it embedded as a feature in pretty much the core of the OS (by tapping the status bar).

Let’s go ahead and see how simple it is to add this kind of functionality to any website with a simple button.

Read More

Are you building a WordPress theme? Perhaps you are extending a theme by working on a child theme? Or maybe, you are building a WordPress plugin that has something to do with the site’s presentation. Chances are, you need to add options into the WordPress Customizer. Options in the customizer are added as controls.

Read More

Global, site-wide website notices are a pattern as old as websites themselves, and although they are being abused all the time they do have valid use-cases and are extremely useful in situations where we absolutely need to notify our visitors of something important, e.g. a great deal (as we do here at CSSIgniter), any kind of maintenance message or even the EU cookie law notice!

When the need rises for such functionality the first thing on anyone’s mind would probably be to have a look at the WordPress plugin repo for any suitable plugins, and, well, although it’s justified (there are a ton of plugins for this kind of thing) there’s no reason not to implement it ourselves since it’s so easy and fun.

Without any further ado, then, let’s see how we’d go about building a simple, global, dismissible site-wide notice bar.

Read More

Page templates are a great way to present your content in a way that differs from the rest of your WordPress site. For example, a page template might present a page without a sidebar, or display your blog posts in a categorized fashion, which then you can assign as your website’s front page. Most themes nowadays provide quite a selection of page templates, but yours might not, or it might not quite do what you need it to do. Let’s see when and how you should create a custom page template.

Read More

It’s been a few years now where nobody even thinks about making a website that’s not responsive and mobile friendly. Mobile phones and tablets have become the primary means of accessing the web for the majority of people, and providing a great experience for mobile users has become a real responsibility for every website owner.

After the website’s content itself, probably the most crucial component of any website is its main navigation as it is in many cases the only way users can navigate around a website and discover its offerings.

While a navigation menu for desktop views is arguably a solved problem and the best patterns have been concretely established for far more than a decade, we’re still not 100% percent clear on the truly best patterns for our mobile menus types, styles and UX. The most popular patterns emerged a few years back, with the hamburger triggered menu being the most prevalent. On touch it usually reveals either a drawer (which is also the most popular approach and can be placed top, left, bottom or right), a dropdown, or an expanded list.

In this small tutorial we’ll see how easy it is to create a navigation menu which turns into a hamburger drawer mobile menu using the magnificent jQuery.mmenu plugin.

Read More

How long have you been craving for a text size setting on the default Text widget, or a background color on the Calendar widget? Did you know you could implement these yourself? And without modifying the core files? And without jeopardizing the update-ability of your website?

Yup! It can be done! Of course, some things are more easily done, and some things may be impossible to do at all. Let’s see however what is the general approach of actually doing it.

Read More

Did you know that when you’re using the search boxes on your WordPress site, you can narrow down the results by providing words that you don’t want included? That’s right! This method works both on the front end (theme-provided search bar, search widget, etc), as well as on the back end (post listing screens, etc), and is available since WordPress v4.4

Read More

So you are building a super duper cool plugin™ that, say, does something with widgets or shortcodes and you need to apply some CSS conditionally. No worries, that’s what wp_add_inline_style() is there for. But can you actually use it?

Read More