In this second part of the tutorial I’m going to show you how to minimize the time you spend to create a new WordPress theme or plugin using Marv.
In case you missed the first part, you can read it here.
You will need:
- A terminal application
- A web browser
- LiveReload extension, which is available for both Firefox and Chrome, for Firefox I suggest you download this one
Create a new WordPress theme or plugin
$ marv create theme-name
Marv create command will create a scaffold project, containing all the files you need to start developing. Before it does so, you will be asked for the new project details and if you want to use a local layout.
Local layouts are project scaffolds located in ~/.marv/layouts. You can place your own templates in that directory and choose between them every time you create a new project. To create a local layout, you can use the default layout as your guide, because you will need some ruby code for the project details. You can download the basic layout source here.
In case you do not have any local layouts and type n you will be asked if you are creating theme or plugin.
Depending on your choice Marv will create a folder that contains the right files for a theme or plugin.
All projects contain a ruby configuration file in which you can enable assets compression and livereload, specify additional assets you want Marv to watch and build, and require other gems like Bourbon, Bootstrap or Foundation.
Link your project to a local WordPress server
Now that your project is created, you probably want to install it in your local server. Marv gives you the option to link a project to a Marv server or a directory.
So in order to link the project to the server I created on part 1, I first enter the project directory and then use the link command:
$ cd ./theme-name
$ marv link demo-server
In case you want to link your project elsewhere, you can specify the path like so:
$ marv link /var/www/wordpress
Using both methods to link a project, Marv will ask whether the project is a theme or plugin, to create a symbolic link in the right directory.
Note that you have to activate your project in your WordPress installation.
Global Projects
Marv lets you create projects that are available on every Marv server you create. So if for example, you are developing a plugin which you need every time you create a new server you can make it global by using the link command, but without specifying the server or directory, like so:
$ marv link
This will again ask whether this is a theme or plugin, but will instead create a symbolic link of the project in ~/.marv/themes or ~/.marv/plugins, so that it is globally available.
Watch your project for changes
Always from inside the project directory, to watch your project for changes use the following command:
$ marv watch
This command will start watching all the files for changes, notify you for Sass or CoffeeScript errors and trigger your browser to reload, every time you save a file. Note that you must install the browser extension and enable livereload in the configuration file for that to work.
To exit watch mode, press Ctrl+d or type:
$ exit
Build your project files
Always from inside the project directory, to build your project use the following command:
$ marv build
This will compile css and js files, and place all the files the way WordPress needs them, in the build directory of your project.
If you want to build your project somewhere other than the default build directory, you can specify the directory by running:
$ marv build another-directory
Will also create the directory if it does not exist.
Package your project
Always from inside the project directory, to create a .zip file of your project use the following command:
$ marv package
Compiles your project and zips it to the package directory of your project.
By default the package name will be your project’s name, but you can specify a different name like so:
$ marv package wordpress-theme
and the project will be compiled to package/wordpress-theme.zip
Existing WordPress projects
In order to start using Marv on existing projects, you can simply create a new project, enter the details that match the existing project, and replace the contents of the source directory with the files you have already created.
Project structure
Marv has no limitations about a project’s file structure, the opposite. You are free organize them the way you want. For a detailed explanation of what is possible using Marv, you can visit this page, which contains examples for the assets and templates file structure, how to include files or entire directories and more.
Contribute
This is the end of this tutorial, I hope you found some useful information about WordPress development using Marv. You can contribute by letting me know your thoughts or give feedback about Marv on Github, where you can submit issues and feature requests. If you have created projects using Marv, I’d be happy to see the results and mention them on Marv’s new website which is under development.
