How do I add fontawsome icon to footer menu i.e <ul><li><i class="fa-solid fa-arrow-up-right-from-square"></i> Category 1</li><ul> in a
<?php
if ( has_nav_menu( 'business-menu' ) ) :
wp_nav_menu( array(
'theme_location' => 'business-menu',
'items_wrap' => '%3$s',
'add_li_class' => 'list-group-item d-flex justify-content-between align-items-center border-0',
'container' => '',
));
endif;
?>
above is what have tried but stacked, anyone to help?
I would advice not to include the whole library for just few icons, that definitely slows down the site a bit.
-- you would need just 5-10 icons and the best solution would be to use the css and attach the svg's to classes, and add up the class to individual nav items like.
<ul><li><i class="social"></i> Category 1</li><ul>
.social::before {
content: '';
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
background-repeat: no-repeat;
background-size: 1rem 1rem;
/* set positioning and others */
}
You can get tons of svgs here: https://icons.getbootstrap.com/
and you can use the svgs in your html file as well, but just rendering them in a span tag.
Related
I am configuring Storefront theme. The handheld footer bar of Storefront shows links on mobile devices. However, now, it just shows Font Awesome icons (not include text). How to include text under Font Awesome icons in this case?
I have tried to edit some codes, but the search bar appeared as an error in handheld footer bar of storefront.
Php codes added to functions.php:
add_filter( 'storefront_handheld_footer_bar_links', 'jk_add_home_link' );
function jk_add_home_link( $links ) {
$new_links = array(
'home' => array(
'priority' => 10,
'callback' => 'jk_home_link',
),
);
$links = array_merge( $new_links, $links );
return $links;
}
function jk_home_link() {
echo '' . __( 'Home' ) . '';
}
CSS:
.storefront-handheld-footer-bar ul li.home > a:before {
content: "\f015";
}
The text “Home” will not be displayed if I use above codes. How to display it under the Font Awesome icon?
Your code is fine but the text is hidden by this property decleration:
.storefront-handheld-footer-bar ul li > a {
text-indent: -9999px;
}
play around with the indent to position it. Not tried.
Same question answered by myself on https://stackoverflow.com/a/68511882/11225860, coping it from there.
The text is hidden due to "text-indent: -9999px;" so you can change it as follows.
Here I am additionally added "line-height:" to arrange position of the text.
.storefront-handheld-footer-bar ul li > a {
text-indent: 0px;
line-height: 95px;
}
If you need to adjust position of the icons, you can add following css and make changes on the value.
.storefront-handheld-footer-bar ul li>a::before {
line-height: 2;
}
I created custom menu into my Wordpress site. I registered the new menu into functions.php file using this code:
// Add new Footer menu
function register_my_menu() {
register_nav_menu('new-menu',__( 'New Footer Menu' ));
}
add_action( 'init', 'register_my_menu' );
and after that inserted this line into footer.php file from current theme:
<?wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' =>
'new_menu_class' ) ); ?>
and menu is showing into footer, but its showing into list view, and I want to show vertically inline in footer, of course centered is possible. I used CSS to add inline styling like this:
.new_menu_class {
display:inline-flex;
}
But seems do not many any changes to menu in footer. Any help here?
You're applying styles to the container of the wp_nav_menu function where the structure of the returned html is
<div class="new_menu_class"> <ul> <li>...
'container_class'
(string) Class that is applied to the container. Default 'menu-{menu slug}->container'.
https://developer.wordpress.org/reference/functions/wp_nav_menu/
For your CSS to be applied on the list items (I'm assuming you wish to have the horizontally). you will need to add this class under the arguments for 'menu_class'
'menu_class'
(string) CSS class to use for the ul element which forms the menu. Default 'menu'.
If you applied the same class in your question to the menu_class you could apply the following:
.new_menu_class {
display: flex;
align-items: stretch;
justify-content: space-evenly;
width: 80%;
margin: 0 auto;
padding: 0;
}
Looking at your site I can see you have a set width container with media queries, I would suggest the same when applying this so as your UI is clear when viewing on smaller devices.
I have the following code which makes/inputs my navigation into my site. The links are created through the admin panel. I want to add a '|' separator in between the links
HTML
<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
functions.php
/* Register 'primary' navigation */
function wptutsplus_register_theme_menu() {
register_nav_menu('primary', 'Main Navigation Menu');
}
add_action('init', 'wptutsplus_register_theme_menu');
Current output
Link 1 Link 2 ...
Desired output
Link 1 | Link 2 ...
html
<div class='col-md-6'>
<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
</div>
Updated v2
You can use after parameter of wp_nav_menu(), with a small CSS trick.
Here is the code:
$menuParameters = [
'container_class' => 'main-nav',
'theme_location' => 'primary',
'menu_class' => 'my_custom_class', //<-- add this
'after' => '<span class="sep">|</span>' //<-- add this
];
wp_nav_menu($menuParameters);
Add this to you style.css
.my_custom_class li:last-child .sep{ display:none; }
Alternative way (with pure PHP approach)
$menuParameters = [
'container_class' => 'main-nav',
'theme_location' => 'primary',
'after' => '|', //<-- add this
'echo' => false //<-- add this
];
$nav_html = wp_nav_menu($menuParameters);
$needle = isset($menuParameters['after']) ? $menuParameters['after'] : '';
$index = strrpos($nav_html, $needle);
if ($index)
{
echo substr_replace($nav_html, '', $index, strlen($needle));
}
else
{
echo $nav_html;
}
All code is tested and works.
Hope this helps!
add the symbol |(as many as menu links you have) as u would add normally a custom link in the wordpress menu.
after that get the class or id of every element with devtools then apply this css to every one of the elements
.itemtofind{
pointer-events: none;
cursor: default;
}
you can customize the css element as you wish , add padding, color, etc.
in the past i made a web page with that feature and everything was right.
when you are in mobile apply the correct media query and hidde the symbols | with this css to the elements
display:none
I'm not super sure how wordpress styles their links, but this should emulate that, I don't think simply inserting the textnodes will work.
.wp-navigation {
border-right:2px solid black;
}
.wp-navigation:last-child {
border-right:none;
}
Use CSS. Something like this should work.
.main-nav a:after {
content: '|';
display: inline-block;
margin: 0 .5em;
}
I am working on my first Wordpress plug-in and it's been a lot of fun.
I was using echo to show HTML, but it was showing on the top of the page. Doing some digging, I found out that I should use "return" in the function. Switching to "return" is causing other issues. It looks like the string () I'm trying to output is being wrecked by "return". I can output the string using echo and it works (just in the wrong place).
Any thoughts?
function v3grid_func($atts) {
// Get the parameters from the shortcode
$atts = shortcode_atts(
array(
'count' => 3,
'link_to_all' => 'yes',
'css_class' => 'v3grid',
'categories' => '1'
), $atts
);
// Get list of recent posts
$args = array(
'numberposts' => $atts['count'],
'offset' => 0,
'category' => 0,
'orderby' => 'post_date',
'order' => 'DESC',
'include' => '',
'exclude' => '',
'meta_key' => '',
'meta_value' =>'',
//'post_type' => array('post', 'podcast', 'recipe', 'roundup'),
'post_type' => array('roundup'),
'post_status' => 'publish',
'suppress_filters' => true
);
$recent_posts = wp_get_recent_posts( $args, ARRAY_A );
// Figure out width requirement for each grid item
$width = 100/$atts[count];
$output = '';
// Container for row start
$output .= 'Start -> <div style="margin:0 -10px 0 -10px; box-sizing: border-box; position:relative; display:block;">';
// Loop through posts
foreach( $recent_posts as $recent ){
// Get the URL of the feature image for the post
$thumbnail = htmlentities(get_the_post_thumbnail_url( $recent["ID"], 'full' ));
$url = htmlentities(get_permalink($recent["ID"]));
$title = htmlentities($recent["post_title"]);
$output .= ' 1 - <div style="width:'.$width.'%; float:left; padding:10px; display:block;">';
$output .= ' 2 - <div><img src="'.$thumbnail.'" style="display:block; width:100%;"></div>'; // <-- Problem likely here
$output .= ' 3 - <div>'.$title.'</div>';
$output .= ' 4 - </div>';
}
// Container for row end
$output .= 'End -> </div>';
echo $output; // Shows everything as expected
return $output; // Does not show everything as expected (need to use return)
wp_reset_query();
}
add_shortcode('v3grid', 'v3grid_func');
Here is the output from both the echo and the return. I added to start, end, and numbers so I could trace the output. Thought it was a problem in my foreach.
An output using "echo" in function - output is good.
Start -> <div style="margin:0 -10px 0 -10px; box-sizing: border-box; position:relative; display:block;">
1 - <div style="width:25%; float:left; padding:10px; display:block;">
2 - <div><img src="/wp-content/uploads/THUMBNAIL-150x150.jpg" style="display:block; width:100%;"></div>
3 - <div>Post Title A</div>
4 - </div>
1 - <div style="width:25%; float:left; padding:10px; display:block;">
2 - <div><img src="/wp-content/uploads/THUMBNAIL-1-150x150.jpg" style="display:block; width:100%;"></div>
3 - <div>Post Title B</div>
4 - </div>
1 - <div style="width:25%; float:left; padding:10px; display:block;">
2 - <div><img src="/wp-content/uploads/Thumbnail-Image-150x150.gif" style="display:block; width:100%;"></div>
3 - <div>Post Title C</div>
4 - </div>
1 - <div style="width:25%; float:left; padding:10px; display:block;">
2 - <div><img src="/wp-content/uploads/SnacksTHUMBNAIL-150x150.jpg" style="display:block; width:100%;"></div>
3 - <div>Post Title D</div>
4 - </div>
End -> </div>
Output if using "return" in function - Output is bad/broken
Start ->
1 - <div style="width:25%; float:left; padding:10px; display:block;">
2 - <div><img src="/wp-content/uploads/THUMBNAIL-150x150.jpg" style="display:block; width:100%;"></div>
3 - <div></div>
3 - <div></div>
3 - <div><a href="/roundup/post3/">Post Title C</div>
4 - </div>
1 - <div style="width:25%; float:left; padding:10px; display:block;">
2 - <div><img src="/wp-content/uploads/SnacksTHUMBNAIL-150x150.jpg" style="display:block; width:100%;"></div>
3 - <div><a href="/roundup/post4/">Post Title D</div>
4 - </div>
End -> </div>
There are a couple of issues. Let's talk about them.
You need to put quotes around the key count for the width equation, i.e. $atts['count'];.
You want to use the escape sanitizers in WordPress instead of just htmlentities.
You need to reset the query before you returning. Best practice is to place it right after the foreach.
Shortcodes must return and not echo. They get processed with either do_shortcode() or when the content is processed.
Revised Code
Here's the revised code which implements the above. I tested this code in my sandbox site and it works without issue.
add_shortcode( 'v3grid', 'v3grid_shortcode_processing' );
/**
* v3grid shortcode processor. It builds the HTML markup for
* the most recent posts and assembles them into a grid markup
* structure.
*
* #since 1.0.0
*
* #param array $atts Array of user-defined attributes
*
* #return string
*/
function v3grid_shortcode_processing( $atts ) {
$atts = shortcode_atts(
array(
'count' => 3,
'link_to_all' => 'yes',
'css_class' => 'v3grid',
'categories' => '1',
), $atts, 'v3grid'
);
// Get list of recent posts
$args = array(
'numberposts' => (int) $atts['count'],
'post_type' => 'roundup',
'post_status' => 'publish',
);
$recent_posts = wp_get_recent_posts( $args, ARRAY_A );
if ( ! $recent_posts ) {
return '<p>Sorry, there are no posts to display.</p>';
}
// Figure out width requirement for each grid item
$width = 100 / (int) $atts['count'];
// Container for row start
$output = 'Start -> <div style="margin:0 -10px 0 -10px; box-sizing: border-box; position:relative; display:block;">';
// Loop through posts
foreach ( $recent_posts as $recent ) {
$thumbnail = get_the_post_thumbnail_url( $recent["ID"], 'full' );
$url = get_permalink( $recent["ID"] );
$output .= ' 1 - <div style="width:' . (int) $width . '%; float:left; padding:10px; display:block;">';
$output .= ' 2 - <div><img src="' . esc_url( $thumbnail ) . '" style="display:block; width:100%;"></div>';
$output .= ' 3 - <div>' . esc_html( $recent["post_title"] ) . '</div>';
$output .= ' 4 - </div>';
}
wp_reset_query();
$output .= 'End -> </div>';
return $output;
}
Now What?
Now you've fixed the problems in your shortcode function. Okay, but you said the original problem was: It works perfectly when you echo but not when you return. That means something is filtering out your HTML text after you return it.
Right? If the HTML is perfect when echoing but wonky when processed through the website and rendered out into the browser, then you know the remaining part of the problem is likely after your code above.
I'd start with looking at your plugin. Make sure you are not doing something such filtering the_content. Disable the rest of your plugin's code and see if the shortcode renders properly.
If that doesn't fix it, then disable all other plugins. Does the problem go away? Switch to a default WordPress theme. Does the problem go away?
This approach is what we call an elimination methodology. You are eliminating all variables and possible contributors, stripping the site down to the bare bones in an effort to find the root cause.
As I said, it works without issue on my sandbox machine. But my setup will not be the same as yours. Stripping the site down to the bare essentials helps you to sniff out what is causing the problem.
Tips for Improvement
Here is a list of improvements to help you too:
You do not need to include the default state elements with the arguments you pass to wp_get_recent_posts(). Notice that I reduced them in the above code.
You want to validate if wp_get_recent_posts returns a falsey. That means there were no posts that meet your criteria.
Include the shortcode name when you do shortcode_atts. While this is not contributing to your issue, it's a better practice to allow other developers access.
Use class attributes and move the inline styles into a stylesheet.
Separation of Concerns
It's a best practice to remove the HTML from the PHP business logic. Place the HTML into a view file. Why? Separation of concerns. It also improves readability.
Here's an example for you.
This is the view file. Let's call it views/v3grid.php. Notice that it's native HTML, which makes it easier to read.
<!-- Start v3grid -->
<div style="margin:0 -10px 0 -10px; box-sizing: border-box; position:relative; display:block;">
<?php foreach ( $recent_posts as $recent ) :
$thumbnail = get_the_post_thumbnail_url( $recent["ID"], 'full' ); ?>
<!-- v3grid item -->
<div class="v3grid--item" style="width: <?php echo (int) $width; ?>%; float: left; padding: 10px; display: block;">
<div class="v3grid--thumbnail">
<img src="<?php echo esc_url( $thumbnail ); ?>" style="display: block; width: 100%;">
</div>
<div class="v3grid--entry-title">
<?php esc_html_e( $recent["post_title"] ); ?>
</div>
</div>
<?php endforeach; ?>
<!-- End v3grid --></div>
Then in your shortcode function, you replace this code like this:
add_shortcode( 'v3grid', 'v3grid_shortcode_processing' );
/**
* v3grid shortcode processor. It builds the HTML markup for
* the most recent posts and assembles them into a grid markup
* structure.
*
* #since 1.0.0
*
* #param array $atts Array of user-defined attributes
*
* #return string
*/
function v3grid_shortcode_processing( $atts ) {
.. this all remains the same as above
// Figure out width requirement for each grid item
$width = 100 / (int) $atts['count'];
ob_start();
include( __DIR__ .'/views/v3grid.php' );
$html = ob_get_clean();
wp_reset_query();
return $html;
}
Then you can pull out all of the inline styles and add them into an external stylesheet.
When writing shortcode, you return inside it's function, and to call it inside your .php files you use: echodo_shortcode().
Consider using just usual echoing function, unless it is supposed to be used by your plugin user's via dashboard.
As manual says:
If the shortcode produces a lot of HTML then ob_start can be used to capture output and convert it to a string[...]
So, your code have to use a echo and shall return the generated string:
function v3grid_func() {
ob_start(); // open the buffer
/**
all your code
**/
echo $output; // as you did
return ob_get_clean(); // return from buffer and clean the buffer
}
this is my code for navigation ----->
$main = array( 'theme_location' => 'header-menu' , 'link_before' => '<span>',
'link_after' => '</span>','container' => '',
'items_wrap' => '%3$s',
);
wp_nav_menu( $main );
i am applying span tag to style li items . what i actually want to do is that span tag should only be applied to main menu (depth = 1 in hierarchy ) and not to its sub menus(in drop down)
html ouptut is something like
<ul class=main>
<li><span>Testimonials</span></li> >
<li><span>Testimonials</span></li> >
<ul class ="sub=menu" >
<li><span>Testimonials</span></li> >
</ul>
<li><span>Testimonials</span></li> >
</ul>
i dont want span tag in sub-menu class li items, is there a way to do this .?
If you want to style the sub-menu differently, the identifier you should be using is .sub-menu but depending on the theme you are using, the author for the theme might have styled either the UL, LI, or A of the menu. Find that out from style.css and write your code for the same identifier.
eg. if style.css contains something like this
.menu li a { background: #fff; }
then you'll need to write this line:
.sub-menu { background: #888; }
It's also a good practice to use background if the theme's style used 'background', and 'background-color' if the theme's style used background-color.