PHP Themes Aren't Dead

blog
1
3 Likes
2

Alpine.js is often part of the projects you work on? Why?

At first glance it seems like a very light weight Vue… that is promising.

3

Alpine.js is great. Why do I use it? Because I want to be able create dropdowns, modals, tabs, notifications, add animations, handle interactive states, etc. without having to write much (if any at times) JavaScript. There’s lots of functionality available out of the box, and a good amount of community plugins that showcase how to do various things. The front-ends of most of the WordPress sites that I build don’t need to be SPAs, so Alpine.js is a perfect fit.

Here’s an example of a contact form that uses Alpine.js to handle the loading and error states. Of course there’s lots of ways you can accomplish this, and you can do it without Alpine, but I’m a fan.

<!-- alert, input, and textarea are Blade components -->
<form x-data="contactForm()" @submit.prevent="submitForm" id="contactForm">
  <div x-show="error">
    <x-alert type="warning">
      <p>Error message</p>
    </x-alert>
  </div>
  <div x-show="sent">
    <x-alert type="sucess">
      <p>Success message</p>
    </x-alert>
  </div>

  <x-input name="name" label="Name" placeholder="Your name" required />
  <x-input name="email" label="Email" placeholder="your@email.com" type="email" required />
  <x-textarea name="message" label="Message" placeholder="" required />

  <x-button 
    id="contactFormBtn" 
    class="disabled:cursor:not-allowed"
    x-bind:disabled="loading"
  >
    Message us
  </x-button>
</form>

<script>
  function contactForm() {
    return {
      loading: false,
      sent: false,
      error: false,
      submitForm() {
        this.loading = true;
        fetch('/wp-json/forms/v1/contact', {
          method: 'POST',
          body: new FormData(document.getElementById('contactForm'))
        })
        .then(({ status, json, ok }) => {
          this.loading = false;
          switch (status) {
            case 200:
              this.sent = true;
              break;
            default:
              this.error = true;
              this.loading = false;
              break;
          }
        });
      },
    };
  }
</script>
5 Likes
4

Another fan of alpinejs here. It’s just easy, without friction and real world oriented. I still don’t know vue but thanks to alpine I feel I can learn it and use it anytime for bigger applications.

1 Like
5

Thanks a lot @ben for putting this voice for PHP based themes out. I hope that there’s a large enough group of developers that like to work this way to create great custom websites.

Bleech, the developers of a great Wordpress starter theme called Flynt, have actually also talked about this recently in their podcast episode Understanding WordPress Starter Themes.

I think it will be important going forward that we become more vocal in showing that there is a very active community of devs that use the Wordpress platform to build other themes apart from block themes.

2 Likes