1. Start

Welcome to Docs & Examples

Juanito will help you create a WordPress theme just by using your HTML files

And if you want to know what's in the future of this project, check out our Roadmap

2. Installation instructions

First of all you need to have installed npm in order to install juanito.

Then you have to put this on your console:

npm install juanito -g

After the installation, you can check the version of `juanito` by this command:

juanito --version

And that's all! Now you are ready to use `juanito` the helper.

3. Command Line Argumens For version 1.0.1

General Arguments

Help [-h | --help]

Show how to use juanito

Usage: juanito [options]

  Options:

    -h, --help                       output usage information
    -V, --version                    output the version number
    -s, --source [source]            Set the template source (required)
    -d, --destination [destination]  Set the template destination folder (required)
    -i, --ignore-configuration       Ignore the theme configuration
    -T, --post-thumbnails            Add post thumbnail support
    -F, --post-formats               Add post formats support
    -B, --custom-background          Add custom background support
    -H, --custom-header              Add custom header support
    -L, --auto-feed-links            Add automatic feed links support
    -5, --html5                      Add HTML5 support
    -T, --title-tag                  Add title tag support
Version [-V | --version]
Show the installed version
Source (required) [-s <directory> | --source <directory>]
Sets the source directory where the `index.html` file of your site is.
*This parameter is required*
Destination (required) [-d <directory> | --destination <directory>]
Sets the source directory where the theme will be created, based on your source directory.
*This parameter is required*
Ignore Configuration [-i | --ignore-configuration]
This argument is used to ignore the theme configuration. Using this parameter, `juanito` will not ask the theme information.

Template Arguments

Post Thumbnails support [-T | --post-thumbnails]
This argument enables the post thumbnail support for your theme, adding in the `functions.php` file the post thumbnail support.
Post Formats support [-F | --post-formats]
This argument enables the post thumbnail support for your theme, adding in the `functions.php` file the post formats support.
Custom Background [-B | --custom-background]
This argument enables the custom background support for your theme, adding in the `functions.php` file the custom background support.
Custom Header [-H | --custom-header]
This argument enables the custom header support for your theme, adding in the `functions.php` file the custom header support.
Custom Header [-L | --auto-feed-links]
This argument enables the auto feed links support for your theme, adding in the `functions.php` file the auto feed links support.
HTML5 [-5 | --html5]
This argument enables the HTML5 support for your theme, adding in the `functions.php` file the HTML5 support.
Title Tag [-T | --title-tag]
This argument enables the title tag support for your theme, adding in the `functions.php` file the title tag support.

4. Usage Examples

Requirements

  • A directory for the examples
  • juanito installed
  • Use standard HTML5 tags like header, footer, aside, nav, article

Example 1: Basic Structure Follow the steps

  1. Open your terminal
  2. Create a directory: mkdir mysite
  3. Create a file called index.html inside mysite
  4. Create and edit a basic HTML5 structure like this example 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Juanito Example</title>
</head>
<body>

    <header>
        This is the header
    </header>

    <section id="content">
        This is the content
    </section>

    <footer>
        This is the footer
    </footer>

</body>
</html>
    Consider to use tags like header, section and footer. Juanito use these tags in order to recognize and organize the template.
  5. Save the file as index.html
  6. In your terminal create the template based on your recently created index.html file using this command: juanito -s mysite -d mytheme

Example 2: Creating a Menu

Using the basic structure example we are going to create a menu inside the header tag following these steps:

  1. Edit index.html file
  2. Add inside header this code: 
    <nav id="menu">
<ul>
    <li><a href="">Home</a></li>
    <li><a href="">Page 1</a></li>
    <li><a href="">Page 2</a></li>
</ul>
</nav>
  3. Now, add the attribute data-menu="main" on the nav tag 
    <nav id="menu" data-menu="main">
...
</nav>
  4. Save the file and execute juanito again like this: juanito -s mysite -d mytheme -i. This process will be executed ignoring the configuration.

Example 3: Creating a Sidebar

Using the second example, we are going to create a sidebar inside the section#content following these steps:

  1. Edit the index.html file.
  2. Add inside `section#content` this code: 
    <section id="content">
    <aside>
    </aside>
</section>
  3. Now, add the attribute data-sidebar="home" on the aside tag 
    <aside data-menu="home">
...
</aside>
  4. Save the file and execute juanito again like this: juanito -s mysite -d mytheme -i. This process will be executed ignoring the configuration.

Example 4: The loop

Using the third example, we are going to create a sidebar inside the section#content following these steps:

  1. Edit the index.html file.
  2. Add inside section#content this code: 
    <section id="content">
    <div id="articles">
    </div>
    <aside data-menu="home">
    </aside>
</section>
  3. Now, add an article element inside div#articles with the elements for the 'title', the 'excerpt', the 'date', the 'permalink' and the 'thumbnail' and use dummy texts. 
    <h3>Last 4 articles</h3>
<div id="last_articles">
    <article>
        <h4>Title</h4>
        <em>Sat, 14 Feb 2014</em>
        <div class="thumbnail">
            <img src="http://placehold.it/250x100" />
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="">Read More</a>
    </article>
