Importing Gutenberg core WordPress libraries as ES modules with webpack

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

How to implement Jetpack’s Infinite Scroll on your blog

So, you like how Facebook, Twitter, and other sites don’t break their content into pages. You’ve researched the technique and found out it’s elegantly named “infinite scroll”. Hopefully you did some reading and weighted the pros and cons for your own use-case. Finally, you decided that you want it on your WordPress blog. Of course, there are infinite solutions out there that will get your job done, but probably the easiest one is the one that Jetpack bundles. There are good chances that you theme already supports Jetpack’s Infinite Scroll, but you wouldn’t be reading this if it did, would you?

Read More

How to exclude certain posts or pages from your search results

The WordPress search results, by default, contain information from all available posts, pages, and custom post types. In some cases you might feel that you need to exclude certain items from the search results, because you feel that they contain irrelevant or confusing information. Today we’ll take a look at how we can achieve this.
Read More

How to deactivate unused WordPress widgets

We all know and love WordPress widgets, both core and third-party. They give us and our customers the flexibility to “build” specific areas of a website dynamically, displaying anything we choose from an array of available options. This fact was even more important before page builders became prevalent, and may be overshadowed by the coming of Gutenberg, but for the time being, widgets are an integral part of WordPress.

There are times however, that we may need to restrict the selection of available widgets, rather than expand it. Perhaps a widget is irrelevant, or it causes more problems that it solves. Instead of trying to warn or educate your users about potential issues, something they (and you) will ultimately forget, you may opt to completely remove the widgets in question.

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