A 5 Minute Jump-Start to the Shoestrap 3 Theme

A 5 Minute Jump-Start to the Shoestrap 3 Theme

Shoestrap 3 WordPress Theme

I'm Stephen Kane and I've built hundreds of WordPress websites with scores of different themes. Shoestrap 3 is WordPress Developer Nirvana and it's my new favorite theme for developing custom WP sites. Shoestrap 3 is free and the author is very active on its support forum. Below I've shared some how tos gleaned from implementing Shoestrap in a couple of projects.

Shoestrap 3 is open source, mobile first, responsive, and built on solid code bases like Bootstrap, Redux and HTML5 Boilerplate.

This 5 Minute Jump-Start to Shoestrap 3 assumes you're familiar with enqueuing scripts and actions, child theme setup, html5, css3, php, javascript and WordPress. In other words, you're a front end WordPress developer or looking to be one. Non developers can still use the theme's option settings to customize their sites, but this post doesn't really address that.

Set up your child theme in the normal way. However, if you'd like to use your child style.css to streamline your customizations process and stay within your normal workflow — rather than using the custom css box in the theme's Advanced options area — you must enqueue it in functions.php first. Here's how:
 
function shoestrap_child_theme_stylesheet() {
  wp_enqueue_style('shoestrap_child', get_stylesheet_uri(), false, null);
}
add_action('wp_enqueue_scripts', 'shoestrap_child_theme_stylesheet', 110);
Thanks to Alex Mills and Automattic for their SyntaxHighlighter Evolved plugin for embedding code into posts, which is used extensively in this one.
Note: Actually, the Shoestrap authors recommend using the Advanced Options function in the Admin panel for your custom CSS and custom LESS rather than a child style.css. More on this here. I find this slows down my process because coding iterations are so much faster using text editors like Sublime Text 2 or CuteFTP Professional. So to eat the cake and have it too I create a child style.css for starters, and then cut and paste the code into the Advanced Options at the end of my development cycle, remembering to undo the enqueue function.

Here's how I added a footer menu on a recent project:

This only works with Shoestrap versions earlier than 3.2.

1. add to child functions.php
/* register a new menu to be placed in footer */
function register_my_menu() {
register_nav_menu( 'footermenu', 'Footer Menu' );
}
add_action( 'init', 'register_my_menu' );
2. Add the shoestrap_footer_override action hook to functions.php to modify the default footer.
/* footer override action hook */
function my_custom_footer_override() {
?>
<footer class="content-info" role="contentinfo">
  <?php if ( shoestrap_getVariable( 'site_style' ) != 'boxed'  ) : ?><div class="<?php echo shoestrap_container_class(); ?>"><?php endif; ?>
    <div class="row">
 
<div style="float:left">&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></div>
<div style="float:right">
<?php wp_nav_menu( array( 'theme_location' => 'footermenu' ) ); ?>
</div>
 
    </div>
  </div>
</footer>
<?php
}
add_action( 'shoestrap_footer_override', 'my_custom_footer_override' );
3. Style footer menu via Shoestrap Options > Advanced > Custom CSS.
/* footer menu */
ul#menu-footer li {
float:left;
list-style-type: none;
margin:0 8px;
text-decoration: underline;
}

ul#menu-footer li a {color:#8C8989;}
ul#menu-footer li a:hover {color:#f9f9f9;}

Display Admin Toolbar defaults to NO

For new installs, as of this writing, Display Admin Toolbar defaults to NO. To display the toolbar, go to Advanced Theme Options and scroll to bottom and change Toggle adminbar On/Off to ON.

Popular Bootstrap Formatting

Tabs formatting
<!--start tabs-->
<div class="tabbable">
  <!--start tab titles-->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1 Title</a></li>
    <li><a href="#tab2" data-toggle="tab">Tab 2 Title</a></li>
    <li><a href="#tab3" data-toggle="tab">Tab 3 Title</a></li>
  </ul>
  <!--end tab titles-->

      <!--start tab content-->
      <div class="tab-content">

    <div class="tab-pane active" id="tab1">
<h5>Tab 1 Content Goes Here</h5>
Scelerisque tortor sed enim elementum eros montes pid scelerisque sit enim cras! 
    </div>

    <div class="tab-pane" id="tab2">
