Project Gutenberg – Technology decisions

Gutenberg, the new and modular editing experience for WordPress, has been in rapid development throughout the past year and will soon arrive to our WordPress installations. Gutenberg will be released along with WordPress 5.0 (which is the next major release), and although no official date has been set for that, it’s safe to assume that it’s not very far away especially judging by the remaining features for MVP completion.

Read More

How we do automated quality assurance on more than a hundred WordPress theme demos

Theme quality is something that’s not negotiable here at CSSIgniter. For over five years now we carry the promise of new theme releases month to month for our customers and we focus all of our efforts in maintaining the high quality standard we’ve set for them ever since we began this awesome endeavour. Five years in now and except for quality we’ve now found ourselves to also have to deal with another (a bit spookier) word: quantity. At the moment of this writing, our theme catalogue lists 89 premium and free WordPress themes, not counting the ones on Themeforest or our premium plugins or awesome Elementor landing pages.

Read More

WordPress CSS Customizer – Using the DevTools and CSS to customize your theme – Practical examples

WordPress themes nowadays are usually packed with appearance options which allow theme users to give a personal note of style to their websites and modify them at their will, without touching a single line of code.

Our themes here at CSSIgniter carry dozens and dozens of color and typography customizer settings and for the vast majority of use cases they are more than enough to completely change a website’s appearance. However, there are still times that we get support tickets requiring help on more involved customizations, and we deal that by providing custom styles for our users’ requests on a case by case scenario.

For a few versions now, the WordPress Customizer comes with a powerful native CSS editor which allows anyone to apply custom CSS styles on their WordPress website. This post is aimed at entry-level website owners who are curious enough to delve a bit more into browser developer tools and how to use them, along with the CSS editor, in order to customizer their WordPress theme beyond its delivered capabilities. Although I assume that basic browser developer tools familiarity exists, I’ll give a quick intro on them below.

Read More

Creating a simple WordPress blogging layout with CSS Grid and Flexbox

CSS has come a long, long way and throughout the very recent years has steadily matured to become more than a simple styling specification which required hacks for many complex (or simple) things. With constant improvements like the introduction of e.g. flexbox, custom properties, and more, the design developer’s life has become dramatically easier. One of the most recent additions into the language’s specification is CSS Grid, which aims to remove any layout limitations the language had before (even by flexbox).

Read More

How to create a custom color scheme for your WordPress theme using the customizer

Ever since WordPress version 3.4 it’s been extremely simple to add site settings to our websites with the Theme Customization API. Here at CSSIgniter it’s actually been a couple of years now where we’ve completely abandoned custom Theme Options pages in lieu of the Customizer, since the benefits are too many to pass: ease of use, consistent API, native look and feel, and live previews to name a few.

Read More

How we use Sass and Gulp in our WordPress theme & plugin development workflow

It’s been quite a while now since we’ve completely abandoned vanilla CSS for a CSS preprocessor (more than four years actually) and more specifically for Sass (with SCSS syntax). There are quite a few reasons why we did that, and the main one is improved DX (developer experience) along with easier plugin integrations.

Simply put, Sass used to be (and still is) a much more powerful language than vanilla CSS, especially if you’re concerned with older browser support (i.e… IE ¯\_(ツ)_/¯). I’ve found that the need for variables, conditionals, mixins, rule nesting, along with color functions and all the goodies a preprocessor comes with is much more apparent within the WordPress theming context where you wish to provide multiple color schemes for your theme or tame popular WordPress plugins to match your theme’s design and layout.

That said, I’m not here to sell you on CSS preprocessors right now, this piece is an overview on how we use Sass with Gulp in our theme and plugin development workflow, and how to incorporate the same workflow to your theme, if you so wish.

Read More

How to add a back-to-top button on your WordPress website

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