studio-up

Client custom theme

Quickstart

Installation

1. Move this folder to wp-content/themes in your local development environment
2. Run npm install && npm run dev in this folder
3. Activate this theme in your local WordPress installation

Using WordPress Multisite? Don’t forget that your theme must first be enabled via the Network Admin in order to be available for activation on a network site.

Development

4. Run npm run watch
5. Add Tailwind utility classes with abandon

Deployment

6. Run npm run bundle
7. Upload the resulting zip file to your site using the “Upload Theme” button on the “Add Themes” administration page

Or deploy with the tool of your choice!

Full Documentation

Fundamentals

• Installation
  Generate your custom theme, install it in WordPress and run your first Tailwind builds
• Development
  Watch for changes, build for production and learn more about how _tw, WordPress and Tailwind work together
• Deployment
  Share your new WordPress theme with the world
• Troubleshooting
  Find solutions to potential issues and answers to frequently asked questions

In Depth

• Using Tailwind Typography
  Customize front-end and back-end typographic styles
• JavaScript Bundling with esbuild
  Install and bundle JavaScript libraries (very quickly)
• Adding custom fonts Host your fonts yourself or use a third party—and then add those fonts to your WordPress theme
• Linting and Code Formatting
  Catch bugs and stop thinking about formatting
• Keeping your theme up-to-date How to update (and whether or not you should)

Extras

• On Tailwind and WordPress
  Understand how WordPress and Tailwind work together
• Styling HTML from outside the theme Work with WordPress core, plugins and JavaScript libraries
• Managing Styles for Custom Blocks
  Learn strategies for using Tailwind in theme-specific custom blocks
• Setting Up Browsersync
  Add live reloads and synchronized cross-device testing to your workflow

Lando file

name: studio-up recipe: wordpress config: webroot: wordpress php: '8.3' proxy:
theme: - localhost:3000 services: theme: type: node:20 services: ports: - 3000:3000 tooling: yarn: service: theme