wordpress

Showing code examples in WordPress posts

Posted by on Oct 5, 2010 in howto, wordpress

Very  brief post here, I’ve just spent literally 3 hours writing my last post – trying to show examples of the wordpress php and css I used to create a custom horizontal menu.

There are many great plugins out there that help you show code in your posts.  I specifically needed something that:

  • can be used in the Visual side of the WYSIWYG
  • can survive flipping back and forth between HTML and Visual without losing code or format
  • can handle <?php wp_nav_menu($args); ?>

The plugin that can do this, after 3 hours of trying various options, is SyntaxHighlighter Evolved.

With this plugin activated, I just paste my code within [code][/code] tags – right in the Visual editor.

Some finicky things I noticed:

  • If there are any blank lines in your code, you will end up with extra <div>, <br>, <p> tags that don’t belong
  • If you have code that is on two lines, but separated by a blank line – the display will number 3 lines of code.  To fix this, go into the HTML side of the WYSIWYG and backspace until your code is all on one line, then separate by hitting enter/return once. (If you try this on the Visual side, you will end up with a <br> tag that you don’t want.)
Learn More
Working with WordPress custom menus 1

Working with WordPress custom menus

Posted by on Oct 5, 2010 in howto, pseweb, wordpress

Today I replaced two static links with a custom WordPress menu in a site that I am working on.

Here is where I am starting with, in static XHTML and CSS:

Screen capture of the menu I am working on


And here is the code:

[code]<div id="siteindex"><a href="sitemap.html">Site Index</a></div><br /><br />
<div id="quicklinks"><a href="quicklinks.html">Ivey Quicklinks</a></div>[/code]

Below is the process for converting the above into an identical end result, built with a WordPress custom menu instead of static XHTML.

Creating the actual custom menu in WordPress

  1. In your WordPress dashboard, under Appearance, go to Menus.
  2. Enter a new menu name (I recommend one word) and hit Create Menu.
  3. Add the pages you would like to include and drag/drop into the desired order.
  4. Go to Screen Options and check the CSS Classes box.
  5. Expand each page in your menu and add the desired class.
    Note: For me, I added the same class to each of my items (“whitelinks”).
  6. Save Menu.

Pulling in my custom menu

  1. First, I need the wp nav menu code
    [code]<?php wp_nav_menu($args); ?>[/code]

  2. Then you tell your site which of your custom menus that you want to display – mine is called Sitemap.
    [code]’menu’ => ‘Sitemap'[/code]

  3. Then I define what class the div surrounding my menu is.
    [code] ‘container_class’ => ‘siteindex'[/code]

  4. Finally, I define the ID of the div.
    [code]’container_id’ => ‘navmenu’ [/code]

  5. And I end up with:
    [code]<?php wp_nav_menu( array(‘menu’ => ‘sitemap’, ‘container_class’ => ‘siteindex’, ‘container_id’ => ‘navmenu’ )); ?>[/code]

    Note: the $args  got replaced with array(), and each detail (argument) that I added is separated by a comma and a space.

Formatting my custom menu

Originally, my menu items were formatted by a class on the <a> tag.  When we use PHP to pull a dynamic menu into WordPress, the menu is pulled in as a list (ul) – each item is a new list item (li). While WordPress does allow me to define a CSS class for each item of my custom menu, it applies this class to the <li> tag for that menu item, rather than the <a> tag.

So, what I have to do is tell WordPress to format a link within a specific class:

[css]a.whitelink {font-size: 11px; color: #FFFFFF; text-decoration: none;}<br /><br />
a.whitelink:hover {text-decoration: underline;}[/css]

My last step is adding the code to take my bulleted list and turn it into a horizontal menu (items all on one line/side by side):

[code]#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu li {display: inline; }<br /><br />
#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu li {display: inline; padding: 5px 10px 5px 10px}[/code]

Done!

Sources:

Learn More