A clean slate Wordpress application for wordpress. Based in sage and in Nextly
git clone https://github.com/pablorica/hmo
Cloning into 'hmo'...
remote: Enumerating objects: 182, done.
remote: Counting objects: 100% (182/182), done.
remote: Compressing objects: 100% (118/118), done.
remote: Total 182 (delta 53), reused 165 (delta 40), pack-reused 0
Receiving objects: 100% (182/182), 578.41 KiB | 16.53 MiB/s, done.
Resolving deltas: 100% (53/53), done.
app.setPublicPath('../');
...
app
.setUrl('http://localhost:3000')
.setProxyUrl('https://hmo.localhost')
.watch([
`resources/views`,
`resources/scripts`,
`resources/css`,
]);
The extension is pre-configured to support Vue 3 single file components (runtime only).
You can disable the runtimeOnly default by adding the following to your bud.config.js file:
app.vue.setRuntimeOnly(false);
The esm-bundler builds of Vue expose global feature flags __VUE_OPTIONS_API__ and __VUE_PROD_DEVTOOLS__ , they must to be defined.
You may want to enable the options API and disable the devtools:
app.define({
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: false,
});
Read more about setting up Vue in Sage.
$ cd [root_folder]/wp-content/themes/codigo
$ composer install --prefer-dist --optimize-autoloader
$ yarn install
➤ YN0000: · Yarn 4.2.2
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + @roots/bud-tailwindcss@npm:6.16.1, @roots/bud@npm:6.16.1, and 976 more.
➤ ...
➤ YN0000: · Done with warnings in 34s 39ms
$ yarn build
╭ sage [1a24dfc8407595fc] ./public
│
│ app
│ ◉ js/runtime.e97f88.js ✔ 1.22 kB
│ ◉ css/app.182da0.css ✔ 9.57 kB
│ ◉ js/app.c6fc6f.js ✔ 359 bytes
│
│ editor
│ ◉ js/runtime.e97f88.js ✔ 1.22 kB
│ ◉ css/editor.a5ebf3.css ✔ 2.94 kB
│ ◉ js/editor.7f4d85.js ✔ 1.67 kB
│
│ assets
│ ◉ fonts/Aeonik/Aeonik-Regular.c2876d.eot 98.41 kB
│ ◉ fonts/Aeonik/Aeonik-Bold.7fa62f.woff 48.8 kB
│ ◉ fonts/Aeonik/Aeonik-Regular.413ab3.woff 47.71 kB
│ ◉ fonts/Aeonik/Aeonik-Bold.f42057.woff2 36.44 kB
│ ◉ fonts/Aeonik/Aeonik-Regular.7ddd98.woff2 35.4 kB
│ … 11 additional assets not shown
│
╰ 3s 759ms 8 modules [0/8 modules cached]
If you have this error when running yarn, it means that React is not installed as a devDependency.
node:internal/process/esm_loader:42
internalBinding('errors').triggerUncaughtException...
Required package: react (via "react/package.json")
...
To fix this we need both react and react-dom as devDependencies.
$ npm install --save-dev react react-dom
Once installed, try again:
$ yarn install
The @roots/bud-preset-wordpress package comes with an editor integration. This library adds support for registering blocks, filters, formats, styles, variations and plugins.
All modules registered with this API are registered in production and development. In development additional hot module reloading support is added.
There are two steps:
- Making the root registration call for a given type or types.
- Adding modules to your application
In general, the above steps are the same for working with any of the supported APIs.
Open resources/scripts/editor.js and write the call roots.register.[type] , supplying the root directory where registrables are found.
For example, to register blocks in the application, we must add this call:
roots.register.blocks('@scripts/blocks')
/** Don't forget to accept any module updates! */
if (import.meta.webpackHot) {
import.meta.webpackHot.accept(console.error)
}
bud.js will look for modules in the directory indicated in the root registration call. Modules are named like *.[type].[ext].
The module should export the required settings and the name of the entity.
Modules can be created using either default exports or named exports. As a general rule, we will use default exports whenever possible.
For example, to add a block variation in the Group block and add a Grid css feature, we would create a file grid.variation.js in the resources/scripts/variations directory:
export default {
block: `core/group`,
name: 'group-grid',
title: `Grid`,
icon: 'grid-view',
description: `Arrange blocks in a grid.`,
attributes: {
layout: {
type: 'grid'
}
},
scope: [ 'block', 'inserter', 'transform' ],
isActive: (blockAttributes) => blockAttributes.layout?.type === 'grid',
}
Without this library, if you have modified the content of a block you are developing in the editor and then make changes to a block's code that cause it to render differently, WordPress may mark the block as invalid.
This library intercepts the module update and caches the state of the block outside of WordPress' state tree. It then completely unregisters the block and then re-registers it. If the block was selected before the module update, it also deselects and reselects it.
WordPress is now looking at a different situation: a newly registered block with newly registered state. There is no discrepency and so the block is not flagged as invalid.
This library also provides a more declarative way of registering modules with WordPress than the default API, and is less prone to understandable errors importing the wrong registration functions, etc.
Download the plugins folder from the staging server and copy it to the local installation.
Some images can be found in _images folder
- Copy the database from the _database folder and replace it in the local installation
cd wp-content/themes/wp-codigo-ltv/_database
mysql -u root -p talentstudio < talentstudio.sql
Enter password: rootGo to the web root folder and run:
wp search-replace 'talentstudio.codigo.co.uk' 'talentstudio.localhost' --dry-run --allow-root --all-tables
## If the results are ok, remove the flag '--dry-run'
wp search-replace 'talentstudio.codigo.co.uk' 'talentstudio.localhost' --allow-root --all-tables
---> Success: Made 705 replacements.Change database prefix using WP-CLI (if necessary)
WP-CLI Rename Database Prefix is an add-on to WP_CLI that allows you to change the database prefix.
wp package install iandunn/wp-cli-rename-db-prefix --allow-root`
wp rename-db-prefix 'hmosite_' --dry-run --allow-root`
## If the results are ok, remove the flag '--dry-run'
wp rename-db-prefix 'hmosite_' --allow-root`
*Warning: Use this at your own risk. If something goes wrong, it could break your site.
Before running this, make sure to back up your `wp-config.php` file and run `wp db export`.
Are you sure you want to rename hmo.localhost's database prefix from `wp_` to `hmosite_`? [y/n]
Success: Successfully renamed database prefix.* cd wp-content/themes/wp-codigo-ltv/_database
mysqldump -u root -proot talentstudio | gzip > wp-codigo-ltv.sql.gzSee the Sage installation documentation.
Install Sage using Composer from your WordPress themes directory
cd [root_folder]/wp-content/themes
composer create-project roots/sage codigo
You must build theme assets in order to access your site.
Run yarn from the theme directory to install dependencies
cd [root_folder]/wp-content/themes/codigo
yarn
Update bud.config.js with your local dev URL
app.setPublicPath('../');
...
app
.setUrl('http://localhost:3000')
.setProxyUrl('https://wordpress.localhost')
.watch([
`resources/views`,
`resources/scripts`,
`resources/css`,
]);
Compile assets
yarn build
...
╭ sage [776635f9d9aa3c07] ./public
│
│ app
│ ◉ js/runtime.e97f88.js ✔ 1.22 kB
│ ◉ css/app.194f0a.css ✔ 5.35 kB
│ ◉ js/app.c6fc6f.js ✔ 359 bytes
│
│ editor
│ ◉ js/runtime.e97f88.js ✔ 1.22 kB
│ ◉ css/editor.ef46db.css ✔ ø
│ ◉ js/editor.8c1474.js ✔ 1.67 kB
│
╰ 2s 256ms 8 modules [0/8 modules cached]
✨ Done in 5.80s.
See the Acorn installation documentation.
Sage requires Acorn but doesn't ship with it included. This is to give you the flexibility to include it in a way that works best for your environment. There's a few different ways to install Acorn.
cd [root_folder]/wp-content/themes/codigo
composer require roots/acorn
Acorn has a function that should be added to the scripts section of your composer.json file for the post-autoload-dump event. To automatically configure this script, run the following command:
$ wp acorn acorn:init
Sage is ready to be used in your Wordpress installation. Go to the CMS and select the Sage theme.
clear
cd [root_folder]/wp-content/themes/codigo
yarn watch
Development URL:
Defined in /bud.config.js
...
app
.setUrl('http://localhost:3000')
.setProxyUrl('https://wordpress.localhost')
.watch([
`resources/views`,
`resources/scripts`,
`resources/css`,
]);
...
clear
cd [root_folder]/wp-content/themes/codigo
yarn build
Localhost URL:
Defined in /bud.config.js
[root_folder]/wp-content/themes/codigo/tailwind.config.cjs
[sage] [@roots/bud-tailwindcss] › ✖ ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
Solution: Change file extension
[root_folder]/wp-content/themes/codigo/tailwind.config.js ---> [root_folder]/wp-content/themes/codigo/tailwind.config.cjs
[root_folder]/wp-content/themes/codigo/resources/styles/app.css
[root_folder]/wp-content/themes/codigo/resources/styles/editor.css
Sage includes an empty resources/fonts/ directory for you to use for any fonts you want to use in your theme.
The Sage extension in jsconfig.json also contains a @fonts alias that can be used to reference assets in the fonts/ directory.
Read more about setting up fonts in Sage.
ACF Composer is the ultimate tool for creating fields, blocks, widgets, and option pages using ACF Builder alongside Sage 10.
See the ACF Composer installation.
$ composer require log1x/acf-composer
Start by publishing the config/acf.php configuration file using Acorn:
$ wp acorn vendor:publish --tag="acf-composer"
If you have this warning
INFO No publishable resources for tag [acf-composer].
try running this command first
$ wp acorn package:discover
INFO Discovering packages.
nesbot/carbon ......................................................... DONE
nunomaduro/termwind ................................................... DONE
roots/sage ............................................................ DONE
And try again:
$ wp acorn vendor:publish --tag="acf-composer"
INFO Publishing [acf-composer] assets.
Copying file [vendor/log1x/acf-composer/config/acf.php] to [config/acf.php] ............. DONE
To create your first field group, start by running the following generator command from your theme directory:
$ wp acorn acf:field Example
This will create src/Fields/Example.php which is where you will create and manage your first field group.
Sage Directives adds a variety of useful Blade directives for use with Sage 10 including directives for WordPress, ACF, and various miscellaneous helpers.
$ composer require log1x/sage-directives
WP_Query
@query initializes a standard WP_Query as $query and accepts the usual WP_Query parameters as an array.
@query([
'post_type' => 'post'
])
@posts
<h2 class="entry-title">@title</h2>
<div class="entry-content">
@content
</div>
@endposts
@field
@field echo's the specified field using get_field().
@field('text')
[root_folder]/wp-content/themes/codigo/public
Copyright 2023 Codigo Wordpress Theme released under the MIT license.
We use SemVer for versioning. For the versions available, list of tags can be found in this page.