PHPackages                             vincit/wordpress-theme-base - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. vincit/wordpress-theme-base

ArchivedWordpress-theme

vincit/wordpress-theme-base
===========================

0.2(7y ago)6422411[7 issues](https://github.com/Vincit/wordpress-theme-base/issues)GPL-2.0PHP

Since Oct 5Pushed 7y ago7 watchersCompare

[ Source](https://github.com/Vincit/wordpress-theme-base)[ Packagist](https://packagist.org/packages/vincit/wordpress-theme-base)[ RSS](/packages/vincit-wordpress-theme-base/feed)WikiDiscussions master Synced 2w ago

READMEChangelog (2)Dependencies (1)Versions (5)Used By (0)

Vincit WordPress theme base
===========================

[](#vincit-wordpress-theme-base)

Bleeding edge starter theme.

Features
--------

[](#features)

### Theme features

[](#theme-features)

- Templates
- Pagebuilder, powered by [ACF](https://www.advancedcustomfields.com/resources/flexible-content/)
- Cleaner menus that are accessible
- Automatic editor stylesheet
- (Multilingual) options page support
- Polylang support with fully controllable string translations from the admin
- Automatic asset manifest handles asset cachebusting and delivers latest assets

### Developer features

[](#developer-features)

- Current environment is listed in window title
- Accessible custom radiobuttons and checkboxes
- Works with React (out-of-the-box, has demos)
- Modern JavaScript support
    - Built with Webpack 3
    - **CSS Hot Module Replacement** (HMR)
    - **JS Hot Module Replacement** (HMR)
    - ES2017+ (stage-2)
    - ESLint
    - Sourcemaps
    - Enforces case sensitive paths so build works on all platforms
- CSS Preprocessor support
    - \[×\] Preconfigured with Stylus
- PostCSS
    - \[×\] Autoprefixer
    - Flexbug fixer
    - \[\] Any [PostCSS plugin](https://github.com/postcss/postcss#plugins) that you add (autogenerated RTL?)
- Automatic image optimization using imagemin
- PHPCS, based on PSR2.

Screenshots
-----------

[](#screenshots)

Nope.

[View the demo instead](https://wordpress.vincit.io).

Requirements / dependencies
---------------------------

[](#requirements--dependencies)

- PHP 7
- Composer
- Node 6 (preferably latest)
- npm 5

Optional:

- [aucor/wp\_query-route-to-rest-api](https://github.com/aucor/wp_query-route-to-rest-api) for sample widgets
- [ACF](https://advancedcustomfields.com) for options page and pagebuilder support

The theme will fail with anything less than PHP 7, but making it PHP 5 compatible shouldn't be too hard, just fix the errors as they appear.

Things to keep in mind
----------------------

[](#things-to-keep-in-mind)

Webpack-dev-server will proxy your WordPress installation, and serve it through localhost:8080. WordPress doesn't know anything about this, and it will continue to output links with the original domain, so any forms or links do not work out of the box. The theme will enqueue a chunk of JS that will transform all links and forms that exist at DOMContentLoaded, so majority of links and forms will work. The adminbar is a prime example where links "do not work".

While the admin works (for the most part!) through wds, I wouldn't recommend using it. If you want to keep the admin bar visible while you develop the site, simply login twice. Once at , and once at .

**Why not?**

You *WILL* run into problems. Two examples from JavaScript console:

> Uncaught DOMException: Failed to execute 'replaceState' on 'History': A history state object with URL '[https://wordpress.local/wp-admin/post.php?post=439&action=edit](https://wordpress.local/wp-admin/post.php?post=439&action=edit)' cannot be created in a document with origin '' and URL '[https://localhost:8080/wp-admin/post.php?post=439&action=edit&message=6](https://localhost:8080/wp-admin/post.php?post=439&action=edit&message=6)'.

> Access to Font at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.

CORS isn't a problem normally, as we set `header("Access-Control-Allow-Origin: *");` to any request that's coming from wds,but the font in question isn't going through wds.

You're going to have a very bad time if you ignore this. If it's not a direct error, it's going to be a badly coded plugin that's going to cause it.

Usage
-----

[](#usage)

Clone the theme or install it with the installer that ships with [Vincit/wordpress](https://github.com/Vincit/wordpress). Composer is also an option.

```
git clone git@github.com:Vincit/wordpress-theme-base.git themename

# OR (with first vagrant up if using Vincit/wordpress)
# Runs automatically. Answer yes to the question when prompted.

# OR (Vincit/wordpress installer)
./install # Follow the instructions

# OR (composer)
composer require vincit/wordpress-theme-base # append dev-master to get the latest version (potentially unstable)
```

Install dependencies:

```
npm install

```

### If you installed manually (and not with the installer)

[](#if-you-installed-manually-and-not-with-the-installer)

Webpack requires some information from your setup. Mainly the URL of the site, and path to your theme. Open `package.json` and change `publicPath` and `proxyURL` to correct values.

Start watching for changes:

```
npm run watch # or npm run start, but webpack-dashboard is buggy at the moment

```

Find & replace at least these strings: `wordpress-theme-base` => ???

`WordPress theme base` => ???

```
find . -not -path "./node_modules/*" -type f -name "*.*" -exec sed -i'' -e 's/wordpress-theme-base/your-desired-slug/g' {} +
find . -not -path "./node_modules/*" -type f -name "*.*" -exec sed -i'' -e 's/WordPress theme base/Your theme name/g' {} +

```

Templating
----------

[](#templating)

Most people seem to start building themes using "the underscores" way:

```
/* Start the Loop */
while ( have_posts() ) : the_post();

  /*
   * Include the Post-Format-specific template for the content.
   * If you want to override this in a child theme, then include a file
   * called content-___.php (where ___ is the Post Format name) and that will be used instead.
   */

  get_template_part( 'template-parts/content', get_post_format() );

endwhile;

the_posts_navigation();
```

This is problematic in a few ways. One is scoping. `get_template_part()` uses require under the hood, but your variables are not in scope if you try to do this:

```
$variable = "string";

get_template_part("variableOutOfScope");
```

`$variable` is simply `null` inside variableOutOfScope. Things are different if you were to use require directly:

```
$variable = "string";

require "variableInScope.php"; // try echoing $variable!
```

But using `require` is frowned upon. The underscore way advices you to define your variables as globals.

Globals are a code smell, and you should avoid them whenever possible.

### Meet functions as templates

[](#meet-functions-as-templates)

By using namespaced functions as templates, we can avoid using globals, for the most part.

A function takes parameters, and returns a value. You can easily have default parameters and automatically override all of them should you want to.

Now that that's said, our template functions can't really return. Or they can, but the only use for returning is to stop the execution of the function, and thus to prevent the template from displaying at all. The template rendering itself is a side effect. When used through an output buffer (more on that later) the return value is discarded. But that's not a problem, templates shouldn't return a value. A function shouldn't do more than one thing, and our template functions thing is to print the template

In this theme, templates live in the `inc/templates` folder, and have the following structure:

```

   href="">