Tag Archives: Menus

Content is King Despite Outrageous Storms

I‘ve accomplished quite a bit since yesterday, despite a violent storms outside and frequent power blips (thank goodness for the UPS!). Although I “knew” it, it’s still surprising how much work there is to do getting the site set up — much more than just making the theme look and work ok. As they say, content is king, and I’ve been busy preparing the beginning content so that people will have a reason to visit TTT.

Here’s what I’ve done so far since yesterday:

  • Fixed wp-config so WordPress saves no drafts. A “feature” that bloats the database.
  • Removed the line separating content and sidebar. Godhammer calls it a “laugh-line.”
  • Brought into DEVONthink all the wandering snippets of code and DIYthemes forums snippets on my hard disk. Got everything set up to write the pages and posts for TTT, as well as organizing future materials.
  • Started a color table in custom.css for all the colors I’ve used, plus my color scheme.
  • Worked on the footer to get the fonts larger in the copyright and attribution lines. Changed footer widget body plain text font colors to the same as what Thesis uses for links. Found that I can’t change footer widget body font sizes without messing their alignment up. Oh well.
  • Restored the Anxiety, Panic & Health widget I lost in The Move.
  • Started writing content, such as the landing page, the About page, and all the policy pages. Set them all up in contextual menus.
  • Built a yellow box for post announcements based on the color scheme.
  • Did some research on what it would take to do video tutorials. I already have the software. I just need a good microphone.

My basic goal for today’s work is to add to TTT’s starting content. I want to have the site up and running as soon as practical, and I need starting content to do that. I can add bells and whistles later.

Here’s my to-do list for today:

  • Continue more detailed planning of the menu tree.
  • Continue writing content, focusing on material I already have.
  • Replicate the tutorial on Contextual Submenus I lost in The Move.
  • Finish writing the tutorial on Button Bar Menu/Submenu. Still not satisfied with the name.

And as I have time and opportunity (and need a break):

  • Continue thinking and research what it would take to do video tutorials. Find out about post-processing.
  • Contact HostGator about some necessary server setting changes for enabling teaser images.
  • Find a way to display tags on the blog front page and on pages.
  • Bring into DEVONthink Thesis-related bookmarks from Safari.
  • Set up Google Custom Search for Thesis Theme Tools.
  • Decide where I want the search bar. I was thinking in the header, but it’s already pretty crowded. May just put it in the sidebar for right now. I do want to have a cute little spyglass, though.

That’s all folks! See you tomorrow!
©2009 Thesis Theme Tools. All rights reserved.

Fourth of July, El Stupido, and Wandering Snippets

Happy Fourth of July!
Happy Fourth of July!

Happy Fourth of July! Most people take the day off and do the barbecue thing. I will do hot dogs at my best buddy’s house, but otherwise I’ll be plugging away here at the Nichols Nuthouse. My wife is in England and my daughter is doing her own thing, so I have the space to do what I want, which is plug away.

DEVONthink Pro – try it!

I set up a database in DEVONthink Pro for Thesis Theme Tools. Here I will keep my daily posts, along with all the code snippets and articles I clip. Not only a central repository, but searchable. It’s where I’ll write my posts, too. I’ve used DTP from the beginning for my other blog, Anxiety Panic & Health, and I don’t know why I didn’t think of it for this blog — I wouldn’t have lost those posts if I had. Oh well.

Yesterday I do what I intended — life intervened — but I did get a few things done:

  • Got a FeedBurner account.
  • Set up an image-based subscribe by RSS and email, and Twitter images in a widget. I already had the images from before The Big Stupido, so it didn’t take long — ripped the code off from the Mom Talk Blog with 3 Kids and Us rather than exercise my rusty HTML table skills.
  • Refined the look by making the contextual menu and background behind the button bar black and cm text white. Not so garish. May make the border a different color, too.

Today I plan to (most of which are brought over from yesterday):

  • Bring all the wandering snippets of code into DTP — this may take a while, but necessary.
  • Start a color table in custom.css for all the colors I’ve used so far.
  • Set up Google Custom Search for Thesis Theme Tools.
  • Decide where I want the search bar. I was thinking in the header, but it’s already pretty crowded. May just put it in the sidebar for right now. I do want to have a cute little spyglass, though.
  • Work on the footer widgets more to get the fonts larger in the heading and body.
  • Restore the Anxiety, Panic & Health widget I lost in The Move.

And if I have time:

  • Do more detailed planning of the menu tree. I’ve decided not to make dummy pages for all my planned documents, because users would get irritated if they clicked on something and it was just a placeholder.
  • Replicate the tutorial on Contextual Submenus I lost in the move.
  • Finish writing the tutorial on Image-Based Menus/Submenus. Try to think up a better name for it. Button Bar Menu/Submenu?
  • Start writing content, such as the landing page and some content pages. I can take some of the latter from the DIY Snippets document where I keep some of the more common and/or long-winded replies on the DIYthemes Forum.
  • Think and research what it would take to do video tutorials.
  • Decide whether I want pictures on the blog and teasers. If I do, I need to contact HostGator about some necessary server setting changes for the teasers.

That’s it. See you tomorrow!

Tutorial: Contextual Submenus

Many Thesis users have requested an enhanced navigation menu with multiple selections per tab. Most people think first of drop-down menus, but there is another kind of enhanced menu: a contextual submenu. It displays as a horizontal strip, usually under the nav bar, with the submenu links shown for the selected nav bar tab or document. In many ways, the contextual submenu is more flexible than a drop-down menu, since it can show any links you choose in the submenu, and can also work with documents not on the nav menu. The contextual menu on this site is right below the Image Button Bar Menu.

The contextual submenu described in this tutorial can handle both blog and static front pages, posts, pages, parent pages with any number of children, category pages, and tag pages. You can also have submenus for all these kinds of documents even if they are not in the nav bar. For example, see the “Surviving the Recession” series of posts on my Anxiety, Panic & Health site, which has a contextual submenu linking to the other parts of the series.

You may create as many submenus and submenu items as you wish, and for as many tabs or documents as you wish. The contextual submenu displays a blank submenu line when you have not defined a submenu for the nav tab or document displayed (such as the landing page of this site). Everything about the contextual submenu is configurable, from colors and fonts to height and where you want it to appear.

New! Added July 20, 2009. I added an enhancement that keeps the parent nav bar tab selected while viewing its child submenu items. It’s in the functions code, below. Also, I added at the end of this article an example of the setup of Contextual Submenus for two Thesis nav tabs, each with two submenu items, and each of those with a submenu of its own. The example will show you how easy and quick it is to set up the Contextual Submenus.

The functions for custom_functions.php

The following code should be placed in your custom_functions.php file. Be sure to read the code’s comments for instructions and descriptions. A description of the code is below.

/* CONTEXTUAL SUBMENU FUNCTIONS - PUT THIS IN YOUR CUSTOM_FUNCTIONS.PHP FILE */

/* SAMPLE SUBMENU FUNCTION FOR NAV BAR TABS
This is the list of submenu items to appear in the contextual submenu for nav bar tabs.
It is the same for home or front pages, posts, pages, categories, tags, and documents. 
The description is what will appear in the submenu.*/
function contextual_submenu_sample_navbar() {
?>
    <ul id="context_submenu">
        <li><a href="URL FOR SUBMENU ITEM 1">DESCRIPTION FOR SUBMENU ITEM 1</a></li>
        <li><a href="URL FOR SUBMENU ITEM 2">DESCRIPTION FOR SUBMENU ITEM 2</a></li>
    </ul>
<?php
}

