Skip to content

Usage Examples

Jump to bottom
Héctor Palma Téllez edited this page Feb 21, 2015 · 2 revisions

Requirements

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

Example 1: Basic Structure

Follow these 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 the 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 7. Input your theme configuration and test your theme on WordPress

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.

Clone this wiki locally