How to maintain sidebar placement in Wordpress on WooCommerce pages - html

If you use a sidebar in wordpress, you can put things such as a navigation menu in them.
To place the sidebar in the right container element, you simply call <?php get_sidebar(); ?> within that element, and the sidebar should be placed inside that.
For example, the following code should result in a sidebar within your wordpress footer:
<footer class="footer">
<div id="inner-footer">
<div id="main-content-footer" class="span_16">
<?php get_sidebar(); ?>
</div>
</div>
</footer>
This code will work on pages not integrated with WooCommerce, such as a front page.
On pages with WooCommerce, the code generated by <?php get_sidebar(); ?> will appear outside the footer in the div element #inner-content, which is within the a parent div called #content.
What files are responsible for placing the sidebar code properly in woocommerce? Is it possible that WooCommerce is generating it's own <?php get_sidebar(); ?>? If so, what can I do to make sure my navigation side bar is not affected by WooCommerce?
Thank you all

Seems like this problem has to do with WooCommerce hooks and how their content is wrapped vs. how "normal" themes are laid out.
The simple fix is to use woocommerce_content() to designate your own template for WooCommerce pages. See documentation here:
http://wcdocs.woothemes.com/codex/third-party-custom-theme-compatibility/
Another way to fix this would be to override their sidebar.php file with your own. Documentation here: http://wcdocs.woothemes.com/codex/template-structure/

Make a copy of the simgle-product.php file in your theme directory (same level as functions.php). This is the template for the single product pages. Remove all necessary hooks, including the sidebar hook. Then, refer to this forum: http://phponlinesupport.com/woocommerce-sidebar-t157932.html to finish the job of making your own custom sidebar for just the shop pages.
Note: When creating the sidebar-shop.php file, be sure to include a
Good luck.

This works for me. This code snipet removes WooCommerce sidebar from appearing after #primary block, so you are able to use get_sidebar('shop') in your layouts.
<?php
// in your themes functions.php
/* remove sidebar */
function woocommerce_remove_sidebar_shop() {
if( is_woocommerce() )
remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10);
}
add_action( 'template_redirect', 'woocommerce_remove_sidebar_shop' );
?>

Related

Custom footer in WordPress with bootstrap 4+ code

Hey I am using a new theme that is not giving me any footer for display on any of the pages. It is a nulled theme in Wordpress. Can I add a custom HTML Bootstrap footer to all the pages. I want to add a footer with 5 columns:
Column 1 Logo and short about us below it.
Column 2 Quick links.
Column 3 wp-job-manager plugin updates.
Column 4 facebook posts.
Column 5 instagram gallery.
I searched over wordpress.org and google but could not find the custom code for this. Also, I want to include all the custom code in Bootstrap format. What I have to do to show it correctly can you please suggest?
Also I need the footer to be respoonsive.
The design for the footer is submitted as the image.Footer Custom
inside of your footer.php file, add the following:
<?php wp_footer(); ?>
<footer><!-- the code for your five columns goes here --></footer>
</body>
</html>
And then for each column, you don't want to hard code stuff in, so what is commonly done is to add separate widget areas for each column. See How to Register a Widget Area.

What is the good practice to keep multiple html having the same style and components but different in certain body content

new to web dev here. I am wondering what is the common practice to have multiple pages with the same components (header, sidebar, footer) but only different in the content. I looked around there are suggestion about using php include and other about html import.
Say I have a basic.html with
<head> fixed stuff </head>
<body>
<div> sidebar here </div>
<!-- Here will be different content other each page -->
<footer> fixed stuff </footer>
<!-- common scripts here -->
</body>
Then I will have another 2 pages, say price.html, blog.html.
How can price.html recycle basic.html but just with different main contents in the body. I don't know how I can use include here. because the content is in the middle.
I would do basic.php and create header.php, footer.php. Then you can do includes on your page templates that would include the header and footer file. Then you can construct your price template...price.php
<html>
<head></head>
<?php include(header.php); ?>
// Price template content
<?php include(footer.php); ?>
</html>
Is that what you are trying to accomplish? This will allow you to add your header and footer content that is universal for your site and make different middle content depending on your page.

How to restrict the CSS for only a particular page?

I was trying to insert another html page into an php page by using "include"
and that html page is having some stylesheets imported,
When I insert that page, it disturbs my PHP page..
How can I restrict the CSS for that particular page only?
place the imported page inside a container div, and then give it an id like:
<div id='included_page'> Your page goes here...</div>
Then add #included_page .someClass{mystyle: property;} to each and every style defined.i.e, increase the level.
Add a class or id to each <body> and write styles accordingly like below
HTML
<body class='home'>
Home page content
</body>
<body class='about'>
About page content
</body>
CSS
.home .someclass{
}
.about .someclass{
}
Try this.
In Page[restrict the CSS]:
<?php
$type = 'exclude';
inlcude('page_to_include.php');
page_to_include.php:
<?php
if(!isset($type) or ($type !== 'exclude')) {
// Things to be excluded from Page 1;
}
Ref: PHP - include a php file and also send query parameters

Wordpress Page.ly MultiEdit Plugin Not Working

I'm trying to use the Wordpress page.ly MultiEdit plugin here:
http://wordpress.org/extend/plugins/pagely-multiedit/
I can't get it to work correctly. I get an error:
Bottom, Left, Bottom, Left region(s) are not declared in the template.
Here's a screenshot.
Here is the code for the template file I created:
<?php
/*
Template Name: Home
MultiEdit: Right
*/
?>
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="content">
<?php the_content(); ?>
</div>
<div class="sidecontent">
<?php multieditDisplay(‘Right’); ?>
</div>
<?php endwhile; endif; ?>
<?php get_footer(); ?>
Am I missing something?
Thanks.
I guess I didn't look at your code close enough. You're not calling them twice in the code, you're just not calling them at all. You can still follow the instructions in my answer and it will work.
Couple things here. It looks like you're calling the same two content blocks twice in the same page template. You can't do that. Each one has to have its own unique name. If you're simply trying to get "bottom', "left", and "right" you need to change you're comment code at the top of the page template.
Use this:
/*
Template Name: Home
MultiEdit: Bottom,Left,Right
*/
Then place these where you want the content to be displayed in your page template:
<?php multieditDisplay('Bottom'); ?>
<?php multieditDisplay('Left'); ?>
<?php multieditDisplay('Right'); ?>
Before you do any of that though, click on the "Screen Options" tab in the top corner of the admin page for your home page editor. Then click on the "Custom Fields" option. Then scroll down until you see the "Custom Fields" area and expand it. Then click on the "Show/Hide Multiedit Fields" so that you can see the ones you currently have in there. You need to delete each one of them to clear them from your editor. Follow these instructions and it will work, its an amazing plugin that I've used many times with great success. Once you fix it, please accept my answer. Let me know if you have any other issues with it.
Also, you don't need to use the call inside of a loop, just drop in the one of the three calls where you need it to be in the template. In fact, I'd recommend not using it inside of a loop.

alternative to using frames in html

Is there any alternative for using a frame. I'm just a beginner and I still don't know what the web designers are doing.
Almost all of the websites I see. Retains the header in the page. How can I apply that so I can stop from using frames.
Use a server-side language like PHP in order to generate a full HTML page.
For example, create three files:
header.php
page.php
footer.php
In the header.php file you have to put the first part of the HTML page.
In the page.php file you have to put the main content of the HTML page.
In the footer.php file, like the header.php, you have to put the end part of the HTML page.
So you can change the page file and the header and the footer remain.
header.php:
<html>
<head>
</head>
<body>
<div id="header">
Place your header here.
</div>
page.php:
<?php include('header.php'); ?>
<div id="main_content">
Place your page content here.
</div>
<?php include('footer.php'); ?>
footer.php:
<div id="footer">
Place your footer here.
</div>
</body>
</html>
For more information, search for a PHP tutorial with Google.
In regards to what you see in most websites, they just reuse the same code.. (usually in an external file and insert it in all their pages)..
Take a look at Server Side Includes for more info
Depending on what you wish to display you could look at using divs or using includes.