0

I'm currently building a WordPress theme where my page consists of widgets. One widget is a part of the page. I'd like to be able to use anchor links with them, and to do this, I would like to output the widget's title as an ID of the widget.

I know the widget has and ID already but it results in ugly anchor links - the anchor link would be url.com/#text-2. I would like it to be url.com/#about.

In the source code, this is the default HTML output:

<div id="text-2" class="widget-container widget_text">

This is the HTML output I aim for:

<div id="text-2 about" class="widget-container widget_text">

How do I achieve this?

Thanks in advance!


Update:

It seems an HTML element can't have two ID's.

Is it possible to instead add an <a> element within the widget's widget-title where the ID of the <a> is the widget's title?

So the HTML output looks like this: <h2 class="widget-title"><a id="about">About</a></h2>

  • a html element cannot have 2 id's - an ID is a unique identifier. You would have to create a new widget, give it the ID you want. I had to do this on a project I did recently, just recreated the widget I needed and changed the id and name to match my project – Gareth Gillman Oct 15 '15 at 12:52
  • Okay, I see. Thank you for clarifying that. I could achieve the same thing by adding a <a> element to the widget-title, so I edited my question. – mizuki Oct 15 '15 at 13:05
0

Yes you can add an around the title of the widget, you do this in the register_sidebar code which you would put in your functions.php

add_action( 'widgets_init', 'theme_register_sidebars' );
function theme_register_sidebars() {
 register_sidebar(
  array(
   'id' => 'mysidebar-sidebar',
   'name' => __( 'My Sidebar', 'themename' ),
   'description' => __( 'Widgets for my sidebar', 'themename' ),
   'before_widget' => '<div class="widget">',
   'after_widget' => '</div>',
   'before_title' => '<h2 class="widget-title"><a id="about">',
   'after_title' => '</a></h2>'
  )
 );
}

You create the new "widget area" or sidebar which you then put in actual widget in.

jQuery Version (not tested):

jQuery(document).ready(function($){
 $( '#id h2.widget-title').wrapInner( "<a id="about"></a>" );
});

You would then add the jQuery either to a JS file and Enqueue it or put it into wp_footer using the filter of the same name (link)

| improve this answer | |
  • Thanks, but I would prefer to use the same sidebar for all my widgets. – mizuki Oct 15 '15 at 13:20
  • You would then need to either, add the <a> using jQuery or php (using preg_replace). I will add a jQuery solution to my post. – Gareth Gillman Oct 15 '15 at 13:22
  • That sounds great! – mizuki Oct 15 '15 at 13:23
  • The jQuery code works! The perfect solution would be not having to add that code for each widget but it sure is a lot more flexible than adding a sidebar for each widget. Thank you! :) – mizuki Oct 15 '15 at 13:42
  • my pleasure, glad I could help :) – Gareth Gillman Oct 15 '15 at 13:45
-1

I was searching for a simplier way and I turned around by just adding a <span id="youranchornametag">First words/text of the element</span> Now you call it from where ever you like http://.../#youranchornametag.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.