<h5>Tab 2 Content Goes Here</h5>
Montes velit ultrices mus tortor natoque urna lectus! 
    </div>

<div class="tab-pane" id="tab3">
<h5>Tab 3 Content Goes Here</h5>
Parturient massa nec facilisis sagittis nunc ut integer vel!
</div>

     </div>
<!--end tab-content-->

</div>
<!--end tabs-->

And Here's What the tabs from above coding will look like

Tab 1 Content Goes Here

Scelerisque tortor sed enim elementum eros montes pid scelerisque sit enim cras! Vut velit a cursus a a, nec et pellentesque eros urna sit, cum et porttitor odio, a adipiscing nunc et ultrices lacus, ridiculus, ut dolor integer aliquet! Magnis turpis urna? Parturient massa nec facilisis sagittis nunc ut integer vel! Porta platea mauris facilisis natoque?

Tab 2 Content Goes Here

Montes velit ultrices mus tortor natoque urna lectus! Enim rhoncus tincidunt turpis. Auctor pulvinar duis eros ac ut? Non integer est platea odio cum.

Tab 3 Content Goes Here

Parturient massa nec facilisis sagittis nunc ut integer vel! Porta platea mauris facilisis natoque? Turpis turpis turpis magna in aenean diam, augue pulvinar, nec, sit lorem. Penatibus augue quis, quis, parturient penatibus natoque integer? Habitasse aliquet eros tincidunt tristique placerat ridiculus natoque pellentesque sit? Nisi nisi nisi, augue risus adipiscing. Ac dolor! Phasellus lorem nunc lundium cras est diam! Augue natoque facilisis? Adipiscing, mid elementum nascetur augue sagittis urna dignissim in!
Shoestrap comes with the excellent bootstrap grid framework which is simple to use but comes with a learning curve. Unlike other column grid frameworks, this one is structured to give you control over how your columns flow for various device widths. To use the bootstrap grid note that columns should be contained in a row and must equal 12 per ROW. Remember, this is just a minimal jumpstart intro to bootstrap grid. For a full explanation of the awesome bootstrap grid go here.
<div class="row" style="border:1px black solid">
<div class="col-lg-4">Content spanning 4 columns. A egestas dapibus nisi integer, habitasse habitasse, parturient mus et, turpis odio mattis vut. Egestas, elit duis augue diam lacus cursus placerat eu non, et turpis dolor porttitor augue, nisi? Ut a urna dolor vel nec, nec sed amet.</div> <div class="col-lg-8">Content spanning 8 columns. Ultricies mattis ut arcu egestas integer sagittis nec odio sociis dis magna nisi nunc tortor in ultricies porta magnis magna amet elementum aliquam ultricies! Lundium? Ridiculus? Odio tincidunt pellentesque dis, urna, rhoncus scelerisque. Rhoncus?</div>
</div><!--end row-->

<div class="row" style="border:1px black solid">
<div class="col-lg-2">Content spanning 2 columns. A egestas dapibus nisi integer, habitasse habitasse, parturient mus et, turpis odio mattis vut. Egestas, elit duis augue diam lacus cursus placerat eu non, et turpis dolor porttitor augue, nisi? Ut a urna dolor vel nec, nec sed amet, ultrices augue sociis, ut nec sagittis habitasse a arcu ut cursus a et est et?</div> 

<div class="col-lg-2">Content spanning 2 columns. Ultricies mattis ut arcu egestas integer sagittis nec odio sociis dis magna nisi nunc tortor in ultricies porta magnis magna amet elementum aliquam ultricies! Lundium? Ridiculus? Odio tincidunt pellentesque dis, urna, rhoncus scelerisque. Rhoncus?</div>

<div class="col-lg-2">Content spanning 2 columns. Ultricies mattis ut arcu egestas integer sagittis nec odio sociis dis magna nisi nunc tortor in ultricies porta magnis magna amet elementum aliquam ultricies! Lundium? Ridiculus? Odio tincidunt pellentesque dis, urna, rhoncus scelerisque. Rhoncus?</div>

