Hi. I'm a starter theme helping you getting started with a Wordpress/vue.js/SCSS Stack with parcel.
Gutenberg and custom blocks enable us to easly create complex content blocks where Vue.js can be very helpful. Let me help you implement vue.js in your custom Theme.
I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
My ultra-minimal CSS might make me look like theme tartare but that means less stuff to get in your way when you're designing your awesome theme. Here are some of the other more interesting things you'll find here:
- a
src
folder with SCSS/Vue.js Code and a package.json File - a custom block build with ACF Pro 5.8
- some base CSS from (Spectre.css)[https://picturepan2.github.io/spectre/] a lightweight, responsive and modern CSS framework
- a Vue.js page loader connecte to a Vuex store
- a Vue.js price calculator component as an example build with (vue-slider-component)[https://nightcatsama.github.io/vue-slider-component/].
- A just right amount of lean, well-commented, modern, HTML5 templates.
- A helpful 404 template.
- A custom header implementation in
inc/custom-header.php
just add the code snippet found in the comments ofinc/custom-header.php
to yourheader.php
template. - Custom template tags in
inc/template-tags.php
that keep your templates clean and neat and prevent code duplication. - Some small tweaks in
inc/template-functions.php
that can improve your theming experience. - A script at
js/navigation.js
that makes your menu a toggled dropdown on small screens (like your phone), ready for CSS artistry. It's enqueued infunctions.php
. - 2 sample CSS layouts in
layouts/
for a sidebar on either side of your content. Note:.no-sidebar
styles are not automatically loaded. - Licensed under GPLv2 or later. :) Use it to make something cool.
Download this theme from GitHub. cange the directory name to something else (like, say, megatherium-is-awesome
), and then you'll need to do a five-step find and replace on the name in all the templates.
- Search for
'wpvs'
(inside single quotations) to capture the text domain. - Search for
wpvs_
to capture all the function names. - Search for
Text Domain: wp-vuejs-starter
instyle.css
. - Search for
wp-vuejs-starter
(with a space before it) to capture DocBlocks. - Search for
wpvs-
to capture prefixed handles.
OR
- Search for:
'wpvs'
and replace with:'megatherium-is-awesome'
. - Search for:
wpvs_
and replace with:megatherium_is_awesome_
. - Search for:
Text Domain: wp-vuejs-starter
and replace with:Text Domain: megatherium-is-awesome
instyle.css
. - Search for:
_s
and replace with:Megatherium_is_Awesome
. - Search for:
wpvs-
and replace with:megatherium-is-awesome-
.
Then, update the stylesheet header in style.css
, the links in footer.php
with your own information and rename _s.pot
from languages
folder to use the theme's slug. Next, update or delete this readme.
Now you're ready to go! The next step is easy to say, but harder to do: make an awesome WordPress theme. :)
Good luck!
This Template has been strongly inspired by:
Using Parce In A Vue.js App
: https://scotch.io/tutorials/using-parcel-in-a-vuejs-appSpectre.css
: https://picturepan2.github.io/spectre/components/menu.htmlIntroducing ACF Blocks for Gutenberg
: https://www.advancedcustomfields.com/blog/acf-5-8-introducing-acf-blocks-for-gutenberg/