codebjorn / loki
WP Theme Loki
Installs: 2
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Type:wp-theme
Requires
- codebjorn/mjolnir: ^0.1.1
README
Loki, WordPress Theme Boilerplate
Loki is WordPress Theme Boilerplate using as a base Mjolnir Framework
If you think this approach is not working, please open an issue and let's discuss :)
Pre-Requirements
Before we proceed further, I suggest you to read documentation for:
- Mjolnir Framework.
- Laravel Blade
- Laravel Mix
Requirements
Requirements for this boilerplate are:
- PHP 7.1+
- Composer
Installation
You can install framework via composer:
composer create-project codebjorn/loki
Structure
Structure of boilerplate is:
|-- app // Folder where is stored all Facades,Services,Providers
| |--Facades // Folder that stores all facades used to get utilities & services from container
| |--Providers // Folder that stores all your providers
| |--App.php // Container file
| |--Helpers.php // File that store all functions need it for project
|-- assets // Folder where all builded assets are stored
|-- blocks // Folder where are stored all Gutenberg blocks
| |-- <blockFolder> // Folder with block
| |-- components // Folder where are stored all js components for Gutenberg
| |-- data // Folder where are stored json files such as attributes
| |-- view // Folder where is stored blade files for render
| |-- index.jsx // Block configuration file
| |-- blocks.js // File where is imported all blocks
| |-- blocks.php // File where are registered blocks using Block Facade
|-- config // Folder where are stored configurations
|-- hooks // Folder where is stored all hooks
| |-- actions.php // File where are created new action hooks using Action Facade
| |-- filters.php // File where are created new filter hooks using Filter Facade
|-- resources // Folder that stores all js,scss,views elements of theme
| |-- js // Folder for js of theme
| |-- scss // Folder for scss of theme
| |-- views // Folder for blade templates
|-- templates // Folder where default wordpress templates are stored
|-- vendor // Composer packages folder
|-- functions.php // Default WP Functions.php
|-- webpack.mix.js //Laravel Mix configuration file
How all work
Add service into hook
- Create a new namespace in
app
folder and add new php service class - Resolve this service using Service Provider in
app/Providers
folder, you can add it toAppServiceProvider.php
or create a new provider and add it toconfig/app.php
to load. More info about service providers - After resolving a service you can inject it in
another service or add it into hook in
hooks
folder, for example action hook:
Action::add('wp_enqueue_scripts', [\Namespace\Setup\Enqueues::class, 'front']); Action::add('admin_enqueue_scripts', [\Namespace\Setup\Enqueues::class, 'admin']);
Work with WordPress templates
By default, all WordPress templates are stored in templates
folder, you can change folder or disable this feature
in config/theme.php
.
To use templates and laravel blade engine we can use templates as kind of controller that will store all data that we need but render will make template engine, for example:
- Let's say we want to create/update template
single.php
, we create a new filetemplates/single.php
<?php $post = \Mjolnir\Utils\Post::current(); $postTitle = $post->getTitle(); $postContent = $post->getContent(); \Loki\Facades\View::render('single', ['title' => $postTitle, 'content' => $postContent]);
- We create blade file in
resources/views/single.blade.php
@extends('layout.app')
@section('content')
<h1>{{$title}}</h1>
{!! $content !!}
@endsection
Create Gutenberg Blocks
All blocks are stored in blocks
folder. For creating a new block we will need:
- Create a folder inside
blocks
folder - Create
index.jsx
in your new folder
import {__} from '@wordpress/i18n'; import {Fragment} from '@wordpress/element'; import Controls from "./components/controls"; import Editor from "./components/editor"; import Inspector from "./components/inspector"; import * as attributes from "./data/attributes.json"; const {registerBlockType} = wp.blocks; export default registerBlockType('namespace/name', { title: __('Name', 'name'), attributes: attributes, edit: props => { return ( <Fragment> <Controls {...props} /> <Editor {...props} /> <Inspector {...props} /> </Fragment> ); }, save() { //gutenberg will save attributes we can use in server-side callback return null; }, });
- Create all components inside components folder:
controls.jsx
- Toolbar of block
import {BlockControls} from '@wordpress/block-editor'; function Controls() { return ( <BlockControls> </BlockControls> ); } export default Controls;
editor.jsx
- Main area of block
function Editor({attributes, setAttributes}) { console.log(attributes) return ( <div className="name"> <h1>Hello, {attributes.title}</h1> </div> ); } export default Editor;
inspector.jsx
- Sidebar panels
import {__} from '@wordpress/i18n'; import {InspectorControls} from '@wordpress/block-editor'; import {PanelBody, PanelRow} from '@wordpress/components'; function Inspector({attributes, setAttributes}) { return ( <InspectorControls> <PanelBody title={__('Name')}> <PanelRow> </PanelRow> </PanelBody> </InspectorControls> ); } export default Inspector;
- Create
data
folder and new attributes.json file:
{ "classNames": { "default": "hero", "type": "string" }, "title": { "default": "This is title", "type": "string" } }
Also, you can use data folder to store and other json folder that can be used in you block.
- Create
view
folder where will be stored blade templates for your block, default one isblock.blade.php
:
<div class="{{$attributes->classNames}}">
<h1>{{$attributes->title}}</h1>
@include('hero.view.partials.element')
</div>
- Import you block in main
blocks.js
- Add block in main
blocks.php
using block facade:
\Namespace\Facades\Block::add('namespace', 'name');
Testing
//TODO
Changelog
Please see CHANGELOG for more information what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security
If you discover any security related issues, please email quotesun@gmail.com instead of using the issue tracker.
Credits
License
The MIT License (MIT). Please see License File for more information.