Create Anchor Points in Category Titles of Loop

Change this line..

echo '<p class="topic-titles">'. $category->name.'</p> ';

to..

echo '<a name="' . $category->name. '"></a><p class="topic-titles">' . $category->name . '</p> ';

I assume that’s what you mean.. so hope that helps.. ??

Yes, brilliant, that’s exactly what I was after, thank you. One last thing if you don’t mind, Is there a way to target those anchors with a generated list (see below). The list below calls the category posts of the clicked on item, but I Just need it to go to the anchor point on the page instead, is that even possible?

I could hard code a list if need be but I’d much rather WordPress generated it so that I don’t have to change it each time I add a new category.

<div id="sidebar">
	<h3>Topics</h3>
	<ol>
		<?php wp_list_categories('exclude=4,7&title_li=&hide_empty=1'); ?>
	</ol>
</div>

Hope you can help, thank you.

Yeah i think we can manage that, but i think it’s worth asking first, do you have any custom styling based on the output of that category menu?

That would be great, thank you. I’m styling the category menu with CSS in a general manner, it looks the same no matter which categories are shown – I hope that was what you were asking.

What i mean is, does your CSS include styling for classes that are output by that list.. one example would be..

.cat-item {}

The reason i ask is because i can see an easy way to do it, but it would in effect be stripping those parts from the list, and rebuilding the list elements(minus the classes). So i’m simply asking beforehand if you have CSS dependant on classes that are output by the function.

If you could provide a link to your site i could check, would only take a few moments.

I see, I have the site set up so it can’t be accessed at the moment, I could go in and change that if it’s really needed. But I think the answer to what you asked is no, I’m only styling the div id=”sidebar”, h3 & ol, not any classes etc that are generated, so I think the ‘easy way’ you’re thinking of should work fine. Thank you.

Ok, i think i’m going to take a slightly different approach though, which should be more efficient.

Initially i was thinking i’d strip out the tags, and work from there, but that seems like alot of work, calling the function, have it render all that HTML only to strip it away(seems a little wasteful).

Will post something up shortly… ??

That’s great, I’m off to bed now so will check back in the morning, thank you for your help, it’s really good of you, I’m looking forward to testing it out!

Here you go, very basic, built for the task, only required data selected, so should be pretty much as efficient as it could be, short of hard-coding the links in.

$get_cats = get_terms( 'category' , array(
	'exclude' => '4,7' ,
	'orderby' => 'name' ,
	'fields' => 'names'
) );
if( !empty( $get_cats ) ) {
	$anchors = array();
	foreach( $get_cats as $key => $data )
		$anchors[] = '<a href="#' . $data . '">' . $data . '</a>';
	echo implode( '<br />' , $anchors );
}
unset( $get_cats , $key , $data , $anchors ); // Unsets data no longer needed

EDIT: Realised we’re working with a list (used basic links for testing, seperated by line breaks), so here’s another version.

$get_cats = get_terms( 'category' , array(
	'exclude' => '4,7' ,
	'orderby' => 'name' ,
	'fields' => 'names'
) );
if( !empty( $get_cats ) ) {
	$anchors = array();
	foreach( $get_cats as $key => $data )
		$anchors[] = '<a href="#' . $data . '">' . $data . '</a>';
	echo '<li>' . implode( '</li><li>' , $anchors ) . '</li>';
}
unset( $get_cats , $key , $data , $anchors ); // Unsets data no longer needed

I’ll be here tomorrow to, more then likely, any problems let me know…

And it’s no problem, only takes a few minutes(twice as long if i include the distractions from ollie(cat in my pic)). You’re welcome though… ??

Hello, thanks for the code it worked great – well, I say great, after I styled it all up it was working great in Safari but not in other browsers I tested. I see now it was how I did my styling so I just need to play around with that.

I really do appreciate the help you gave, btw I would be interested in your thoughts on a post I made a few days ago, Buttons to Change Loops on a Single Page. I couldn’t find any information on it so had to go the other route of linking to a second page, which works fine, but really curious to know if what I originally wanted is possible.

Thank you.

Ok i’ll reply in your other thread.
I’ll mark this one resolved.

??

I need to add some space after the end of each category’s posts, but before the next category starts. The only way I can do this with CSS adds space before the category title, which would be fine except I really don’t want the first category to have this space as it’s going to complicate things down the road.

Is it possible to add to the loop the following for example (if this is the best way): <div class=”title-spacer”></div> that will appear only at the end of each Category’s group of posts, so that I can style that with CSS. Sorry to be a pain, hope you can help, thanks.

Without being able to see the code that handles the display of posts it’s hard to make a suggestion, but i’m pretty confident you could do it with CSS.

If you could post up the relevant code i’ll be happy to make a suggestion.

Anything more then 10-20 lines please use a pastebin.

Just had a thought, could I target the anchor names to add the space before each category name but exclude the first category name.

https://wordpress.pastebin.com/XtbL1pRP

Thank you.

Try a bottom margin on the articles-articlemetadata class.

eg.

.articles-articlemetadata { margin-bottom:20px; }

Just had a thought, could I target the anchor names to add the space before each category name but exclude the first category name.

Can you elaborate a bit more, i’m not quite sure what you mean.