I built my theme into WordPress and all was good, then I wanted to add woocommerce to the theme to add a shop. The woocommerce was not showing its styles. So I did some research and found the reason was my <body> tag should of been <body <?php body_class(); ?>>.
This was not in the guide I followed to convert the html.
So I added the tag in and the woocommerce styling appears fine. BUT the whole site has pushed left.
Here is the site - www.theinurse.com could anyone let me know why? I have tried a few things in css but nothing has resolved it. If i edit the following css the site moves
html, body {
height: 100%;
margin: 0pt;
}
If I edit margin it moves, but if I set margin-left: auto; margin-right:auto; etc etc it does nothing. But if I do margin-left:100px; it moves the site right 100px.
Baffling me! If I remove the body_class tag it sits perfectly. Please help me.
Can you try to replace this:
<?php body_class(); ?>
by this:
<body <?php body_class(); ?>>
?
If you have declared
add_theme_support( 'woocommerce' );
the system expect you to have the WooCommerce styles integrated in your theme stylesheet. This is why it don't call for the default stylesheet.
You forgot the re-add the body class Frame. Your CSS code uses the Frame class to center the content.
<body <?php body_class('Frame'); ?>>
The Codex entry for body_class() states there is a parameter $class.
class (string or array) (optional)
One or more classes to add to the class attribute, separated by a single space.
Use this parameter to make WordPress include the extra body classes you've added yourself.
Related
I'm trying to add a slider to Wordpress (Flickity's slider: https://flickity.metafizzy.co) but am unable to figure out how to add it as it doesn't follow the typical external plugin format where I can add a zip folder.
Tried adding code into the text section of a post.
Tried setting up a custom css but not too sure I applied it correctly. Don't really know where to begin.
There are many slider plugins around already, you can use them to get inspiration. Look e.g. at gutenslider that implements a slider block or at older plugins, e.g. slide anything. As all wordpress plugins in the plugin dir must follow a GPL license, you can look at their source code.
That said, you can write your own plugin with flickity. You would have to give users a way to select which images they want to slide and then include the flickty stylesheets and javascript and make php create the needed Document Model for the slider.
You can create a template and call js and css using the wp_enqueue_script and wp_enqueue_style which is used Flickity's slider.And create html like this
HTML
<div class="main-carousel">
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
...
</div>
Put jquery code in your template like below
$(document.ready(function()
{
$('.main-carousel').flickity({
cellAlign: 'left',
contain: true
});
}
This is because this is not a WordPress plugin. You do not need it to be one either. Place the files you have downloaded somewhere in the theme folder and then use wp_enqueue_script to load the JS files and wp_enqueue_style to load the CSS files.
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
If you are not using a child-theme, then it is recommended that you do. But here is what you will have to do: you need to edit files - such as header.php, footer.php, styles.css and the file where you would like you slider to go (page.php)
Add this to your header, just above styles.css:
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
Add this code to your footer.php (I have also included jquery, you may not need to):
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<script>
$('.main-carousel').flickity({
cellAlign: 'left',
contain: true
});
</script
This goes at the bottom of your styles.css:
.carousel-cell {
width: 100%; /* full width */
height: 300px;
background: #222;
/* center images in cells with flexbox */
display: flex;
align-items: center;
justify-content: center;
}
.carousel.is-fullscreen .carousel-cell {
height: 100%;
}
And finally this is what displays your slider (this goes wherever you would like your slider to display - with link to the images you would like to use):
div class="main-carousel">
<div class="carousel-cell"><img src="https://source.unsplash.com/random/1197x458"></div>
<div class="carousel-cell"><img src="https://source.unsplash.com/random/1198x457"></div>
<div class="carousel-cell"><img src="https://source.unsplash.com/random/1199x456"></div>
</div>
You can see the slider in effect here
Being new to Wordpress, and to the way their themes work in general, I have been having a few issues regarding the header section.
With lots of troubleshooting I have fixed most of my programs, but one seems to keep managing to allude me, and that is putting a div at the top of the page, in front of the header image.
Essentially, the header image seems to act as always up front when it comes to anything in the header.php files. I have looked around both here and the site, but I cannot find anything to cure this ailment.
I started by removing the header image entirely, and inserting my code into the custom-header.php file
<div class="whatever"><img src="whatever i put here"> | <p>words</p></div>
At first, this worked and everything showed up directly as the top as I wanted it, however, once I reinstated the image, it once again filled the entire header and send the divs behind it.
Does anyone know of a way to move this Div to the foreground?
With a little css you can achieve that.
First, I would suggest to use an id for this additional <div> element, as most probably this will be some kind of special tag.
I assume that you were trying to place this div before the <header id="masthead" … part in the header.php of the 2017 Theme like so:
// Existing code …
<div id="whatever"><img src="whatever"> | <p>words</p></div>
<header id="masthead" class="site-header" role="banner">
// Existing code …
Having that in place, you can bring that div into front with some lines of css:
#whatever {
position: absolute;
top: 50px;
left: 50px;
z-index: 2;
}
You can place that anywhere in you style.css.
For all of the pages on a wordpress site I need the .wrap {max-width: 100%;} but for some reason this affects the archive search page differently and makes the results span the whole page. In short if I know where to add the jQuery, I can code it myself but I am having difficulty finding where exactly to put this code.
By archive results page I mean, when on a wordpress blog and the default archive widget with the dropdown menu is clicked, you choose a month and are forwarded onto a page for that month. This page displays the results, and on this page I need to bring the wrap max-width in.
I know it's probably more efficient to do with PHP but I am not comfortable with PHP yet so would prefer to just put a simple jQuery .CSS function in there.
You can do this without JQuery. Add this in your header.php file before wp_head() function.
<?php if(is_archive()){ ?>
<style type="text/css">
.wrap {
max-width: 70% !important; //Change this to whatever you want.
}
</style>
<?php } ?>
having a problem which is driving me crazy, reason being that it should be a really simple fix, basically in my "footer.php" file I need some lines of CSS added to the "wp_head" hook. What I expected to work was this:
<?php function footer_widgets() { ?>
<style type="text/css">
#footer {
border-top:0 !important;
margin-top:0 !important;
padding-top:0 !important;
}
</style>
<?php } add_action('wp_head', 'footer_widgets');?>
This does nothing, the weird thing is if I change the hook from "wp_head" to "wp_footer" it outputs to that hook fine, but this needs to be in "wp_head".
If anyone has any idea how to solve this it would be much appreciated.
Cheers,
Tom.
On a normal page, your footer.php isn't included until after wp_head has already run. See that get_footer() in your template? That's when this code runs. You need to include this code in a file that is loaded earlier in the page lifecycle (e.g. functions.php).
I have a problem with Wordpress Theme.
I'm trying to put sidebar in header.. and because of sidebar class style it receives "colored" backround. if I will change it then all sidebars will have a change.
How I can override that style class only so a change will be only in a place I need it?
part of section in template page.php
<?php display_ca_sidebar( $args ); ?>
css section of sidebar
#sidebar ul li{width:298px;float:left; background:url(i/Modern/sidebar.jpg) left top no-repeat #83b1cd; margin:0 0 19px 0;padding:0 0 10px 0; list-style:none; list-style-type:none; border:1px solid #536867;}
I need to override "background"
Thanks for Help!
Give it an unique id and use that id as css selector.
According to this https://wordpress.org/extend/plugins/content-aware-sidebars/faq/ you are in control of the HTML. So when you are creating the sidebar div, just give it a different class with which you can style that particular sidebar.
You shouldn't have to overwrite anything. When using #sidebar, you should try to use that ID for CSS that applies to all "sidebars", then use a specific class to make each sidebar appear the way you want. That gives you the ability to reuse classes and also create a default class, but you'll never have to worry about conflicts or overwriting things.
I'm not entirely sure what you mean, but if you're trying to change the background of one element in a list of elements (which I'm guessing it is if it's inside li tags), then this may be of use:
#sidebar ul li:nth-child(2)
{
background:blue;
}
and replace the number two with whichever number you need to get your sidebar to work
hope that helps