<div class="col-lg-2">Content spanning 2 columns. Ultricies mattis ut arcu egestas integer sagittis nec odio sociis dis magna nisi nunc tortor in ultricies porta magnis magna amet elementum aliquam ultricies! Lundium? Ridiculus? Odio tincidunt pellentesque dis, urna, rhoncus scelerisque. Rhoncus?</div>

<div class="col-lg-2">Content spanning 2 columns. Ultricies mattis ut arcu egestas integer sagittis nec odio sociis dis magna nisi nunc tortor in ultricies porta magnis magna amet elementum aliquam ultricies! Lundium? Ridiculus? Odio tincidunt pellentesque dis, urna, rhoncus scelerisque. Rhoncus?</div>

<div class="col-lg-2">Content spanning 2 columns. Ultricies mattis ut arcu egestas integer sagittis nec odio sociis dis magna nisi nunc tortor in ultricies porta magnis magna amet elementum aliquam ultricies! Lundium? Ridiculus? Odio tincidunt pellentesque dis, urna, rhoncus scelerisque. Rhoncus?</div>
</div><!--end row-->

And here's how the above formatting will look:
Content spanning 4 columns. A egestas dapibus nisi integer, habitasse habitasse, parturient mus et, turpis odio mattis vut. Egestas, elit duis augue diam lacus cursus placerat eu non, et turpis dolor porttitor augue, nisi? Ut a urna dolor vel nec, nec sed amet.
Content spanning 8 columns. Ultricies mattis ut arcu egestas integer sagittis nec odio sociis dis magna nisi nunc tortor in ultricies porta magnis magna amet elementum aliquam ultricies! Lundium? Ridiculus? Odio tincidunt pellentesque dis, urna, rhoncus scelerisque. Rhoncus?
Content spanning 2 columns. A egestas dapibus nisi integer, habitasse habitasse, parturient mus et, turpis odio mattis vut. Egestas, elit duis augue diam lacus cursus placerat eu non, et turpis dolor porttitor augue, nisi? Ut a urna dolor vel nec, nec sed amet, ultrices augue sociis, ut nec sagittis habitasse a arcu ut cursus a et est et?
Content spanning 2 columns. Ultricies mattis ut arcu egestas integer sagittis nec odio sociis dis magna nisi nunc tortor in ultricies porta magnis magna amet elementum aliquam ultricies! Lundium? Ridiculus? Odio tincidunt pellentesque dis, urna, rhoncus scelerisque. Rhoncus?
Content spanning 2 columns. Ultricies mattis ut arcu egestas integer sagittis nec odio sociis dis magna nisi nunc tortor in ultricies porta magnis magna amet elementum aliquam ultricies! Lundium? Ridiculus? Odio tincidunt pellentesque dis, urna, rhoncus scelerisque. Rhoncus?
Content spanning 2 columns. Ultricies mattis ut arcu egestas integer sagittis nec odio sociis dis magna nisi nunc tortor in ultricies porta magnis magna amet elementum aliquam ultricies! Lundium? Ridiculus? Odio tincidunt pellentesque dis, urna, rhoncus scelerisque. Rhoncus?
Content spanning 2 columns. Ultricies mattis ut arcu egestas integer sagittis nec odio sociis dis magna nisi nunc tortor in ultricies porta magnis magna amet elementum aliquam ultricies! Lundium? Ridiculus? Odio tincidunt pellentesque dis, urna, rhoncus scelerisque. Rhoncus?
Content spanning 2 columns. Ultricies mattis ut arcu egestas integer sagittis nec odio sociis dis magna nisi nunc tortor in ultricies porta magnis magna amet elementum aliquam ultricies! Lundium? Ridiculus? Odio tincidunt pellentesque dis, urna, rhoncus scelerisque. Rhoncus?
Tooltips in Shoestrap 3 are Opt In only. If you want tooltips, do this: navigate in the dashboard to Shoestrap theme options > Advanced > Custom JS and add this code. (I had to use class tooltip-1 — not tooltip — to get this to work. Not sure why.):
jq = window.jQuery.noConflict();
jq (document).ready(function(){
jq ('.tooltip-1').tooltip();
});
To apply a tooltip to a link, add class="tooltip-1" and data-placement="top" (or bottom, left, or right).
<a href="#" title="data-placement set to top" id="tooltip-1" data-placement="top">Top Tooltip</a>
<a href="#" title="data-placement set to bottom" id="tooltip-1" data-placement="bottom">Bottom Tooltip</a>
<a href="#" title="data-placement set to left" id="tooltip-1" data-placement="left">Left Tooltip</a>
<a href="#" title="data-placement set to right" id="tooltip-1" data-placement="right">Right Tooltip</a>
The above code displays like this:
Popovers in Shoestrap 3 are Opt In only. If you want popovers, do this: navigate in the dashboard to Shoestrap theme options > Advanced > Custom JS and add this code:
jq('.popover-1').popover();

