Wordpress + Web Components = Awesome ✨

Wordpress is one of the most used content managers for a long time which offers great maturity and a great community around, with the passage of time many libraries and javascript frameworks have emerged that are modern development, leaving aside many Wordpress themes with jquery.

Nowadays there is a lot of talk about technologies that boost Wordpress such as JAMStack or Headless Wordpress to integrate it with Next.js, Nuxt.js or Sapper, and sometimes there are projects that by their nature are legacy or do not require a very large stack, for those cases you can easily use jquery and today I want to share one more alternative, which is the use of web components.

Web components have the peculiarity that they are indifferent to where they are used, whether within a javascript framework, some template engine such as Blade, Halm, etc., because the idea of web components to create custom html tags and therefore are used very similar as any html tag is used.

Here some examples:

<sp-icon size="s" name="ui:Magnifier"></sp-icon>
<smart-button class="material">Click Me</smart-button>
<emoji-rain drops="50" active></emoji-rain>

In Wordpress to loop a certain number of posts the loop is used, where the html code is placed to show the title or the highlighted image, the web components as mentioned above are treated like the other html tags, so the web components are can use within PHP.

<?php echo "<emoji-rain drops='50' active></emoji-rain>"; ?>

Here is a brief example of how to integrate a slideshow into the Wordpress loop.

Create the npm package

npm init - yes

Install development dependencies

npm i -D css-loader style-loader webpack webpack-cli

Install the macro-carousel library that will be used to make the slideshow.

npm i -D macro-carousel

In the src / index.js file import the library, no need to call additional functions.

import "macro-carousel";

Inside Wordpress in the index.php or any other template file include the following code:

<macro-carousel pagination loop>
   <?php if (have_posts()): while (have_posts()): the_post(); ?>
      <article class="slide">
       <figure>
         <?php the_post_thumbnail(); ?>
       </figure>
       <h3><?php the_title(); ?></h3>
    </article>
  <?php endwhile; endif; ?>
</macro-carousel>

The macro-carousel web component will create a slideshow and is used like any other HTML tag, the end result with a bit of styling is:

The code can be found on Github 😁