/* SAMPLE SUBMENU FUNCTION FOR CHILDREN WITHIN CONTEXTUAL SUBMENU
This is the list of submenu items to appear in the contextual submenu for children.
It is the same for posts, pages, categories, tags, and other documents. 
The description is what will appear in the submenu.
The style-type code keeps the parent nav bar tab selected when using the child submenus.
Use one of the style-type statements only! If the selected parent tab is the home/front
page, use the home-item code block, for all others use the page-item code block.
*/
function contextual_submenu_sample_child() {
?>
	<!--for home or front page parent tab -->
	<style type = "text/css">
	.custom ul#tabs li.home-item a {background: #FFFFFF; color:#000000;}
	</style>

	<!--for non-home page parent tabs -->
	<style type = "text/css">
	.custom ul#tabs li.page-item-1 a {background: #FFFFFF; color:#000000;}
	</style>

    <ul id="context_submenu">
        <li><a href="URL FOR SUBMENU ITEM 1">DESCRIPTION FOR SUBMENU ITEM 1</a></li>
        <li><a href="URL FOR SUBMENU ITEM 2">DESCRIPTION FOR SUBMENU ITEM 2</a></li>
    </ul>
<?php
}

/* BLANK SUBMENU FUNCTION
Do not change this unless you want to rename it or the id. */
function contextual_submenu_blank() {
?>
	<ul id="context_submenu_blank">
		<li><a href="">&nbsp;</a></li>
	</ul>
<?php
}

/* CONTEXTUAL MENU BASED ON PARENT-CHILD RELATIONSHIPS */
/* Do not rename or change this function. */
function contextual_submenu_parent () {
	global $wp_query;
	if( empty($wp_query->post->post_parent) ) {
		$parent = $wp_query->post->ID;
	} 
	else {
		$parent = $wp_query->post->post_parent;
	}
?>
	<ul id="context_submenu">
		<?php wp_list_pages("title_li=&child_of=$parent");?>
	</ul>
<?php
}

/* CONTEXTUAL MENU CONDITIONAL SELECTION FUNCTION
If your nav menu is below the header, you do not have to do anything.  
If your nav menu is above the header, change all instances of "thesis_hook_after_header" to
"thesis_hook_before_header" and remove every instance of ",'90'" at the end of the line. It will 
look like this when you are finished:
		add_action('thesis_hook_before_header', 'HOME-SUBMENU-FUNCTION-NAME');
*/
function contextual_submenus() {
	/* Works for both blog home pages and static front pages */
	if (is_front_page())
		add_action('thesis_hook_after_header', 'HOME-SUBMENU-FUNCTION-NAME', '90');
	/* For pages only */
	elseif (is_page('PAGE-NAME'))
		add_action('thesis_hook_after_header', 'PAGE-SUBMENU-FUNCTION-NAME', '90');
	/* For parent pages only - do not change function name */
	elseif (is_page('PARENT-PAGE-NAME'))
		add_action('thesis_hook_after_header', 'contextual_submenu_parent', '90');
	/* For posts only */
	elseif (is_single('POST-NAME'))
		add_action('thesis_hook_after_header', 'POST-SUBMENU-FUNCTION-NAME', '90');
	/* For category pages */
	elseif (is_category('CATEGORY-NAME'))
		add_action('thesis_hook_after_header', 'CATEGORY-SUBMENU-FUNCTION-NAME', '90');
	/* For tag pages */
	elseif (is_tag('TAG-NAME'))
		add_action('thesis_hook_after_header', 'TAG-SUBMENU-FUNCTION-NAME', '90');
	/* Defaults to a blank line */
	else
		add_action('thesis_hook_after_header', 'contextual_submenu_blank', '90');
}
add_action('thesis_hook_before_header', 'contextual_submenus');

1. The first function is a sample contextual submenu for your nav bar tabs. You will need to create one for each nav bar submenu you want except for parent/child relationship tabs and submenus, which are handled automatically. The format is the same for every function you create, whether it’s for a home/front page, a page, a post, a category, a tag, or a document.

2. The second function is a sample of a child contextual submenu. If you want the children of the nav tab parents to have their own individual submenus, use this sample as a template for creating them.

There are two style statements. Their purpose is to keep the parent nav bar tab selected while viewing the child submenus. Use only one of the two style statements provided and delete the other. If the parent tab is the home nav tab, use the “home-item” group of code. For any other parent nav tab, use the “page-item” group of code. In the latter, change “page-item-1” to the appropriate tab number: the first tab to the right of the home tab is 1, the next is 2, and so on. Also change the tab color and font color to match the colors you have set for them in custom.css.

3. The third function is for the blank line and shouldn’t be changed, unless you want to rename it or the id.

4. The fourth function generates a contextual submenu based on the parent/child page relationship. A parent page in the nav bar will have its children listed in the contextual submenu. You do not have to make a separate function for parent/child pages as you do for other kinds of documents. This function should not be changed. (Thanks to bigbigdesign for this idea.)

5. The fifth function determines if the selected nav tab or document has a contextual submenu or not and displays it if it does. It defaults to a blank submenu line when a nav tab, page, post, category, tag, or document has no code for it (for example, the landing page on this blog). Included is a conditional statement for each kind of tab that can be placed in the nav bar, as well as other post/page/category/tag documents (remember that documents not in the nav bar can have submenus, too). Add as many tab/document statements as you need, and delete the ones you don’t.

If your contextual menu is below the header

The ’90’ at the end of the “add_action” statement places the submenu line at the end of items included in the “thesis_hook_after_header” hook. You may change it or remove it as desired. Note that the example is set up for the contextual menu being below the header, so you don’t have to make any changes to the example code.

If your contextual menu is above the header

You will need to change each instance of “thesis_hook_after_header” in the function to “thesis_hook_before_header.” You will also need to remove each instance of “’90′” at the end of the “add_action” statements. The statements will look like this after you are finished:

		add_action('thesis_hook_before_header', 'HOME-SUBMENU-FUNCTION-NAME');

If you want to know more about the conditional tags used in this function, read “Conditional Tags” in the WordPress codex.

The code for custom.css

The following code should be placed in your custom.css file. Be sure to read the code’s comments to determine where and how to make changes. A description of the code is below.

/* CONTEXTUAL SUBMENUS STYLING - PUT THIS IN YOUR CUSTOM.CSS FILE
These css selectors are split out to make it easy to change values.
Change the border width, colors and other styles to suit. 
Do not change the list-style, width, and float settings.*/

/* If your nav menu is below the header, leave this commented out.
If your nav menu is above the header, uncomment it to adjust the header spacing.*/
/*.custom #header { margin-top: 0em; }*/

/* Contextual Submenu borders and submenu strip color  */
ul#context_submenu {
	/* border styling */
	border-top-style: none;
	border-right-style: single;
	border-right-color: #ddd;
	border-right-width: 3px;
	border-bottom-style: double;
	border-bottom-color: #ddd;
	border-bottom-width: 3px;
	border-left-style: single;
	border-left-color: #ddd;
	border-left-width: 3px;
	/* submenu strip color */
	background:#D8E5F2 none repeat scroll 0 0;
	/* Do not change the values below! */
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	width: 100%;
	float: left;
}

/* Vertical size of Contextual Submenu and space between submenu items */
ul#context_submenu li { 
	/* determines space from top of letters to top edge of strip */
	padding-top: .2em; 
	/* determines space to right of submenu items -- use padding-left instead */
	padding-right: 0em; 
	/* determines space from bottom of letters to bottom edge of strip */
	padding-bottom: .2em; 
	/* determines space between submenu items */
	padding-left: 2.5em; 
	/* Do not change the value below! */
	float: left; 
}

/* Font properties for items in the Contextual Submenu */
ul#context_submenu li a { 
	/* font size */
	font-size: 1.05em; 
	/* font color */
	color: #000000; 
	/* font weight -- bold, normal, etc. */
	font-weight: bold;
	/* word spacing is tightened up to make submenu items easier to distinguish */
	word-spacing: .03em;
}

/* Behavior of a Submenu item when the cursor hovers over it */
ul#context_submenu li a:hover { text-decoration: underline; }

/* CONTEXTUAL SUBMENU - BLANK
Use the same values as defined in the Contextual Submenu above */
ul#context_submenu_blank {
	/* border styling */
	border-top-style: none;
	border-right-style: single;
	border-right-color: #ddd;
	border-right-width: 3px;
	border-bottom-style: double;
	border-bottom-color: #ddd;
	border-bottom-width: 3px;
	border-left-style: single;
	border-left-color: #ddd;
	border-left-width: 3px;
	/* submenu strip color */
	background:#D8E5F2 none repeat scroll 0 0;
	/* Do not change the values below! */
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	width: 100%;
	float: left;
}

/* Height of the blank Contextual Submenu strip
These settings make the blank bar the same height as the regular one. 
It should be roughly the sum of the contextual submenu font's padding and font-size.*/
ul#context_submenu_blank li { 
	padding-top: .2em; 
	padding-bottom: 1.3em; 
	/* Do not change the value below! */
	float: left; 
}

Note that the properties are broken out for your convenience. You may compact them if you wish.

1. The first group of code creates an id named “context_submenu” for all non-blank submenu styling. The properties and values in the various selectors are those I use on my blog, so you’ll want to change them. I didn’t change the default font, etc. in the “ul#context_submenu li a” selector, but you may make any changes you wish. Consult the w3schools.com page on “CSS Text” for what’s available.

2. If your contextual menu is above the header, uncomment the first statement: the one starting “.custom #header.” It will allow you to nudge the header down if the contextual menu is overlapping it.

3. The second group of code, “context_submenu_blank” creates an id for the blank submenu line. Its values should match those of “context_submenu” for the most part. You will want to change the values in the “ul#context_submenu_blank li” section to make the blank line the same height as the non-blank line so the page contents don’t jump around when you select another tab.

An example of the Contextual Submenu in use

Below is the custom_functions.php code for two nav tabs, each with two Contextual Submenu child items. All of the child items have their own submenu, too. Note that in each pair of child items, the submenu only displays the other child item, not both. The blank submenu function and the parent/child relationship function have been omitted to simplify the example.

/* HOME NAV TAB */
function contextual_submenu_home() {
?>
    <ul id="context_submenu">
        <li><a href="#">Welcome to Rock City</a></li>
        <li><a href="#">Sites to Visit</a></li>
    </ul>
<?php
}
/* HOME: WELCOME TO ROCK CITY CHILD */
function contextual_submenu_welcome() {
?>
	<!--for home or front page parent tab -->
	<style type = "text/css">
	.custom ul#tabs li.home-item a {background: #FFFFFF; color:#000000;}
	</style>

    <ul id="context_submenu">
        <li><a href="#">Welcome to Rock City!</a></li>
    </ul>
<?php
}
/* HOME: SITES TO VISIT CHILD */
function contextual_submenu_sites() {
?>
	<!--for home or front page parent tab -->
	<style type = "text/css">
	.custom ul#tabs li.home-item a {background: #FFFFFF; color:#000000;}
	</style>

    <ul id="context_submenu">
        <li><a href="#">Sites to Visit</a></li>
    </ul>
<?php
}

/* ROCKS NAV TAB */
function contextual_submenu_rocks() {
?>
    <ul id="context_submenu">
        <li><a href="#">Basalt</a></li>
        <li><a href="#">Shale</a></li>
    </ul>
<?php
}
/* ROCKS: BASALT CHILD */
function contextual_submenu_basalt() {
?>
	<!--for non-home page parent tabs -->
	<style type = "text/css">
	.custom ul#tabs li.page-item-1 a {background: #FFFFFF; color:#000000;}
	</style>

    <ul id="context_submenu">
        <li><a href="#">Shale</a></li>
    </ul>
<?php
}
/* ROCKS: SHALE CHILD */
function contextual_submenu_shale() {
?>
	<!--for non-home page parent tabs -->
	<style type = "text/css">
	.custom ul#tabs li.page-item-1 a {background: #FFFFFF; color:#000000;}
	</style>

    <ul id="context_submenu">
        <li><a href="#">Basalt</a></li>
    </ul>
<?php
}
/* CONTEXTUAL MENU CONDITIONAL SELECTION FUNCTION*/
function contextual_submenus() {
	/* HOME PAGE */
	if (is_front_page())
		add_action('thesis_hook_after_header', 'contextual_submenu_home', '90');
	elseif (is_page('Welcome to Rock City'))
		add_action('thesis_hook_after_header', 'contextual_submenu_welcome', '90');
	elseif (is_page('Sites to Visit'))
		add_action('thesis_hook_after_header', 'contextual_submenu_sites', '90');
	/* ROCKS */
	elseif (is_page('Rocks'))
		add_action('thesis_hook_after_header', 'contextual_submenu_rocks', '90');
	elseif (is_page('Basalt'))
		add_action('thesis_hook_after_header', 'contextual_submenu_basalt', '90');
	elseif (is_page('Shale'))
		add_action('thesis_hook_after_header', 'contextual_submenu_shale', '90');
	/* Defaults to a blank line */
	else
		add_action('thesis_hook_after_header', 'contextual_submenu_blank', '90');
}
add_action('thesis_hook_before_header', 'contextual_submenus');

