Adding Styling to WooCommerce drop down? - css

Not sure if styling (CSS) is possible w/ this php code, but if anyone knows how i can style this ( with colors, etc) please let me know! this is the basic WooCommerce drop-down code that's placed in my template files
<?php the_widget( 'WC_Widget_Product_Categories', 'dropdown=1' ); ?>

Using Plugin :
https://wordpress.org/plugins/widget-css-classes/
Please note that this plugin doesn't enable you to enter custom CSS. You'll need to edit your theme's style.css or add another plugin that allows you to input custom CSS.
Refer this for full article
http://www.wpbeginner.com/wp-themes/how-to-add-custom-styles-to-wordpress-widgets/

Related

Elementor - adding custom code right after the <head> tag

Not sure if this is only problem for Elementor full width template, but it seems to override theme header.php. I tried achieving my goal by using elementor custom code feature, but it adds my code somewhere in middle of the tag.
What is the propper way of adding my own custom code as the first thing that is after the element?
You are right Elementor overrides the theme's header.php file so importing your code to this file is not effective. You need to add custom function to earn your goal. With the wp-head action you could add the code right into your header and Elementor will not override it.
Add this code to the functions.php file od your active theme.
add_action('wp_head', 'custom_head_function');
function custom_head_function(){
?>
YOUR HEADER CODE HERE
<?php
};
UPDATE - If you want to set your code at the top
As sephsekla mentioned in comment, there is a way to set the priority into your action to get it to the top. Try to set value to -999. So, choose a very low number and if there is no other lower number in your plugin or theme you will go straight to the top.
add_action('wp_head', 'custom_head_function', -999);
function custom_head_function(){
?>
YOUR HEADER CODE HERE
<?php
};
Elementor now supports custom code (javascript, html, etc) and supports the specific use of elements in the head of the page.
What you are looking for you can find at the Wordpress Dashboard> Elementor > Custom Code . Then you will be able to add a custom code to the head: https://elementor.com/help/custom-code-pro/

Show widget outside sidebar - WORDPRESS

I'm using a theme total made by me. I need to show Sidebar Login plugin's widget in header.
I tried this in header.php:
<div class="login"><?php the_widget('sidebar-login');?></div>
Page load without error and I have a space occupied by that div, but there is nothing inside. Maybe it is because I insert no $instance and no $args after $widget, but I don't know what they are.Maybe i need specific code for the plugin i linked.Thank you in advance.
Ciao Michele,
are you trying to use Sidebar Login plugin from Mike Jolley?
According to the codex, the_widget method wants the plugin Class Name, not the namespace, your code should work if you use something like this:
<?php the_widget('Sidebar_Login_Widget');?>
If you are using a different plugin you have to check the correct class name in php code.

WordPress : Customize Genesis header

I am just diving into the Genesis Framework.
In a normal theme, if you want to edit the header, you'd open the header.php file.
But in genesis, the header file is not in the child theme. I have looked around and found a way to add custom header support, but i need some guidance.
The code below is to enable custom header support. I assume this goes into the functions.php file. But how to i actually add code here? What if i want to say pull in a custom field, or add a div to this section, or bring a slider in? How to i actually use this code to let me add html and php into the child theme header?
/** Add custom header support */
add_theme_support( 'genesis-custom-header',
array( 'width' => 960, 'height' => 100, 'textcolor' => '444',
'admin_header_callback' => 'minimum_admin_style' ) );
First you need to remove the header that is currently there. All of this goes into functions.php in your child theme
remove_action('genesis_header','genesis_do_header');
Then is it as simple as building a function to act as your new header.
function injectHeader() { ?>
<div id="title-area">
<h1>Title Here</h1>
<nav>Nav Here and so on</nav>
<p>You can add whatever you want</p>
</div>
<?php }
I normally try to use the same class and ID names so I can preserve some of the built in styles and save myself some work but that's up to you. All you have to do is add whatever you want in the function and call it back in like this,
add_action('genesis_header','injectHeader');
Hope that helps!
Just stumbled upon this post asking the same question. Great solution. An even easier way to customize certain parts of a genesis powered site is using the Genesis Simple Hooks plugin. Just do a search, it's awesome.

How to add my own created drop down menu to theme?

I have created my own drop down menu in html&css. So,anyone can guide me how, i can add my self made dropdown menu to my own custom WordPress theme ?
I don't want to use any Plugin because it would not give me same look as my own drop down menu.
Thanks In advance.
Its not clear if you already have any register_nav_menus. If you have any registered menu, you need to call it through wp_nav_menu and use you own css in style.css of your theme. After adding your css in style.css, you need to check this css hierarchy of Unordered List generated by wp_nav_menu.
You can also check Menu_Item_CSS_Classes section in wp_nav_menu documentation.
If your theme don't have any register_nav_menus, add this in your functions.php file to make it more managale in future.
Pretty straightforward. Somewhere in your theme you should see a function called wp_nav_menu:
<?php wp_nav_menu(); ?>
This is the default navigation. Replace it with your own HTML, and add the CSS to the style.css file. If there's any JavaScript, you'll obviously need to include that on the site, too.

widgets_on_pages not working

Hello i'm using widgets_on_pages to place widgets on pages, i installed it and added a widget to the panel in my admin section, then i added [widgets_on_pages id=2] ("its the 2nd sidebar and it said i should add this") into my html on the place where the widget should appear but it only shows the code i added in pure text, nothing else happens, anyone know what i'm doing wrong?
If I understand correctly then the following applies... if not, apologies.
You should not need to do it this way. It seems that Vincent, you are trying to add the shortcode into a theme php file... this is incorrect and the shortcode is for adding into the page/post content by the post/page editor.
To add a Widgets on Pages sidebar to a template then v 0.0.7 (I believe) has built in template tags (see link text). This should allow you to add the following I think
<?php widgets_on_template("2"); ?>
Try this
<?php echo do_shortcode('[widgets_on_pages id=2]'] ?>

Resources