pixelstudio/pixel-wp-theme

WordPress boilerplate theme built with Gutenberg and good-old widgets

Maintainers

Details

github.com/pixelstudio-id/pixel-wp-theme

Homepage

Source

Installs: 15

Dependents: 0

Suggesters: 0

Security: 0

Stars: 2

Watchers: 0

Forks: 2

Language:Sass

Type:wordpress-theme

6.5.0 2024-07-17 03:58 UTC

Requires

MIT b98fbf226d6995520f6893e67c16742bcfc502e7

themetemplatewordpress

This package is not auto-updated.

Last update: 2024-11-21 05:18:24 UTC

README

A WordPress starter theme built with Gutenberg and good-old widgets.

Stylesheet is compiled with Node Sass. Visit that link to know how to compile Sass.

REQUIREMENTS

  • PHP 8.2 (at least 7.4)
  • WordPress 6.4 (at least 6.2)
  • Node 20.15.1

TABLE OF CONTENTS

  1. Installation
  2. Compiling Sass
  3. Useful Links

Installation

MANUAL

  1. Copy this repo to your WordPress theme directory.
  2. Download Pixel WP Library plugin and put it into your Plugin directory.

WITH COMPOSER

Available in Packagist under the name pixelstudio/pixel-wp-theme.

This is our workflow for starting a new project:

  1. Create a directory, put WP Core files in it.

  2. In the root path (where wp-config resides), create new file named composer.json. Put this code below:

    {
  "name": "pixelstudio/new-site",
  "description": "Run the command `composer update` to download all plugins and themes.",
  "authors": [
    { "name": "Pixel Studio", "email": "info@pixelstudio.id", "homepage": "https://pixelstudio.id" }
  ],
  "require": {
    "pixelstudio/pixel-wp-theme": "~5.9.0",
    "pixelstudio/pixel-wp-library": "~5.9.0"
  },
  "require-dev": {},
  "suggest": {},
  "repositories":[
    { "type": "composer", "url":"https://wpackagist.org" }
  ],
  "autoload": { "psr-0": { "Acme": "src/" } }
}

  3. Run the command composer update in that directory.

  4. After first run, rename pixel-wp-theme so it won't be overriden the next time you run composer update. Also remove pixelstudio/pixel-wp-theme in your Composer JSON.

Compiling Sass

  1. Install Node JS if you don't have it yet.
  2. Run npm update in this directory to download all modules.
  3. Open webpack.config.js and change the variable localDomain to fit your localhost domain.
  4. Run npm run dev to watch the Sass files and launch Browser Sync that refreshes the CSS everytime you save.
  5. Before pushing to live, run npm run prod to minify all CSS and JS.

Vue Integration

In PixelStudio, we often uses Vue for interactive elements. Read this guide on our wiki for how to set it up.

Used In

Here are some websites that uses this theme: