I need to add HTML to the Category names within my Wordpress theme, so that I can define the name as an icon (via the Twitter bootstrap).
Example code as follows:
<a href="link">
<i class="icon-briefcase"></i>
</a>
This would present the Category name as a linked icon.
Is there any way to do this. I've searched endlessly and the only Wordpress plugins I can find allow HTML to be added to the Category description only.
Thanks in advance.
I think what you're trying to do you can easily solve like this:
<?php
foreach((get_the_category()) as $category) {
echo '<a href="link">';
echo '<i class="icon-briefcase">' . $category->cat_name . '</i>';
echo '</a>';
}
?>
This will make all the category names appear like linked icons, like you said. If you want each name to have a different icon you can of course add a conditional statement to render different HTML based on the category name or ID.
EDIT:
Because you want to use the Twitter Bootstrap, you need to assign css classes to the links in order to the display the icon. There are two ways you can do this. One of 'em being that you could name your categories the same as the icons. For example, a category named 'briefcase', would render a link with the class 'icon-briefcase'. The code:
<?php
// Iterate through the available categories
foreach((get_the_category()) as $category) {
echo '<a href="link">'; // Display a link
echo '<i class="icon-' . $category->cat_name . '">' . $category->cat_name . '</i>'; // Create the <li>
echo '</a>';
}
?>
The second way, and I think a bit better for content purposes (more freedom for choice of cat names), would be to use a conditional statement in the code to assign icons to certain categories. For example:
<?php
// Iterate through the available categories
foreach((get_the_category()) as $category) {
// First define a default css name class to use
$iconclass = 'icon-default';
// Then using an if statement, assign a new css class name to the variable based on the name of the category
if($category->cat_name == 'Travel') { $iconclass = 'icon-briefcase'; }
echo '<a href="link">'; // Display a link
echo '<i class="'. $iconclass . '">' . $category->cat_name . '</i>'; // Create the <li>
echo '</a>';
}
?>
I hope this is clear enough.
I think what you want is just the Category Icons plugin.
I just had a similar kind of requirement to add a big capital letter at the beginning on some category names, (but not others) in the same list. The easiest way I found of doing this was using CSS. This is what I ended up doing
#projects-term-4 h5 a:before {
content:'H';
font-size:80px;
display:block;
margin-bottom:10px;
color:white;
}
#projects-term-5 h5 a:before {
content:'S';
font-size:80px;
display:block;
margin-bottom:10px;
color:white;
}
... etc
You could probably impliment a very simple workaround using this method without knowing any php coding or installing any extra plugins. you'll just need to inspect the html code of the generated page to get the class names and id's you need.
Related
This question already has answers here:
How can I apply a jQuery function to all elements with the same ID?
(4 answers)
Closed 5 years ago.
I have a wordpress site where my index page will display the post title, thumbnail, and list all available post categories. Each instance of a post will also display all available post categories. For each category the post has, the category name should be highlighted with a light blue background color. Currently the background color feature is working for only the first post and not the other three.
My code below is intended to push each of the post's categories into an array and search the array for the given category (the code below searches for just one of the categories for brevity's sake here). If the category is found, a jQuery script should execute highlighting the category name but as I say above, it's only functioning for the first post.
Can anyone see what I'm doing wrong? Thanks in advance.
<section class="blog-index">
<?php
$args = array('showposts' => 3);
$recent = new WP_Query( $args );
if( $recent->have_posts() ):
echo '<div class="blog-index-list">';
while ( $recent->have_posts()) :
$recent->the_post();
$categories = get_the_category();
$cats = array();
foreach($categories as $category) {
$cats[] = $category->name;
}
if(in_array("Academia", $cats)) {
echo "<script type='text/javascript'>
jQuery('#A').addClass('active');
jQuery('#A').css({'background-color': #009edb', 'color': '#ffffff'});
</script>";
}
echo '<article>
<h2><hr class="orange-line above-left"> <a href="'.get_the_permalink().'">
<span class="dark-blue">' .get_field('dark_blue_hero'). '</span><br/>
<span class="light-blue">' .get_field('light_blue_hero') . '</span></a>
</h2>
<ul class="all-categories">
<li id="G">G</li>
<li id="A">A</li>
<li id="I">I</li>
<li id="N">N</li>
</ul>
<img src="'.get_the_post_thumbnail().'' .
'<div class="blog-index-button et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
<a class="et_pb_button et_pb_button_3 et_pb_module et_pb_bg_layout_light" href="' . get_the_permalink() . '">READ POST</a>
</div>
</article>';
endwhile;
echo '</div>';
endif;
wp_reset_query();
?>
IDs should be unique (as Barmar said) but it is still possible to have multiple elements with the same ID. And it is possible to select them with jQuery. That is why I'll also explain how to do it with classes.
When you use the jQuery ID selector (jQuery("#id")) it selects the first element with the given ID id.
To select all elements with ID id you can select them by their attribute(s):
jQuery("li[id=id]")
Since IDs should be unique it is better to use classes. Using the jQuery class selector jQuery(".class") you can select all the elements with the class class. You should change your li elements to have classes instead of IDs and select those classes with jQuery.
I would like to customize the read-more link on my WordPress theme, however I would like it to be able to get the attributes sent in the read more tag.
So the <--more--> tag would return the default
While <--more Some Attribute --> would return Some Attribute.
I'm aware that I can edit the read more text with what's below. I just can't figure out how to get the attributes or vars that are passed to the more short-code. If I could figure this out I could simply check if it exists and if not then place in the default text.
function modify_read_more_link() {
return '<div class="read-more"><a class="more-link button" href="' . get_permalink() . '">Custom Read More Link Text</a></div>';
}
what customization you are trying to do ? what about changing the class or using that class use jquery and customize the div !!!
WordPress makes this technique easy, and customizable.
https://codex.wordpress.org/Customizing_the_Read_More
I found the answer to my problem.
Inside my function.php file I needed
function wrap_readmore($more_link) {
//Check if link contains default (more...), if it does replace with Read More
if (preg_match('(more…)', $more_link)) {
$more_link = str_replace('(more…)', 'Read More', $more_link);
}
return '<div class="small-12 columns text-center">' . $more_link . '</div>';
}
add_filter('the_content_more_link', 'wrap_readmore');
I have built a Twentyeleven template site in wordpress, I only use pages in CMS (no posts). I have a page called "Classes", its page content will be updated regularly.
I'd like to add a square on the right hand corner of every page which displays the beginning part of the 'Classes' page, and a 'more' link underneath can lead people to the 'Classes' page.
At the moment, I just added a html div in the content-page.php as I am learning. Is there a plugin can achieve what I am aiming? Or can you please give me some directions on how to code this (some suggested code or learning links would be helpful)?
Thank you.
If you are trying to do it in PHP you can try something like this
<?php
$page_id = 11; //set page ID
$page_data = get_page($page_id);
$title = $page_data->post_title;
$permalink = get_permalink($page_id);
echo ''. $title . '';
echo '<p>' . the_excerpt() . 'Read more</p>';
?>
If you need the page ID for this script you can use this
<?php
$pages = get_pages();
foreach ( $pages as $page ) {
echo 'ID: '. $page->ID . ' title: ' . $page->post_title.'<br>';
}
?>
If you are trying to do it based on a widget you need to ensure these steps.
Inside the Twenty Twelve theme you have the section called Main Sidebar in the Widgets section. From this area you would add your widget that you want and ensure that all the pages you want the widget to be in is set to the "default theme" and not "Full-width Page Template, No Sidebar".
Also I do not know if you have made any changes to your code but if you have, you need to ensure that your wp-content/themes/twentytwelve/index.php still has this prior to the footer section.
<?php get_sidebar(); ?>
If you want to widen your widget area you can tamper with the CSS that controls the width but be warned that this could affect the stability of the items inside your container.
wp-content/themes/twentytwelve/style.css
Line 1446 - 1449
Edit the Width of
.widget-area {
float: right;
width: 26.041666667%;
}
You would also need to edit the Main site-content to have the proper proportioned percentage if the prior value is edited.
Line 1437 - 1440
.site-content {
float: left;
width: 65.104166667%;
}
You don't have to use a plugin
The thing you are trying to achieve is quite easily done by editing your template files, depending on your needs. I will suggest the simplest solution, but perhaps you may transform this snippet into a widget for a more dynamic/maintainable usage.
Edit the page.php template file in order to make something appear in every page of your Wordpress installation.
Set up the desired layout for your box (perhaps <div> with some float: right).
Get the page you desire and store it into a php variable, like so: <?php $page = get_page( $page_id ); ?>
Get the position of the <!--more--> tag, using stripos.
Get only the part before the <!--more--> tag, using substr.
Apply the_content filters and then echo.
Your code will look a bit like this:
<div class="right-info">
<?php
$page = get_page(id);
$more_tag = stripos( $page->post_content, '<!--more-->' );
$excerpt = substr( $page->post_content, 0, $more_tag );
echo apply_filters('the_content', $excerpt);
?>
</div>
I am not sure if this is possible !
I have two files say main.php and submenu.php
In main.php i have the following mainMenu
and in another file called submenu.php i have a list say
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
If i click on Pricelist in main menu i want to display the content of the submenu as a list under PriceList as
The simple solution may be including the list view in menu.php itself, But that's not the situation
Thank you.
You should use arrays and recursion. Like so:
(code is rough, sorry)
$menu = array(
'About Us',
'Categories',
'Price List' => array(
'1','2','3','4'
)
);
function loop_menu($menu){
foreach($menu as $m):
if(is_array($m))
return '<ul>' . loop_menu($m) . '</ul>';
else
return '<li>' . $m . '</li>';
endforeach;
}
echo loop_menu($menu);
Then use CSS to make it look however your want.
If you want to include a page just use
include('page.php');
But using JS & CSS is the best way
Here is a very helpful plugin
http://users.tpg.com.au/j_birch/plugins/superfish/
And don't forget to get jQuery
I am new to PyroCMS 2.1 - I am creating a new template and wondering how to implement the following navigation - can it be done in PyroCMS at all?
<ul id="navlist">
<li id="nav_one"><a id="link_one" href="#">Item 1</a></li>
<li id="nav_two"><a id="link_two" href="#">Item 2</a></li>
...
</ul>
Basically, I need a different set of ID's for each menu item (li and a elements).
Advanced navigation tag options doesn't help: http://docs.pyrocms.com/2.1/manual/index.php/modules-and-tags/tag-reference/navigation.
Thanks!
Doesn't look like there is a native way to do this in PyroCMS, but you can add a class to each li in the navigation section of the admin panel.
If you do decide you really need the id's generated in your templates, you could look at extending the navigation module and widget yourself. You could update the database to include the fields you need, update the navigation module controller and models (and admin panel views) and update the widget to include the fields in the navigation variable.
Good luck!
Why are you guys hacking the core?!
You can do what you like with the Navigation HTML output but using the Tag Pair syntax.
Gotta love those double tags.
/system/cms/modules/navigation/plugin.php
attributes of anchor
$item['url'] `enter code here`= $link['url'];
$item['title'] = $link['title'];
$item['id'] = str_replace(' ','-',strtolower($link['title']));
I add this lastnew line and search this code line 198 aprox and
add (id="' . $item['id'] . ')
$output .= $ident_b . '<' . $tag . ($classes > '' ? ' class="' . $classes . '" id="' . $item['id'] . '">' : '>') . PHP_EOL;
before you can use that ...... (in the menu vavigations)
and you css make e.g. if name link is New Products you use css .new-products{......}