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.
Related
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/
I've created a custom page(template), in fact, at this moment, I did a blank page, like, page-newpage.php(inside child theme dir structure), I've also already created a page called "newpage" and it is partially working, I mean, the page runs ok, but with parent theme(beClinic) header and footer.
Can someone give me a clue about how to remove theme header and footer?
Thanks!!!
In your page-newpage.php may be you have added below code.
get_header(); - This call header.php file of the active theme/parent theme
get_footer(); - This call footer.php file of the active theme/parent theme
In order to remove header and footer, you need to remove above functions from your your page-newpage.php
But if you remove, then WordPress functions will not work in your page-newpage.php
So what you can do is create custom header and footer for your page-newpage.php
go through this in details
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/
Where do I place things like header's image, background color, background image...? Should I simply add them to html code? Or add pieces of the CSS to functions.php?
Also, when I add some code to head section from functions.php - will this be loaded automatically, or should I add something more to the head section myself?
you can change style.css for any css change
and header.php for header section,footer.php for footer section
for home content index.php file
you can call function from function.php file in to these files
If the theme you are using already has the HTML, then just modify the style.css. If the theme doesn't support the image placements that you want, you can either try to modify the HTML files yourself, or ask the theme creator to add it for you. If you modify this yourself, you'll have to remember that future updates to the theme may overwrite your changes.
If you are creating your own theme and don't care about flexibility, then add a spot in the HTML using your tags.
I'm attempting to automatically add a class to all links created when clicking the "link" button in tinyMCE. I've found this snippet in the tinyMCE docs:
// Adds a class to all paragraphs in the active editor
tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.dom.select('p'), 'myclass');
I think this will be what I need if I change it to apply to anchors.
Question 1: Think this will work? Know of a better way to do it?
Question 2: How and where do I add this snippet to my theme? The theme I'm working with has a tinyMCE folder in the functions directory.
Thanks!
So I ended up doing a jQuery fix rather than going through tinyMCE. Code as follows:
jQuery(document).ready(function(){
$("#content a").addClass("link_color");
});