Code Monkey home page Code Monkey logo

timpress's Introduction

Timpress

A wordpress starter theme that uses timber for back-end and twig template engine for front-end

Screenshot

Requirements

Installation

Move the theme to your themes location and open terminal from that location and excute these two commands to install packages:

  • composer install
  • npm install

or you can use the theme installer from here

Usage

stylesheet and javascript

  • Creating files

    To start making custom stylesheet and javascript just navigate to assets/sass to create new sass file or to assets/js to create javascript file with ES6 syntax

  • Compiling assets

    • Edit the webpack.mix.js in the root directory of your theme to set your localhost URL and customize your assets.
    • npm run watch to start compile the assets in each save and change you do.
    • npm run dev to compile the assets without watching.
    • npm run prod to compile the release assets minified for production.

Wordpress hooks and filters

All the wordpress stuffs hooks and filters, etc.. are managed not inside functions.php they are inside providers has register method get called automatically.

For example to enqueue a new script or style just navigate to app/Providers/Enqueue.php and add content inside enqueue_scripts() and this last method will be called inside register method.

To create a new provider you have to navigate to app/Providers and make new file and name it as you want and add this content:

<?php

namespace Timpress\Providers;

class YouProviderName extends Provider {
  public function register()
  {
    // call wordpress action, hooks, filters, etc..
  }
}

then open app/config.php and register your provider by adding this line to setup/providers array:

'setup' => [
  'providers' => [
    ...,
    Timpress\Providers\YourProviderName::class,
  ]
]

MVC structure

  • Models

    Acctualy the models all handled by Timber you can check anything from the documentation.

  • Adding new controller

    To add new controller navigate to app/Controllers and make new file and name it as you want the add this content:

    <?php
    
    namespace Timpress\Controllers;
    
    class YourController extends Controller {
      // here content of the controller
    }
  • Create and render a view

    To add new view file navigate to assets/views and make new file and name it as you want with .twig extention and add content by extending existing files like:

    • extending the base twig file
      {% extends "partials/base.twig" %}
      
      {% block content %}
      
      {% endblock content %}
    • extending the main twig file
      {% extends "partials/main.twig" %}
      
      {% block content %}
      
      {% endblock content %}
      Lean more about twig templating

    To render the file you've created you need to add method to your controller that do this like this example:

    <?php
    
    namespace Timpress\Controllers;
    
    use Timber\Timber;
    
    class YourController extends Controller {
      public function render()
      {
        return $this->view('your-file.twig', [
          'posts' => Timber::get_posts(), // this for timber posts
          'foo' => 'bar' // extra variables
        ]);
      }
    }

    and then call this function in the php file like this:

    <?php
    (new \Timpress\Controllers\YourController)->render()

Features

  • OOP and MVC structure with specifiec PSR-4 namespace.
  • Easy composer packages integrations.
  • Timber support for avoid core wordpress classic structure.
  • Clean and fast development using twig template engine and webpack.
  • ES6 Javascript syntax.

Copyright and license

Copyright 2019 Timpress Contributers under the GPL-3 license.

timpress's People

Contributors

abdlhaklalouche avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.