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
Related
I'm trying to prepare a blog for microformat, so I need a div to start above the title and close just above the social share buttons (and below meta data, date, author, # of views, etc) - see site for reference: http://www.sara-maria.dk/sundt/laekre-saltede-mandler-med-soedt-tilbehoer/
It is a Wordpress site using CherryFramework with a childtheme and I've tried the following:
adding the opening of the div to title.php and the closing div to footer.php
However, for some reason the div is not using the expected closing div. Instead it is being closed way up higher on the page.
I've created a new functions.php in the childtheme and used the following code:
function my_content($content) {
global $post;
return ''.$content.'';
}
add_filter('the_content', 'my_content');
Problem is that this only wraps it around the post and my PHP skills are not very good, so I haven't been able to customize it to include the title and the meta data.
Anyone who can help me how I best can create the custom div?
Thanks,
Kasper
Update - copying in loop-single.php on request from dojs:
<?php /* Loop Name: Single */ ?>
<div id="loopTEST">
<?php if (have_posts()) : while (have_posts()) : the_post();
// The following determines what the post format is and shows the correct file accordingly
$format = get_post_format();
get_template_part( 'includes/post-formats/'.$format );
if($format == '')
get_template_part( 'includes/post-formats/standard' );
get_template_part( 'includes/post-formats/share-buttons' );
wp_link_pages('before=<div class="pagination">&after=</div>');
?>
</div>
<!---removed author block--->
<?php
get_template_part( 'includes/post-formats/related-posts' );
comments_template('', true);
endwhile; endif;
?>
Update
If you look at the DOM of your site you can clearly see that the title section is found in it's own file.
Take a look at this HTML
<div class="row">
<div class="span12" data-motopress-type="static" data-motopress-static-file="static/static-title.php">
<section class="title-section">
<h1 class="title-header">
Lækre saltede mandler med sødt tilbehør </h1>
<!-- BEGIN BREADCRUMBS-->
...
<!-- END BREADCRUMBS -->
</section><!-- .title-section -->
</div>
</div>
You would think that you have to add a div to "static/static-title.php", but that would most likely destroy the layout.
To be honest, the structure of this theme seems horrible to me (which means that the theme is shit), however if you are hell bent on using it you need to find the file (which would most likely be "single.php" in your themes root directory) that includes "static/static-title.php" and add a div on the line above that.
Okay, well to really see how this builds up your single post pages you might need to go through the included template parts, but try this to start out with.
<div id="loopTEST">
<?php if (have_posts()) : while (have_posts()) : the_post();
$format = get_post_format();
?>
<div> <!-- This should be above the title -->
<?php
get_template_part( 'includes/post-formats/'.$format );
if($format == '')
get_template_part( 'includes/post-formats/standard' );
?>
</div> <!-- This should be below the post but above the social media buttons -->
<?php
get_template_part( 'includes/post-formats/share-buttons' );
wp_link_pages('before=<div class="pagination">&after=</div>');
?>
</div>
I want to show limit latest post of WordPress in main page. I'm using WordPress APIs and functions to show that, but after that get_the_content() remove and escape all of seved tags and my posts don't show correctly such as editor tags.
This function escape HTML tags:
<ul style="list-style: none;margin:5px" class="latest-posts">
<!-- LOOP START -->
<?php $the_query = new WP_Query( 'showposts=3' ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<!-- THIS DISPLAYS THE POST THUMBNAIL, The array allows the image to has a custom size but is always kept proportional -->
<li> <?php the_post_thumbnail( array(100,100) );?></li>
<!-- THIS DISPLAYS THE POST TITLE AS A LINK TO THE MAIN POST -->
<li>
<a href="<?php the_permalink() ?>">
<?php the_title(); ?>
</a>
</li>
<!-- THIS DISPLAYS THE EXCERPT OF THE POST -->
<li>
<?php echo mb_substr(get_the_content(), 0, 1200).' ...'; ?>
</li>
<!-- READ MORE LINK -->
<li>more ...</li>
<?php endwhile;?>
<!-- LOOP FINNISH -->
</ul>
There are basically three possibilities how to output the excerpt of the post content.
with the excerpt() function, to output the content of the excerpt field in post editor, if it's not filled it will display the first 55 words of the post content ( use excerpt_length filter to control the length of the excerpt ).
to use the <!--more--> quicktag, the_content() tag will only show the excerpt up to the <!--more--> quicktag. That quicktag will not work in single pages templates.
to manually strip HTML from post content and to show custom excerpt. One way to do that is to use wp_filter_nohtml_kses() function:
echo mb_substr( wp_filter_nohtml_kses( get_the_content() ), 0, 1200 );
All methods above will strip the HTML from post content. To include HTML in excerpts use excerpt field in post editor, WordPress will preserve HTML you included in post editor. There are also some plugins like Advanced Excerpt that will create excerpt from content and preserve html, but I don't believe that there is a bullet proof way of doing that.
I am using Bootstrap but under the roots.io wordpress template using a 'wrapperless theme'
i am trying to achieve this http://roots.io/ - where there are sections of colour but the page content itself isn't full width.
the answer I have been given is to make the container class 100% - but this just makes all the content full width.
Im really stuck and ive been trying to figure this out for hours. - I know that sounds noobish and it is, but I can't get past this point.
all the page templates take their its style from base.php, code here
<?php get_template_part('templates/head'); ?>
<body <?php body_class(); ?>>
<!--[if lt IE 8]><div class="alert alert-warning"><?php _e('You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.', 'roots'); ?></div><![endif]-->
<?php
do_action('get_header');
// Use Bootstrap's navbar if enabled in config.php
if (current_theme_supports('bootstrap-top-navbar')) {
get_template_part('templates/header-top-navbar');
} else {
get_template_part('templates/header');
}
?>
<div class="wrap container" role="document">
<div class="content row">
<div class="main <?php echo roots_main_class(); ?>" role="main">
<?php include roots_template_path(); ?>
</div><!-- /.main -->
<?php if (roots_display_sidebar()) : ?>
<aside class="sidebar <?php echo roots_sidebar_class(); ?>" role="complementary">
<?php include roots_sidebar_path(); ?>
</aside><!-- /.sidebar -->
<?php endif; ?>
</div><!-- /.content -->
</div><!-- /.wrap -->
<?php get_template_part('templates/footer'); ?>
</body>
</html>
so Im just not sure how to get past it in any of the page templates
About the first part of your question: "100% width colored parts".
Cause Bootstrap use the box-sizing: border-box model every html-element gets 100% width of its parent by default. So wrap your .container div's in other element (div, header, etc). This wrapper is a direct child of the body and gets 100% width. See: http://bootply.com/87196
<header role="banner" class="banner">
<div class="container" style="background-color:red;">
Header example
</div>
</header>
<div style="background-color:blue;">Elements get 100% width by default</div>
The second part about your page templates. The code you show use the get_template_part(). This function is a core function of WordPress. See http://codex.wordpress.org/Function_Reference/get_template_part#Using_loop.php_in_child_themes. You will find where your templates should be located.
But i think read http://roots.io/roots-101/#theme-templates first.
Thank you, I had a few solutions offered to me yesterday also, in case anyone else looks at this.
my own was simply to remove the .container class from the base.php file. - this just stopped the content of every page being constrained in a container by default. - this way I was able to add sections to the page at full browser width, and add .container inside them to constrain the actual content.
lines 16 and 17 of original base.php
<div class="wrap <?php if ( ! is_front_page() ): ?>container<?php endif; ?>" role="document">
<div class="content <?php if ( ! is_front_page() ): ?>row<?php endif; ?>">
In app.less
.home .main {
padding: 0;
}
Then add your sections like so:
<section class="semantic-section-class">
<div class="container">
<!-- your content -->
</div>
</section>
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.
Basically, I would like to accomplish the following with jQuery:
<div class="120 most-voted">
<!-- DON'T HIDE THIS DIV -->
</div>
<div class="110 voted">
<!-- some stuff here -->
</div>
<div class="120 voted">
<!-- hide this div with class '120' since there's already
another div with class '120' at the top -->
</div>
<div class="23 voted">
<!-- some stuff here -->
</div>
EDIT: The numbers are dynamically generated by a PHP function:
<?php $postid = get_the_ID(); // capture the id ?>
<div id="<?php echo $postid; ?>" class="most-voted">
I don't want to hide the div at the top.
Any suggestions (I don't mind wrapping another div in the div at the top to accomplish this result)?
This will make the first div with class "v120" visible and all others hidden:
var theClass = "v120";
$("div." + theClass).first().show().end().not(":first").hide();
Live example
(I added the "v" to "120" because I wasn't sure whether "120" is a valid CSS class.)
How that works:
Find all divs with the class - $().
Reduce that set temporarily to the first match - .first()
show that one (in case it used to be hidden)
End the temporary reduction of the set - .end()
Reduce the set to only the matches that aren't the first - .not(":first")
hide them
Its not valid html, the id must be unique within the document
http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
Use rel attributes instead of IDs. Then use selector like:
$('div.voted[rel=110]')
If you want to use same div, you should conceder using a class attribute since double id is not allowed.
<div class="most-voted id_120">
<!-- some stuff here -->
</div>
<div class="voted id_110">
<!-- some stuff here -->
</div>
<div class="voted id_120">
<!-- hide this div with id 120 since its already
at the top in the div with class most-voted -->
</div>
<div class="voted id_100">
<!-- some stuff here -->
</div>
use this to locate the first on http://api.jquery.com/first-selector/