</div>
  4. Now configure "the loop" adding data-loop="last_articles" and data-loop-limit="4" in the article element. 
    <article data-loop="last_articles" data-loop-limit="4">
...
</article>
  5. And now, we need to set the title, the date, the thumbnail, the excerpt and the permalink using: 
    <article data-loop="last_articles" data-loop-limit="4">
    <h4 data-loop-title="">Title</h4>
    <em data-loop-date="">Sat, 14 Feb 2014</em>
    <div class="thumbnail" data-loop-thumbnail="">
        <img src="http://placehold.it/250x100" />
    </div>
    <p data-loop-excerpt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a href="" data-loop-permalink="">Read More</a>
</article>
    For each element, every attribute must have the `data-loop` prefix.
  6. Save the file and execute juanito again like this: juanito -s mysite -d mytheme -i. This process will be executed ignoring the configuration.

Example 5: Pages, Archive and Single files

About these elements, the only thing that you have to do is create the files with these names:

  • Use page.html or page-<name>.html in order to create page templates.
  • Use archive.html in order to create the archive template.
  • Use single.html to create the single post template.
In all these files you can use "the loop" data tags, explained on the 5th example

Full Example

Consider this structure : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Juanito Example</title>
</head>
<body>

    <header>
        <nav id="menu" data-menu="main">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Page 1</a></li>
                <li><a href="">Page 2</a></li>
            </ul>
        </nav>
    </header>

    <section id="content">
        <h3>Last 4 articles</h3>
        <div id="articles">
            <article data-loop="last_articles" data-loop-limit="4">
                <h4 data-loop-title="">Title</h4>
                <em data-loop-date="">Sat, 14 Feb 2014</em>
                <div class="thumbnail" data-loop-thumbnail="">
                    <img src="http://placehold.it/250x100" />
                </div>
                <p data-loop-excerpt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <a href="" data-loop-permalink="">Read More</a>
            </article>
        </div>
        <aside data-menu="home">
        </aside>
    </section>

    <footer>
        This is the footer
    </footer>

</body>
</html>
Save the file and execute juanito again like this: juanito -s mysite -d mytheme

This process will be executed asking you for the theme configuration.

Data Tags For version 1.0.1

Purpose

juanito uses data-tags for element recogniton and also data to embed the right PHP snippet.

This is the actual data-tag list

data-menu

Enable a menu called name in your theme.

Syntax
data-menu="<name>"
Parameters
menu name
Usage
<nav data-menu="main"></nav>

data-sidebar

Enable a sidebar called name in your for your widgets.

Syntax
data-sidebar="<name>"
Parameters
sidebar name
Usage
<aside data-sidebar="left_sidebar"></aside>

data-loop

Defines an element that will be used to display posts. "The Loop" is a concept created by WordPress that shows posts in the current page. Every loop needs a name because every loop is a different query inside WordPress.

Syntax
data-loop="<name>"
Parameters
loop name
Usage
<article data-loop="last_posts"></article>

data-loop-limit

When the data-loop is used, you can limit the display using data-loop-limit.

Syntax
data-loop-limit="<number>"
Parameters
number as limit
Dependency
data-loop
Usage
<article data-loop="last_posts" data-loop-limit="10"></article>

data-loop-title

When the data-loop is used, you can define a tag as the title of the post.

Syntax
data-loop-title=""
Parameters
none
Dependency
data-loop
Usage
<h2 data-title=""></h2>

data-loop-content

When the data-loop is used, you can define a tag as the content of the post.

Syntax
data-loop-content=""
Parameters
none
Dependency
data-loop
Usage
<p data-content=""></p>

data-loop-excerpt

When the data-loop is used, you can define a tag as the excerpt of the post.

Syntax
data-loop-excerpt=""
Parameters
none
Dependency
data-loop
Usage
<p data-excerpt=""></p>

data-loop-date

When the data-loop is used, you can define a tag as the date of the post.

Syntax
data-loop-date=""
Parameters
none
Dependency
data-loop
Usage
<span data-date=""></span>

data-loop-permalink

When the data-loop is used, you can define a tag as the permalink of the post.

Syntax
data-loop-permalink=""
Parameters
none
Dependency
data-loop
Usage
<a data-permalink=""></a>

data-loop-thumbnail

When the data-loop is used, you can define a tag as the thumbnail of the post.

Syntax
data-loop-thumbnail=""
Parameters
none
Dependency
data-loop
Usage
<img src="" data-thumbnail=""/>

data-loop-category

When the data-loop is used, you can define a tag as the categories of the post.

Syntax
data-loop-category=""
Parameters
none
Dependency
data-loop
Usage
<div data-category=""></div>

data-loop-tags

When the data-loop is used, you can define a tag as the tags of the post.

Syntax
data-loop-tags=""
Parameters
none
Dependency
data-loop
Usage
<div data-tags=""></div>

Roadmap

Version 1.1

  • Custom templates
  • Non standard HTML5 tags
  • Screenshot preview

Version 1.2

  • Exporting data
  • Juanito caricature for logo
  • Website

Version 1.3

  • Juanito preview server
  • Dummy data for template testing
  • Deploy a WordPress installation