WordPress corrects the html markup in posts and also in template specific files.
I’m working on a template and what I’m trying to achieve is wrap a div in <a href"#"></a>
tag.
Before the foreach loop there is placed, then some more php and html markup and right before the foreach loop ends I paste in the ending tag .
What wordpress doeas it automatically adds the ending tag right after a href string tag, removes the correctly placed ending tag making the link empty.
He’re is what I type:
<li <?php if (get_option('square_portfolio_filter') != "true") { ?> data-id="id-<?php echo $count; ?>" data-type="<?php foreach ($terms as $term) { echo strtolower(preg_replace('/s+/', '-', $term->name)). ' '; } ?>" <?php ; } ?>>
<a href="#">
<div class="thumbs-animate">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail(array(255,191), array('title' => ''.get_the_title().''));
}
?>
<div class="details">
<h5><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
<p><?php content('15'); ?></p>
<a href="<?php the_permalink(); ?>">
<?php
if(get_option('square_view_project_link')!="") {
echo get_option('square_view_project_link');
}else {
_e( 'View Project', 'square_lang' );
}
?>
</div>
</div>
</a>
</li>
And here is what WordPress ends up saving:
<li <?php if (get_option('square_portfolio_filter') != "true") { ?> data-id="id-<?php echo $count; ?>" data-type="<?php foreach ($terms as $term) { echo strtolower(preg_replace('/s+/', '-', $term->name)). ' '; } ?>" <?php ; } ?>>
<a href="#"></a>
<div class="thumbs-animate">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail(array(255,191), array('title' => ''.get_the_title().''));
}
?>
<div class="details">
<h5><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
<p><?php content('15'); ?></p>
<a href="<?php the_permalink(); ?>">
<?php
if(get_option('square_view_project_link')!="") {
echo get_option('square_view_project_link');
}else {
_e( 'View Project', 'square_lang' );
}
?>
</div>
</div>
</li>
I temporarily fixed the issue using some javascript code but its neither good practice nor what I want to have:
onclick="location.href='<?php the_permalink();?>';" style="cursor:pointer;"
Just wanted to comment that wrapping a block-level element is inside an inline element is perfectly fine in HTML 5.
<a href="#"><div>...</div></a>
is valid html 5.<a href="#"><div>...</div></a>
is invalid HTML. You’re not supposed to have a block-level element (div
) inside of an inline element (a
). WordPress is likely trying to protect you from that.I can’t tell if using
#
as yourhref
is part of the actual code or just something you did for simplification, but if that is the actual code and you’re attaching anonclick
or something to thea
, you could instead attach that to thediv
and it would work just as well.