I added the Facebook comment code in to a Wordpress comment
<?php if ( comments_open() ) : ?>
<li class="reviews_tab"><a href="#tab-reviews"><div id="fb-root">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<?php echo '<fb:comments-count href=http://bikeroger.com';
echo $_SERVER["REQUEST_URI"];
echo '></fb:comments-count> Awesome Love'; ?>
</a></li>
<br>
<?php endif; ?>
The result is what I wanted, but the styling is not.
Here's site and a screenshot:
As you can see from the image.
the text for "1656 Awesome Words" is smaller than "Description" & "Additional Information"
How can I make the font sizes the same?
<?php if ( comments_open() ) : ?>
<li class="reviews_tab"><a href="#tab-reviews"><div id="fb-root">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<?php echo '<fb:comments-count href=http://bikeroger.com';
echo $_SERVER["REQUEST_URI"];
echo '></fb:comments-count> Awesome Love'; ?>
</a></li>
<br>
<?php endif; ?>
Above your original code...
Below a minor alteration
<?php if ( comments_open() ) : ?>
<li class="reviews_tab"><a href="#tab-reviews"><div id="fb-root">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<?php echo '<fb:comments-count href=http://bikeroger.com';
echo $_SERVER["REQUEST_URI"];
echo '></fb:comments-count> Awesome Love'; ?>
</div></a></li>
<br>
<?php endif; ?>
inside your li and a tags you open a div tag "fb-root" but you are not closing it before closing the a and li tags. Thus having a broken tag, this may or may not be part of the issue directly but having broken unclosed tags can sometimes result in adverse undesired effects.
Also Im gonna take a wild guess and assume you have multiple div's with the ID fb-root on your page, which may also be causing conflict. However all in all. It being in the fb-root div, the facebook styling is overriding your styling as FB loads its styling after page load. So your comment tag is inheriting its styling rather than your initial styling. Facebook through that javascript you include for it, is basically rewriting the css/style properties of all elements within the fb-root div after its loaded into the DOM.
Related
My tag GTM in the body is not properly installed because outside the body section. I'm very new in coding, so I'm sorry for this question but how to insert the code noscript correctly in body section ?
Thanks a lot
Here the code :
<body<?php body_class( mk_get_body_class( global_get_post_id() ) ); ?> <?php echo get_schema_markup( 'body' ); ?> data-adminbar="<?php echo is_admin_bar_showing(); ?>">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5DB5QN9"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php
// Hook when you need to add content right after body opening tag. to be used in child themes or customisations.
do_action( 'theme_after_body_tag_start' );
?>
<!-- Target for scroll anchors to achieve native browser bahaviour + possible enhancements like smooth scrolling -->
<div id="top-of-page"></div>
<div id="mk-boxed-layout">
<div id="mk-theme-container" <?php echo is_header_transparent( 'class="trans-header"' ); ?>>
<?php
mk_get_header_view( 'styles', 'header-' . get_header_style() );
That appears to only contain the fallback GTM code for users without JavaScript. You should have an additional JavaScript snipped to place on your page that's completely missing from the above example?
See their documentation here for reference (you're missing section #1):
https://developers.google.com/tag-manager/quickstart
trying to use <?php the_category( ' ' ); ?> to put in my category from my wordpress post.
within the loop html
<a href='<?php the_permalink(); ?>'>
<section id="post-<?php the_ID(); ?>" class="..">
<div>
<?php the_category( ' ' ); ?>
<?php the_title( '<h1>', '</h1>' ); ?>
</div>
</section>
</a>
Problem is that having the category php the section div's seems to get pulled out of the link (output has section outside link code.
Not having the category code it works perfectly.
You have an issue in your HTML: you have a <a> tag (inline element) with inside block type elements (like <div> and <section>).
Take a look at this page in order to properly understand the difference between inline and block elements.
While using the_category(), you are going to displays a link to the category or categories a post belongs to, so you are also placing a <a> tag inside another <a> tag.
Because you want just display the categories' names, you can use the following code
foreach((get_the_category()) as $category){
echo $category->name."<br>";
}
Review your formatting and everything will be work as expected.
I was referring the page.tpl.php(Drupal 7 theme) for understanding the code. I found the following code,
<?php if ($site_name || $site_slogan): ?>
<!-- !Site name and Slogan -->
<div<?php print $hgroup_attributes; ?>>
<?php if ($site_name): ?>
<h1<?php print $site_name_attributes; ?>><?php print $site_name; ?></h1>
<?php endif; ?>
<?php if ($site_slogan): ?>
<h2<?php print $site_slogan_attributes; ?>><?php print $site_slogan; ?></h2>
<?php endif; ?>
</div>
<?php endif; ?>
Can you see the code in third line, <div<?php print $hgroup_attributes; ?>> WHY the php code is inside the first div tag of html? Same thing in later part of code also, as you can see h1 and h2 code. So, what is this convention of combining the html and php in so complicated way? and how should I read that?
Combining HTML and PHP code in Drupal templates is actually a very strong feature. In this case, $hgroup_attributes will probably contain some classes that style the div. Printing it in the template results in something like
<div class="SOME_CLASSES"> ... </div>
If you're further interested in the variable $hgroup_attributes, you can inspect by pasting <?php dpm($hgroup_attributes); ?> in your template file after you've installed the Devel module.
i'm trying to get a slider to feature my images that are in a post. I currently have everything set up but I only have one li element that is showing all three images. I'd love to have three li elements each showing one image but I can't figure out how to automatically isolate each image. Any help would be greatly appreciated!
you can see the current state here:
http://mksgear.com/shop/test-product/
this is what my code looks like:
<ul class="slides">
<li class="slide">
<?php if ( has_post_thumbnail() ) : ?>
<?php echo do_shortcode('[gallery option1="value1"]'); ?>
<?php else : ?>
<img src="<?php echo woocommerce_placeholder_img_src(); ?>" alt="Placeholder" />
<?php endif; ?>
</li>
</ul>
I'm not sure I understand your question correctly, but I'll give an answer a go. If I have misunderstood what you're trying to do please clarify it for me and I'll update my answer.
You can use itemtag="li" inside the gallery shortcode to wrap each image in an li. You'd need to remove your <li class="slide"> line of code, and maybe use jQuery to add the "slide" class back to the generated li tags. So you could do something like this:
Also, does your code render the gallery when using the : in the if/else statement?
<script>
jQuery(document).ready(function() {
jQuery("#slides li").addClass("slide");
});
</script>
<ul class="slides">
<?php if ( has_post_thumbnail() ) { ?>
<?php echo do_shortcode('[gallery itemtag="li" option1="value1"]'); ?>
<?php } else { ?>
<img src="<?php get_bloginfo( 'stylesheet_directory' ); ?>/images/thumbnail-default.jpg" />
<?php } ?>
</ul>
Add this you your footer, you can add it inside the same document.ready as the jQuery to add the class slide. Just copy and paste this on a new line right after jQuery("slides li").addClass("slide");. You can adjust the height, width, or any other options in this call if you need to. This will hopefully work.
jQuery("#slides").advancedSlider({
width: 900,
height: 460,
responsive: 1,
skin: 'light-round'
});
I'm quite new to wordpress, so bear with me. I have a site up and running allowing me to add content dynamically, the only problem is styling each post. I'm looking to wrap posts in a div, so images would be wrapped in one div and text posts would be wrapped in another, if that makes sense?Here's some code I've been using:
<?php if ( in_category('photos') ) { ?>
<div id="testing">
<?php } else { ?>
<div id="test-2">
<?php } ?>
The only problem with this is that it wraps all posts in a given category and doesn't put a closing '< / div >' after the content, if that makes sense?
Well, the only reason you're not getting any closing </div>s is because you're not putting it anywhere in your php.
This should work:
<?php while( have_posts() ) : the_post()
if( in_category( 'photos' ) { ?>
<div id="testing">
// All your post content and whatnot
<?php the_content(); ?>
</div>
<?php } else { ?>
<div id="test-2">
// All your post content
<?php the_content(); ?>
</div>
<?php }
endwhile; ?>
If you don't write complete markup in your theme files, you can't possibly expect Wordpress, or PHP, to automatically close your HTML tags.
"if that makes sense" No it doesn't really make sense as Wordpress by default adds a CSS-class for every category and tag to the surrounding div. If that is not the case in your theme, use the function post_class() to add the CSS-classes to your div.
See the post_class()-documentation for usage examples.