WP Paintbrush

WordPress Theme Creator

Develop

I’ve tried to document the code inline as much as possible, but in case reading the code directly is too confusing, below is a rundown on the basic nuts and bolts of how WP Paintbrush works under the skin. It does some things quite differently from other themes, but there is usually (always?) a reason for us doing things differently. Since we are still in the beta phase, now is the time to request changes :) We’re constantly upgrading, modifying and improving the code base in an effort to move closer to an RC release.

Layer 1: Template Editor

Unlike most themes, WP Paintbrush uses a templating layer to allow the themes raw HTML to be edited via the admin panel in a secure fashion. I’ve shown the basic implementation of this to a number of people, including Mark Jaquith, Otto and Dion Hulse, to check that there are no inherent flaws in it and they thought the basic system was sound.

Early on we had tentatively made use of eval() as it made allowing the exportation of regular .zip files of themes simpler. This is no longer the case. We bailed on that idea as it proved too difficult to keep the theme secure whilst using eval().

Layer 2: Front-end Editor

  •  Loading the frontend editor:
    • When the frontend editor is loaded, template_redrect is used to load a fresh design and ignores the design currently loading on the live site.
  • Data sanitization
    • When data is saved via the frontend editor, it is parsed through a sanitization system starting with ptc_sanitize_inputs() in sanitization.php.
    • The various possible settings are added via hooks, allowing plugins to add new features where needed, yet still using the same sanitization system as the main theme (keeps things consistent security wise).
  • Modules
    • Since we intend for there to many plugins available for WP Paintbrush, I built in a “module” system for the features which are built into the theme by default. This way the built in features work much the same way as plugins will.
    • Modules include the “Header”, “Footer”, “Sidebars” etc.
    • Modules are in the wppaintbrush/designer/modules/ folder.
  • Scripts
    • Scripts specific to the frontend editor are stored in wppaintbrush/designer/scripts/
    • Most scripts are minified, but I can provide the original uncompressed ones if they’re of use.
  • Image uploads
    • Image uploader makes use of the WP 3.3 image uploader
    • If using WP 3.2 it falls back to a simple image uploader in the admin panel
    • Images are stored in a folder labelled wppb_storage in the uploads folder
  • CSS API
    • The CSS is processed on an external server
    • We can allow this code to be run internally within the theme for special users of the theme
    • An API has been used as we may make this a commercial theme in the future and an API key is what users would pay for

Code structure

Here’s a basic run-down on a few of the files in WP Paintbrush.

  • functions.php is used to load the frontend editor and if that isn’t in use, then only the standard theme code.
  • Folder “designer” contains the frontend editor
    • wppaintbrush/designer/index.php is the initial file loaded to implement the frontend editor
    • wppaintbrush/designer/editor.php contains the core HTML output for the frontend editor box
    • wppaintbrush/designer/sanitization.php handles the data sanitization and utilizes functions from the other sanitization-XXX.php files
    • wppaintbrush/designer/extra-functions.php contains various functions used throughout the frontend editor
  • Folder “designs” contains the standard designs able to be chosen via the frontend editor
  • Folder “scripts” contains any javascript used on the frontend of the site
  • Folder “templating” contains the code used to power templating layer

Improvements coming soon

  • There are some CSS and JS bugs in menu distances.
  • We are working on some improvements to make the theme pass the WordPress themes unit test

If you have any further questions about the code, please don’t hesitate to email Ryan Hellyer via ryan@pixopoint.com. We’re happy to answer any and all questions you might have and can begin implementing good changes/improvements you may like to suggest.

2 Responses to Develop

  1. jagall says:

    Hi just installed this theme but the paintbrush editor is not loading, it is trying but nothing happening. Cannot upload images either as I get this fatal error: wp/wp-admin/includes/ms.php on line 29. Not sure if there is a compatability problem with my server. Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>