ThemeShaper Forums » Thematic

wrapping <span> around links in #access

(11 posts)
  • Started 12 months ago by jamis
  • Latest reply from jamis
  • This topic is resolved

  1. jamis
    Member

    I'd like to use image rollovers for the links in #access, and it looks like each link needs to be wrapped with <span>

    I've looked at a bunch of the other topics on the board about this and the best solution I can find is to edit the file:

    themes/thematic/library/extensions/header-extensions.php

    I edited lines 356 and 357 from this:

    function thematic_page_menu_args() {
	'link_before' => '',
	'link_after'  => ''

    to this:

    function thematic_page_menu_args() {
	'link_before' => '<span>',
	'link_after'  => '</span>'

    It works perfectly, but I'd like to find a way to do it in my child theme, rather than in the parent theme. Nothing happens when I try to make the same edits to this file:

    themes/myChildTheme/library/extensions/header-extensions.php

    Does anyone have a suggestion on way to do this in my child theme?

    Thanks for your help!

    Posted 12 months ago #

  2. helgatheviking
    Moderator

    yeah. use filters. since you were digging around in header-extensions you should have seen the "thematic_page_menu_args" filter being called. so you create a function that pulls in the defaults, and mash it up with your new arguments... and send it back. i didn't test this, but it should work.

    function change_args($args){
   $mods = array(
        'link_before' => '<span>',
	'link_after'  => '</span>'
   );
   return wp_parse_args($mods, $args);
}
add_filter('thematic_page_menu_args','change_args');
    Posted 12 months ago #

  3. jamis
    Member

    Helga, thanks for your help. Please excuse me while I ask a stupid question: where does your code go? I'm guessing it goes here:

    themes/myChildTheme/functions.php

    But that's just a guess. I come at this from a design background, I can handcode HTML and CSS but PHP is greek to me.

    Posted 12 months ago #

  4. helgatheviking
    Moderator

    yes, you guessed right. all your custom code goes into your child's functions.php file.... at least until you get advanced enough to split it into different files. if you get that working, don't forget to mark this as resolved.

    Posted 12 months ago #

  5. jamis
    Member

    Helga, thanks again for your help. I followed your suggestion and I still can't get it to work.

    In my original post in trying to be brief I only reproduced three lines of the function. I'm wondering if I left out something important, so here is the full code for the function from thematic/library/extensions/header-extensions-php:

    // Create the default arguments for wp_page_menu()
function thematic_page_menu_args() {
	$args = array (
		'sort_column' => 'menu_order',
		'menu_class'  => 'menu',
		'include'     => '',
		'exclude'     => '',
		'echo'        => FALSE,
		'show_home'   => FALSE,
		'link_before' => '<span>',
		'link_after'  => '</span>'
	);
	return $args;
}
add_filter('wp_page_menu_args','thematic_page_menu_args');
    Posted 12 months ago #

  6. helgatheviking
    Moderator

    just tested it and my code produced

    <a href="#"><span>Link</span></a>

    exactly as expected

    Posted 12 months ago #

  7. jamis
    Member

    Helga, thanks again for your help. It still won't work for me. I feel like I'm probably overlooking something really obvious. At the risk of straining your patience, I have a couple of elementary questions.

    Is this how my child theme functions file should look in its entirety:

    <?php

// adding <span> before and after each <a> in #access

function change_args($args){
	$mods = array(
		'link_before' => '<span>',
		'link_after'  => '</span>'
   );
   return wp_parse_args($mods, $args);
}
add_filter('thematic_page_menu_args','change_args');

?>

    And that file should be here:

    themes/myChildTheme/functions.php

    And the menu that the function is altering is 

    div#head div#access div.menu ul.sf-menu li

    Thanks for your patience!

    Posted 12 months ago #

  8. helgatheviking
    Moderator

    idk about the CSS, but the functions look right. have you checked the markup? (aka View Source). if the span is THERE then you know you have a problem with your CSS selector.

    1. do you have a live link somewhere?

    2. are you sure you are using page_menu? if you've assigned a custom menu via the dashboard, WP will not default to wp_page_menu and instead will use wp_nav_menu

    Posted 12 months ago #

  9. jamis
    Member

    Helga, again thanks.

    I didn't assign a custom menu through the dashboard. I'm pretty sure I'm using wp_page_menu because the following code works when it's in thematic/library/extensions/header-extensions.php:

    function thematic_page_menu_args() {
	$args = array (
		'link_before' => '<span>',
		'link_after'  => '</span>'
	);
	return $args;
}
add_filter('wp_page_menu_args','thematic_page_menu_args');

    When I use that code in thematic's header-extensions.php file the <span> shows up when I view the source code with Firebug.

    Here's a live link. The site is currently using the default header-extensions.php file, and I've put your code in /themes/myChildTheme/functions.php

    Posted 12 months ago #

  10. helgatheviking
    Moderator

    try my code again with a priority. i quasi remember something about that from somewhere... how's that for vague?

    add_filter('thematic_page_menu_args','change_args',99);

    otherwise, i don't really know what to tell you. my live sandboxes are full or i'd put it up live.

    what version of thematic are you using? use the latest stable dev version:
    http://developing.thematic4you.com/thematic-development-release/

    Posted 12 months ago #

  11. jamis
    Member

    Solved! I was using thematic 0.9.7.7 instead of the current 0.9.8. That made all the difference. I didn't need the "99"

    Thanks so much for your help and your patience!

    I'm going to restate the solution below for my own future reference:

    ----

    To use images for navigation links instead of text in #access, spans need to be added around the link text:

    <a href="home"><span>Home</span></a>

    To add the spans, put this code in the file /themes/myChildTheme/functions.php:

    // adding <span> before and after each <a> in #access

function change_args($args){
	$mods = array(
		'link_before' => '<span>',
		'link_after'  => '</span>'
   );
   return wp_parse_args($mods, $args);
}
add_filter('thematic_page_menu_args','change_args');

    Make sure that the version of Thematic is at least 0.9.8

    Posted 12 months ago #

RSS feed for this topic

Reply

You must log in to post.