Here are some popover link and button examples:

Click to toggle popover

Click to toggle popover

Here's an example of a green button:
<a class="btn btn-success" href="#">Add To Cart</a>
Here's what the above code will look like: Add To Cart Add additional classes for color and size:
Button colors:
btn-success = green
btn-danger = red
btn-warning = orange
btn-primary = blue
btn-info = light blue
btn-inverse = black
btn = grey
Button sizes:
btn-large
btn-small
btn-mini

More button info here.

Elusive-Icons come packaged in Shoestrap 3. An icon can be added like this:
<span class="el-icon-wordpress"></span>.
A list of available Elusive Icons is here If you prefer to use some other icons, such as Fontawsome, you'll want to install them in place of Elusive. It would be a nice enhancement for Shoestrap 3 to provide an option to use one or the other, but this is not offered as of this writing.
Accordion Toggles used in this post come packaged in Shoestrap 3. Add them like this*:

<div class="panel panel-default"><!--start an accordion toggle-->
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
          <span class="el-icon-idea"></span> Your Toggle Title Here
        </a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">

Sample toggle content here.

     </div>
    </div>
 </div><!--end an accordion toggle-->

*Note: Each toggle id name should be unique. So if you want 3 toggles, you might name them collapse1, collapse2, collapse3

A Shout Out to Aristeides Stathopoulos

Well that's more than 5 minutes worth, but hopefully it will save you some hours toward your goals. A big shout out to Aristeides Stathopoulos, Dimitris Kalliris and Dovy Paukstys for their brilliant work in bringing us Shoestrap 3.

--End--

5 Responses to “A 5 Minute Jump-Start to the Shoestrap 3 Theme”

  1. Paolo

    2014-01-28T07:44:28+00:00

    Thanks for the jump-start to ShoeStrap 3! I’m really liking the theme so far, but having a few problems with it, mainly with including a sidebar in my blogs page. I do wish there was some more proper documentation, especially since I’m a novice PHP and WordPress developer, but overall its an awesome theme.

    Reply
    • spkane

      2014-01-28T08:46:06+00:00

      You’re welcome Paolo. It’s a great theme and a good way to stretch your PHP and Developer chops. Good luck!

      Reply
  2. Aristeides Stathopoulos

    2014-02-05T07:02:15+00:00

    Hey there!

    Thank you for featuring out theme…
    If you need any assistance with it don’t hesitate to drop us a line!

    Cheers,
    Ari.
    Lead developer, Shoestrap theme.

    Reply
    • spkane

      2014-02-05T09:17:15+00:00

      Hello Ari and thanks for stopping by.

      One subtle point not mentioned in the original post is that you seem to have made a conscious choice to not put in functions that are better as plugins. Similarly, shortcodes are used minimally. This makes future theme migration simpler and less disruptive. Nice!

      I encourage registered theme users to not only read the theme forum but the comment threads to posts for hidden gems.

      Reply
  3. 6 Quick Examples of Shoestrap v3.2 Menu Options | SKANE WORDPRESS CONSULTING

    2014-03-28T17:48:32+00:00

    […] Here are 6 quick examples of the 6 basic Menu Style Options for Top Nav and Secondary menus in Shoestrap 3. This is meant to be a fast visual overview. There are lots of other option tweaks not shown. If you find this useful, you might want to check out A 5 minute jumpstart to Shoestrap 3. […]

    Reply

Leave a Reply