New tweaks and features for the AudioIgniter plugin

New releases

It’s been a bit more than two and a half years ago where we set on a mission to build a great solution for everyone who’s looking to easily manage large collections of music tracks and showcase them in a beautiful player directly on their WordPress website. AudioIgniter, our free audio plugin for WordPress, is the culmination of our effort in doing just that and after all this time we’re really happy that the final product has been well received and is being used on thousands of WordPress installations.

We’ve been gathering a lot of feedback from AudioIgniter’s users and after some time triaging and prioritizing everything we’re starting to roll out all the exciting new stuff that you’ve asked about.

Both the free AudioIgniter plugin and its PRO upgrade have been updated today and here are some of the things we’re pushing on today’s release.

Read More

WordPress and CSS Grid: Building a flexible listing template (2, 3 or 4 columns)

Tutorials

Listing templates are every WordPress theme’s bread and butter. Every type of content needs to be displayed somehow and listing templates are the norm when it comes to showcasing content that falls within the same family, i.e. posts, pages, products, or any kind of other custom post types. We use them extensively here at CSSIgniter with a lot of options like headings, animations, post meta visibility, and more. Our main and most wanted option though is the column number setting, i.e. choosing in how many columns to split the cards each post is contained within.

Read More

How to use external React components in your Gutenberg blocks

Project Gutenberg, Tutorials

Gutenberg itself already exposes a lot of components ready to be re-used in our custom blocks. Most of these are located in wp.components and wp.blocks, and they include helpful building blocks for every Gutenberg block: Text Controls, Toggles, Tooltips, Icon Buttons, Tabs, and many many others. Gutenberg’s native component library pretty much has us covered on all basic cases, on every kind of basic UI control we might need but still there are cases where we might need to take it a step further on some kind of more specialized custom block.

Read More

A CSS style guide for the default WordPress media player

Tutorials

As theme authors we’re always striving to give our themes a unique design and marry them to the WordPress ecosystem by trying to provide a unified user experience, to the best possible extent. As WordPress comes with its own widgets, shortcodes, and other components, it’s important for any theme to take them into consideration and style them accordingly to its look and feel.

Most of WordPress’s native components (i.e. widgets or shortcodes) do not come with their own predefined styles (i.e. the Gallery shortcode), but other ones (especially JavaScript based ones) do so (i.e. the Audio player). In this post we’ll see how we can visually customize the default WordPress media player and make it feel at home on our theme.

Read More

Things to consider when updating a WordPress theme for Gutenberg

Opinions, Project Gutenberg, Tutorials

With Gutenberg getting close to being ready for a beta release and ultimately being merged into core WP, its API and patterns are at a level mature enough that theme authors (and theme shops!) can start planning ahead for the inevitable adoption of the new block system.

In this post we’ll see what the average theme author should have in mind when updating a theme for Gutenberg compatibility and ponder about the future in theme and plugin editing.

Read More

Importing Gutenberg core WordPress libraries as ES modules with webpack

Project Gutenberg, Tutorials

Gutenberg comes with a set of core libraries which are necessary for any kind of custom block development. Namely those libraries are:

  • @wordpress/components: Generic, reusable UI WordPress components
  • @wordpress/i18n: Internationalization utilities
  • @wordpress/element: Abstraction on top of React
  • @wordpress/date: Date formatting and manipulation utilities
  • @wordpress/blocks: Module providing utilities for registering and building blocks
  • @wordpress/data: Abstraction on top of Redux
  • @wordpress/editor: Module representing the WordPress Editor’s page
  • @wordpress/utils: Various generic utilities

To use them you need to include them as external script requirements to your final build by registering and enqueueing them, similarly to how you’d include any kind of script or style within WordPress.

Read More

Project Gutenberg – Technology decisions

Opinions, Project Gutenberg

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

Tutorials

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

Tutorials

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