[ tutorial ] -- Roots Theme Carve Job

Hey Roots Community,

My name is Mr_Matt and this will be my second adventure using your powerful creation.

image = http://i.imgur.com/qQt1wlN.jpg

This is how I believe the layout should be - what do you think?
…:: grid reference layout ::…

Questions:

  • How do I produce dropcaps (refer to navbar) in wordpress menu?

  • How do I insert a responsive image that exceeds the grid (section b,
    below “contact us” menu)? Overflow CSS Property? Z-Index? Position: Absolute?

  • Is there a better way to create a nav for Section D?

  • Regarding Section F, how do you recommend placing text ontop
    of responsive thumbnail images? Div background images with span text inside div?

SECTION A

<div class="row">
  <div class="col-12 col-lg-8">logo</div>
  <div class="col-6 col-lg-4">eCommerce + search + telephone</div>
</div>

[ *default navigation goes here ]

SECTION B

<div class="row">
  <div class="col-12 col-lg-12">*slide image</div>
</div>

SECTION C

<div class="row">
  <div class="col-12 col-lg-12">ul list items here</div>
</div>

SECTION D

Widget Custom Menu OR Widget Categorires OR List Items

SECTION E

<div class="row">
  <div class="col-12 col-lg-12">insert center align <h> here</div>
</div>

SECTION F

<div class="row">
<div class="col-3 col-lg-3">
    <a class="thumbnail" href="#"><br>
	    <img alt="" data-src="holder.js/100%x214"><span>Mailing Lists</span><br>
    </a>
</div>
<div class="col-3 col-lg-3">
    <a class="thumbnail" href="#"><br>
	    <img alt="" data-src="holder.js/100%x214"><span>Postcards</span><br>
    </a>
</div>
<div class="col-3 col-lg-3">
    <a class="thumbnail" href="#"><br>
	    <img alt="" data-src="holder.js/100%x214"><span>Brochures</span><br>
    </a>
</div>
<div class="col-3 col-lg-3">
    <a class="thumbnail" href="#"><br>
	    <img alt="" data-src="holder.js/100%x214"><span>Bulk Mail Services</span><br>
    </a>
</div>
</div>

When the carve job is finished, I will share a powerful tutorial (using your help / replies) on this beautiful discourse board (GG FTL). I really like rootstheme and want to be part of this growing community. It would be an honor to produce tutorials.

Thanks for your attention,

I definitely appreciate the references and break down of sections, but it seems like a lot of the questions you’re asking are just about Bootstrap markup.

Obviously Roots uses Bootstrap, but we’re trying to keep these topics Roots centric rather than general Bootstrap or WordPress. There are much better places (such as Stack Overflow) to ask the more general questions.

One thing I would say is Section D should take advantage of the Roots Bootstrap Walker and WordPress Menus. You just need to create a secondary navigation menu and change the classes when the menu is called:

<?php
if (has_nav_menu('secondary_navigation')) :
  wp_nav_menu(array('theme_location' => 'secondary_navigation', 'menu_class' => 'nav nav-pills nav-stacked'));
endif;
?>
1 Like

@Foxaii - Thanks for the enhancement tweak, this will help me alot.

@swalkinshaw - I understand, thanks for the positive feedbak.

Hi Foxaii, in which file do I put that Walker code to add those classes to my sidebar menus?

Or, more specifically - I added a secondary sidebar menu to my theme as “Sidebar Menu” in the menu manager, then dropped a menu widget in the Primary widget area.

How can I use the Walker method to add those classes to the sidebar menu only? Or am I doing it wrong, and the best practice would be to add a secondary menu theme “Location” somewhere/somehow in my config.php? Would you kindly explain the best practice for adding a secondary navigation, and css classes to that secondary nav.

Thanks!!!

Go to lib/init.php and add the second menu:

register_nav_menus(array(
    'primary_navigation' => __('Primary Navigation', 'roots'),
    'secondary_navigation' => __('Secondary Navigation', 'roots'),
  ));

Then put the original code I posted in whatever template you want it. You can then choose which menu to display in the menus dash.

1 Like

Hello! I would like to learn Roots Themes.
I also do not get a second menu, do everything as described above. Tell me please.
In lib / init.fp
register_nav_menus (array (
     ‘primary_navigation’ => __ (‘Primary Navigation’, ‘roots’),
     ‘secondary_navigation’ => __ (‘Secondary Navigation’, ‘roots’),
   )) e
In base.fp

<? php if (has_nav_menu ('secondary_navigation')):    wp_nav_menu (array ('theme_location' => 'secondary_navigation', 'menu_class' => 'nav nav-pills nav-stacked')); endif; ?>

I’m doing this right?

1 Like

Have you set the secondary navigation menu in the WordPress dashboard?

yes, thank you all turned out.
please tell me how to remove the menu from the main page?