I hope you found this tutorial useful and clear. If you have any questions or comments, please feel free to comment or send me an email with the “Contact” tab!

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!

The Inevitable First Post

This is the fourth day I’ve had this blog, Thesis Theme Tools, but that is a lie. Actually, it’s the first day, and I had another one called Thesis Tools built off a subdomain of my main blog Anxiety, Panic & Health, for three days.

A dumb mistake

Let me explain: Just today I got the domain name for this blog and set it up. Stupid me erased the subdomain before I got everything moved over, though I did have copies of my custom.css, custom_functions.php, images, and an article I had written.. I lost all my Thesis settings, the first 3 days’ posts, and a couple of widgets, but I think I got off pretty clean for such a dumb move.

Anyway, in these 4 days you can see that I’ve got the basic setup done, my button images and header made, the fat footer in, and a few widgets. I decided not to try to replicate the posts, because you don’t want to read them, and I’ve got better things to do.

Fortunately, I have the whole day (mostly) to tinker with TTT. So far I’ve:
  • Set up the new domain, email, and installed WordPress 2.8 and Thesis 1.5.1.
  • Copied over the custom files, and found and copied the images I had made. Also did a search-and-replace on the domain name in my custom_functions.php file (145 of them!) so things wouldn’t break.
  • Made a new header image for TTT. It was the same size, so all I had to do is change the file name and it just worked — menu adjustments and all.
  • Made new dummy pages so my button bars will work.
  • Brought in some plugins and set them up.
Pretty good for 3 hours’ sleep, huh? So what’s to do after I take a nap? Here’s my list:
  • Finish this post and get it up.
  • Set up a FeedBurner account for Thesis Theme Tools.
  • Set up Google Custom Search for Thesis Theme Tools.
  • Decide where I want the search bar. I was thinking in the header, but it’s already pretty crowded. May just put it in the sidebar for right now. I do want to have a cute little spyglass, though.
  • Work on the footer widgets more to get the fonts larger in the heading and body.
  • Do my image-based RSS, email and Twitter for the sidebar that I lost. Fortunately, I’ve still got the images!
  • Do more detailed planning of the menu tree. I’ve decided not to make dummy pages for all my planned documents, because users would get irritated if they clicked on something and it was just a placeholder.
  • Replicate the tutorial on Contextual Submenus I lost in the move.
  • Finish writing the tutorial on Image-Based Menus/Submenus. Try to think up a better name for it. Button Bar Menu/Submenu?
  • Start writing content, such as the landing page and some content pages. I can take some of the latter from the DIY Snippets document where I keep some of the more common and/or long-winded replies on the DIYthemes Forum.
  • Think and research what it would take to do video tutorials.
  • Decide whether I want pictures on the blog and teasers. If I do, I need to contact HostGator about some necessary server setting changes for the teasers.

Is the design too garish and busy?

I’m concerned about the header. The design looked good as “Thesis Tools” but a bit crowded and busy using the same basic design for the current one. And I’m beginning to think that the whole color scheme looks a bit garish, what will all the different button colors. I actually do have a color scheme, and tried to get as close as I could to it with the button colors, but it’s hard when you have 8 of them. I’m still tinkering, so you may come back one day and it will be all different.

That’s enough for any day, especially since I need to spend some time on Anxiety, Panic & Health as well as visit the DIYthemes Forums a few times.
See you tomorrow!