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.
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.
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 😁
Level up every day