I'm building a site into which I'm incorporating a wordpress blog and during my customisation of a theme I've run into a slight snag.
I'm using a couple of widgets in the footer to display recent posts etc but they are displaying with their own inline styling. I can't find anywhere that may be adding the styling but I have found the function in the functions.php file that adds the id and class for the elements in question and I'm wondering whether I can add some php to the function in order to remove the styling that follows:
code is as follows:
function twentythirteen_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Widget Area', 'twentythirteen' ),
'id' => 'sidebar-1',
'description' => __( 'Appears in the footer section of the site.', 'twentythirteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
the on-page code is like this:
<aside id="recent-posts-2" class="widget widget_recent_entries masonry-brick" style="position: absolute; top: 0px; left: 0px;">
so i want to leave the id and class but just strip out the "style" elements
I know php may not be the best way to do this so i'm open to suggestions but if i can pop a preg replace or reg ex etc into the function that would be great.
Cheers guys
I had this problem earlier and as suggested in the comments by #Damien Pirsy, the issue was that the masonry jquery plugin was enqueued in the theme's functions.php file like so:
<?php
// Remove the following
if ( is_active_sidebar( 'sidebar-3' ) ) {
wp_enqueue_script( 'jquery-masonry' );
}
?>
This is a relic from the original WordPress twentyfouteen theme so make sure to test well after you remove it.
Related
I'm going through a client's site using Siteimprove's chrome extension to test for compliance. I'm getting a "Landmarks with identical names" error on two asides in one sidebar area. In the register sidebar code in functions.php, I have:
'before_widget' => '<aside id="%1$s" class="widget %2$s" aria-label="Job Openings and Events">',
This is working and assigning the label, but there are two widgets in this sidebar (a text widget and events list widget) and Wordpress is creating an aside for each with the same label. Is there some sort of nth assignment or something I can do to assign each aside in this sidebar with a different label to prevent redundancy?
See this example,
function my_edit_widget_func($params) {
$params[0]['before_widget'] = '<aside id="%1$s" class="widget %2$s" aria-label="' . $params[0]['widget_name'] . '">' ;
return $params;
}
add_filter('dynamic_sidebar_params', 'my_edit_widget_func');
Hope this will helps you. For more information please visit.
dynamic_sidebar Function to Generate Class
Add class to specific widget in WordPress
Wordpress : Change title of sidebar widget dynamically
Ask
register_sidebar(array(
'name' => 'Footer #2',
'id' => 'footer2',
'description' => 'Footer widget 2',
'before_widget' => '<aside role="complementary" id="%1$s" class="widget-content footer-widget" aria-label="[title]">',
'after_widget' => '</aside>',
'before_title' => '<h2 class="widget-title footer-widget-title">',
'after_title' => '</h2>' ,
));
function stp_accessibility_widget_func($params) {
$name = isset($params[0]['widget_name']) ? $params[0]['widget_name'] : "";
$params[0]['before_widget'] = str_replace('[title]', esc_attr($name), $params[0]['before_widget'] );
return $params;
}
add_filter('dynamic_sidebar_params', 'stp_accessibility_widget_func');
Use this solution it will add aria-label in all the widgets
I am running a Avada theme together with WooCommerce on a wordpress site.
The issue is that I'm trying to get a search function on the top of the page, but only in responsive mode (on mobile devices). I've been able to add a third option for a sidebar in woocommerce. this shows up in the config (where to choose which widgets should go in). But I can NOT get it to show.
I know that you get the original sidebars like this (copied directly from original archive-product.php):
<?php
do_action( 'woocommerce_sidebar' );
?>
So I figured it should be possible to call for our own sidebar with the following line :
<?php
do_action( 'woo_sidebar-3' );
?>
This does not work though.
Since this has to be able to be shown only on responsive devices we used a custom css option of fusion to hide the other sidebars the following way :
#media only screen and (max-width: 720px) {
#sidebar {
display: none;
}
}
Which of course is too simple since it would block ALL sidebars. But that's something we could easily change. So far, the 3rd sidebar that we created does not show on responsive nor on desktop versions of the site. while the others do show on the desktop but not on the responsive (as desired).
EDIT-:
So i tried this with the following code :
<?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('woo_sidebar_3') ) { ?>
<p>Oops... this displays if the topbar is not set up</p>
<?php } ?>
It shows the error as given in the code, so it tries to pull the sidebar as we created. But it doesn't show. Is it because the following might not work correctly? :
'woo_sidebar_3' => array(
'label' => esc_html__( 'Global WooCommerce Product Sidebar 3', 'Avada' ),
'description' => esc_html__( 'Custom sidebar 3', 'Avada' ),
'id' => 'woo_sidebar_3',
'default' => 'None',
'type' => 'select',
'choices' => $sidebar_options,
'active_callback' => array( 'Avada_Options_Conditionals', 'is_woo' ),
Which was copied from the one right above that, which is called woo_sidebar_2?
EDIT 2 -:
Here is a JSfiddle with the complete sidebars.php code in it, and the dynamic_sidebar code (as HTML). the error I was pointing at is also visible when you run te script.
I'm not familiar enough with the Avada theme to know what some of those options mean and your block of code doesn't show the register_sidebar() call even though Avada must be using it.
To make things simpler, you could use standard WordPress code for registering a widget area
In your theme (ideally a child theme) add:
function so_38033924_widgets_init() {
register_sidebar( array(
'name' => __( 'Global WooCommerce Product Sidebar 3', 'your-theme' ),
'id' => 'woo_sidebar_3',
'description' => __( 'Custom sidebar 3', 'your-theme' ),
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'so_38033924_widgets_init' );
You would need to make sure the before_widget, before_title, type of parameters match the parent theme so that your widget will get the same styling.
And then your template code looks right to me:
<?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('woo_sidebar_3') ) { ?>
<p>Oops... this displays if the topbar is not set up</p>
<?php } ?>
I have a sidebar in WordPress I've registered like so:
register_sidebar(array(
'id' => '404',
'name' => __('404', 'jointstheme'),
'description' => __('The 404 sidebar.', 'jointstheme'),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
));
I duplicated my existing 'sidebar.php' file and created a file called: sidebar-404.php.
I also added the call to my sidebar in the 404 page template like so:
<?php get_sidebar('404'); ?>
Yet for some reason, my theme keeps defaulting to the default sidebar.
Anyone have any ideas what might be going on?
Thanks!
When you register a sidebar in your functions.php file and want to use the widget manager in from the admin panel, you need to use dynamic siderbars not get_sidebar. get_sidebar will only display the widgets that are coded into the file.
Instead of <?php get_sidebar('404'); ?> you should have something like <?php dynamic_sidebar( '404' ); ?>
Hello Guys Im trying to put a search box in my menubar and I was able to do it BUT how can I use the woocommerce search product instead??
heres my current Code in the function.php:
add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
function add_search_box( $items, $args ) {
$items .= '<li>' . get_search_form( false ) . '</li>';
return $items;
}
I want to put Woocommerce_product_search in my MENUBAR anybody can help me.
SOrry for the ENglish im really not good in it.
Register a Sidebar in your Functions.php and then add the sidebar into your container where you want the search box to appear. Then add the Woocommerce Search Widget to this sidebar inside the Wordpress Admin interface.
Add this to Functions.php:
register_sidebar(array(
'id' => 'search-widget',
'name' => __('Search Widget'),
'description' => __('Drag search widget to this container'),
'before_widget' => '<article id="%1$s" class="widget %2$s">',
'after_widget' => '</article>',
'before_title' => '<h6>',
'after_title' => '</h6>'
));
}
Add this to your Header.php or whichever file contains the code where the search box needs to go:
<?php dynamic_sidebar("search-widget"); ?>
I have used the following PHP code to register a sidebar:
register_sidebar(array(
'name' => 'Owner\'s main page intro left sidebar.',
'id' => 'main-left-sidebar',
'description' => 'This is the main side bar of the theme i.e. the information of the author on the index page will be displayed using it. Note: It MUST have a single text widget or otherwise it may distort the theme',
'before_widget' => '',
'after_widget' => '</p>',
'before_title' => '<div class="porse"><h3 id="titlehead">',
'after_title' => '</h3></div><p class="porse-lead">'
));
So that when I add a widget (I'm working with a text widget), it generates something like the following:
<div class="porse">
<h3 id="titlehead">I'm Kamran Ahmed</h3>
</div>
<p class="porse-lead">I make websites. I help small businesses, start-ups, individuals, and fellow web agencies make the most of their web presence.</p>
But whenever I add a widget to the sidebar, it keeps producing the following markup:
<div class="porse">
<h3 id="titlehead">I am Kamran Ahmed</h3>
</div>
<p class="porse-lead"> </p>
<div class="textwidget">I make websites. I help small businesses, start-ups, individuals, and fellow web agencies make the most of their web presence.</div>
<p></p>
Can anyone please tell me, what I'm doing wrong here. Why isn't it producing the markup that I want?
You can't use <div> tags inside <p> tags.
Try this instead:
register_sidebar(array(
'name' => 'Owner\'s main page intro left sidebar.',
'id' => 'main-left-sidebar',
'description' => 'This is the main side bar of the theme i.e. the information of the author on the index page will be displayed using it. Note: It MUST have a single text widget or otherwise it may distort the theme',
'before_widget' => '',
'after_widget' => '</div>',
'before_title' => '<div class="porse"><h3 id="titlehead">',
'after_title' => '</h3></div><div class="porse-lead">'
));