when I use woocommerce shortcodes it have a special layout of html as the output!
for example if i use the shortcode: <?php echo do_shortcode['[products]']?>
it will show the the products in a certain layout of html like this:
<div class="row">
<div class="product-grid">
<ul>
<li>
<li>
<li>
<li>
</ul>
</div>
</div>
and there is a certain layout of html inside the li.
now my question is how can i change the layout of html that the shortcode is generating?
1.GO TO functions.php of the corresponding plugin/theme root folder.
2.search this page by product-grid or any common class appeared in this layout.
3.You will find a function for this shortcode.
Related
I have a custom wordpress theme and would like my menu to be a little different than Wordpress standards like this:
<div class="nav-bar">
<ul>
<li>
Home
Gallery
About Me
Contact Me
</li>
</ul>
</div>
I only manage to remove the <li> in my walker class but can't manage to move the links inside the 1 li tag.
Is there any way to achieve this?
Thank you in advance.
EDIT :
This was achieved now by using wp_get_nav_menu_items.
I have created a dynamic nav menu for a website. The menu loads to each page from a separate file, therefore i am using php required on all pages. I am trying to highlight the menu item when visitor is on each page and i cannot use JS or jQuery. All should be done in PHP, CSS and HTML only.
So far, i have the following function in the navigation file:
<?php
function setActive($name){
global $pageName;
if ($pageName == $name){
echo "class='active' ";
}
}
?>
And example of a menu:
<ul>
<li ><a <?php setActive ('v')?> href="v.php">Home</a></li>
<li>
cd
<ul class="hidden">
<li>a</li>
<li>b</li>
</ul>
</li>
</ul>
The function works for main menu, but i cannot get it work for submenu pages. I want the item cd to highlight when visitor lands on page a.php or b.php.
Any ideas how to solve it?
Thanks
I want to change the product category menu style on the Woocommerce widgets but I can't find where to make the change. So far I've only found this. Where are the appropriate HTML tags?
<aside class="span4">
<div class="aside-wrap">
<?php dynamic_sidebar('Woocommerce Sidebar'); ?>
</div>
</aside>
Check your functions.php or simillar files, there will widgets_init hook using register_sidebar to register Woocommerce Sidebar.
Ok I just developed my first custom Wordpress theme using a guide - I'm still a noob. I'm not using widgets to fill the sidebar, I want to fill it myself with my own code and images.
So lets say I want the first sidebar I made to show up only on the homepage, and then the 2nd sidebar I made to show up on every other page. Can I use an if statement?
<?php
if(is_home()){
echo
"<div class="row">
<div class="span3">
<div id="search-box"><img id="search_text" src="http://localhost/Dorsa/wp-content/themes/Bootstrap/img/text_findyourhome.png">
</div>
</div>
</div>
<div class="row">
<div class="span3">
<img class="box_shadow" src="http://localhost/Dorsa/wp-content/themes/Bootstrap/img/box-shadow.png" style="padding-left:0;">
</div>
</div>
<div class="row">
<div class="span3"><div id="news" style="margin-top:275px;margin-bottom:200px">News</div></div>
</div>"
}
else
{
echo
"sidebar 2 code - didn't write it yet"
}
?>
You can use if statement as said by #ChrisHerbert if you just want to display one sidebar in homepage and other in rest of your pages. New solution would be by creating a new template and sidebar.
First find your sidebar.php file and make a copy of it.
Name the sidebar using wordpress naming convention eg: sidebar-secondary.php.
Make changes in sidebar-secondary.php as per your need.
Make a new template and use your sidebar as <?php get_sidebar(‘secondary’); ?>
EDIT
Assuming that you want one sidebar for homepage and separate for all others you can do the following.
Create sidebar-secondary.php as mentioned above.
The main template is usually index.php. This will usually contain the sidebar for your homepage. You will find some code like <?php get_sidebar() ?>.
If you want secondary sidebar on say page, open your page template page.php. Find the line get_sidebar() and replace it with get_sidebar('secondary'). Now all of your page will use secondary sidebar. You need to do the same if any of your page is using different template.
To display secondary sidebar in you single post page (the page displayed after user clicks readmore in blog section), open single.php and again find and replace get_sidebar() with get_sidebar('secondary').
You can now style and use your sidebar differently for homepage and other pages.
Note that if you only want different sidebar in homepage and same for rest of the page you can also use conditional in your main template file index.php.
if( is_home() ){
get_sidebar(); //your main sidebar for homepage
} else {
get_sidebar('secondary'); //your sidebar for other pages
}
Templates are definitely the way to go, but your solution should work assuming that your "home" page is your blog page. If you've set the home page to be a static page (in the "Reading" section of the dashboard), you should use the is_front_page() function instead of is_home().
I'd also suggest using alternative syntax and closing the PHP tag before your markup, like this:
<?php if ( is_home() ) : ?>
<div class="row">
<div class="span3">
<div id="search-box"><img id="search_text" src="http://localhost/Dorsa/wp-content/themes/Bootstrap/img/text_findyourhome.png">
</div>
</div>
</div>
<div class="row">
<div class="span3">
<img class="box_shadow" src="http://localhost/Dorsa/wp-content/themes/Bootstrap/img/box-shadow.png" style="padding-left:0;">
</div>
</div>
<div class="row">
<div class="span3"><div id="news" style="margin-top:275px;margin-bottom:200px">News</div></div>
</div>
<?php else: ?>
<!-- sidebar 2 code - didn't write it yet" -->
<?php endif; ?>
I have the following code to display all pages into a nav bar in Wordpress
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
Trying to figure out how to add a div class to each li?
You should be able to use link_before and link_after:
<ul>
<?php wp_list_pages('title_li=&link_before=<div class="myClass">&link_after=</div>'); ?>
</ul>
There's a section on styling the <li>s in the documentation.