Currently my blog posts have a small "view more" link at the bottom. Ideally, I would like to change it so that you can click anywhere in the <article class="blog-post"> and it will link you to the relevant article.
I have figured out how to do it so the excerpt is clickable, but cannot convert it to for the entire article
Code for the excerpt -
function clickable_excerpt( $post ) {
return ''. $post .'';
}
add_filter( 'get_blog_post', 'clickable_excerpt' );
Find class="grid-item" in your theme code, i found it at content.php and then add onclick javascript on article tag, like below
<article id="post-<?php the_ID(); ?>" <?php post_class('grid-item'); ?> onclick="document.location='<?php the_permalink(); ?>'">
also don't forgot to add CSS
article.grid-item {cursor: pointer;}
Try this:
add_filter( 'the_content', 'filter_content' );
function filter_content( $content ) {
if ( is_singular('post') ) {
$content = '. $content .';
}
return $content;
}
Better if you can do it directly in your theme single page template, this link help you to identificate the correct page in your theme:
https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
Related
I'm trying to do something with my Bootstrap .post-title class.
I want to put an element.style background on my post titles, which calls as a background, to the post featured image, for each post. I've already achieve this, but something went wrong and now isnt working. the only thing i know is must look something like this.
<div class="post-featured" style="background-image:url('upload/<?php the_post_thumbnail( 'wpbs-featured' ); ?>')">
but something in the syntax there is wrong, because it render this characters on HTML. whats going on?
')">
live example: WP Featured post image, as a div background
the_post_thumbnail returns an IMG html tag. So the generated code is
<div class="post-featured" style="background-image:url('upload/<img src="path/to/file.png">')">
Definitely not something that could work... You want the url only, so you should do this:
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'wpbs-featured', true);
<div class="post-featured" style="background-image:url('<?= $thumb_url[0] ?>')">
this is the actual html snippet working.
<?php
$img = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "full");
$img = $img[0];
?>
<div class="postfeatured" style="<?php if($img){echo 'background:url('.$img.');';} ?>">
<div class="page-header"><h1 class="single-title" itemprop="headline"><?php the_title(); ?></h1>
<h4>
<?php $mykey_values = get_post_custom_values('_aioseop_description');
foreach ( $mykey_values as $key => $value ) {
echo substr("$value",0 ,300); //This will display the first 150 symbols
}?>
</h4>
<hr>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_native_toolbox"></div>
<hr>
</div>
</div>
live example: Design Thinking. Blog de Diseño Gráfico. Picoboero
I'm building my own theme. I have a page set for my blog (with a template that I made) which I'd like to just display a few of my posts. It uses the following loop:
<?php
query_posts('post_type=post');
if (have_posts()) {
while (have_posts()) {
?>
<div class="blog_post">
<h2><?php the_title(); ?></h2>
<div class="entry_date"><?php the_time('F jS, Y') ?></div>
<?php
the_post();
the_content();
?>
</div>
<?php
}
}
?>
The titles of my posts are "First Post, Second Post, Third Post, and Fourth Post" respectively. When the posts are displayed on the blog page, they are displayed in the correct order, but the titles of the posts are incorrect. The first post's title reads: "Second Post". The second post's title is: "Third Post", and so on until the last (most recent) post which has the title: "Blog" (the page title). What happened to the titles that they got so screwed up?
What I've Tried:
I've researched this a lot before I came here. I tried using get_the_title() instead but that lead to no titles being displayed. I've also tried using the_title_attribute() to no avail. I also understand that I shouldn't be using query_posts for this loop but I'm unsure which is the correct method to use for getting the posts in this particular case. Most of the info I've read was unclear though and didn't seem to fix the issue.
Any help is greatly appreciated.
Try something like this: untested
<?php
global $post;
$args = array();
$myposts = get_posts( $args );
foreach( $myposts as $post ) :
setup_postdata($post); ?>
YOUR HTML HERE
<?php endforeach;
wp_reset_postdata(); ?>
Okay Nevermind! I just found out what the problem was. I moved, "the_post()" to just after the while loop so now it reads like this:
<?php
query_posts('post_type=post');
if (have_posts()) {
while (have_posts()) {
the_post();
?>
<div class="blog_post">
<h2><?php the_title(); ?></h2>
<div class="entry_date"><?php the_time('F jS, Y') ?></div>
<?php
the_content();
?>
</div>
<?php
}
}
?>
I found this solution while I was reading about the_post() in the wordpress codex. Turns out this function is setting up information for the next post in the line, so it shouldn't be mixed in with the html output for the current post.
In regards to whether or not I should be using "query_posts()" is still something I'm unsure of and willing to take any advice. But the loop in it's current form is working.
My wordpress theme (Anglepane) is creating a second (unwanted) post at the bottom of my page.
I have used Firefox page inspector and isolated the problem with the div tag "nocolsidepost", and I have gone through the 20+ theme files (css etc) and deleted this tag whereever I find it, but the second posts still remain!! - I can delete it on the fly with Firefox page inspector, but not in the actual code
Could anyone please explain how to solve this
Website is http://historyofliverpool.com and the section I want to remove it the bottom block with the previous / next links on it
I don't know the structure of the code in the theme but it can be in multiple parts of the code.
TwentyThirteen and TwentyFourteen themes (the ones bundled with Wordpress) use a separate function to show the pagination or the Prev/Next buttons. If your theme has this function (usually in function.php file) you will have to search for it and delete/modify all the lines that print something. For example, here is the function from TwentyThirteen theme:
function twentythirteen_paging_nav() {
global $wp_query;
// Don't print empty markup if there's only one page.
if ( $wp_query->max_num_pages < 2 )
return;
?>
<nav class="navigation paging-navigation" role="navigation">
<h1 class="screen-reader-text"><?php _e( 'Posts navigation', 'twentythirteen' ); ?></h1>
<div class="nav-links">
<?php if ( get_next_posts_link() ) : ?>
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentythirteen' ) ); ?></div>
<?php endif; ?>
<?php if ( get_previous_posts_link() ) : ?>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentythirteen' ) ); ?></div>
<?php endif; ?>
</div><!-- .nav-links -->
</nav><!-- .navigation -->
<?php
}
On the other side, the theme can easily implement the corresponding code directly in the archive.php, index.php and other category.php/tag.php files. It is similar to the function used above, the only difference is the function wrapper (the first is a function, the second not).
Or, simpler (but less proper) way to achieve this is to add a display:none; to the element above. But, to achieve this, you will have to find the code that generates it, to add there an id, and in the CSS use the id like this:
#your-id-here{
display:none;
}
I have a wordpress site, that need to show pages using swipe, I choose to use Jquery Mobile, and I get it working fine. Now, we have 2 languages on site, using wpml plugin. And my Swipe Code works well, except when we use Change language button swipe fails.
Details on issue.
We have only 3 Text Only page in our website, in 2 language. And in Footer we have link to change language. Also client hate to have Ajax page loading, so what I did is I create three Div with data-role=page and put data-next, data-prev as #div-$postid. So the navigation works absolute fine. I put footer outside from data-role=page.
Now, when I click change button in footer, it load the english page [I saw it using Fiddler] and then take first data-role=page from server and replace /slide its content. However since it only pick the first data role, all other english page doesn't get in HTML [it just update DOM and doesn't navigate to english version]. so swipe fails as other english pages are not in dom.
Also, footer is not changing, so what I want is: can we simple force a Link to navigate instead of going swipe way? Jquery Mobile is enforcing swipe on all A tags, I do not want swipe to works anything outside data-role=page.
Hope I make sense.
Edit here is code: [not sure if this code will help at all]
<?php
get_header();
global $post;
$args = array('post_type' => 'mobile_slide','showposts' => '-1', "order" => "DESC");
$the_query = new WP_Query($args);
if($the_query->have_posts()){
while($the_query->have_posts()) { $the_query->the_post();
$prev =get_previous_post();
$next =get_next_post();
if($prev) {
$prev = "#page-" . $prev->ID; //get_permalink($prev->ID);
} else {
$prev='';
}
if($next) {
$next = "#page-".$next->ID; //get_permalink($next->ID);
} else {
$next='';
}
if (has_post_thumbnail( $post->ID ) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'slider_image' ); ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>" style="background-image:url('<?php echo $image[0]; ?>'); background-position:center center; background-color:#000; background-repeat:no-repeat; ">
<?php } else { ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>">
<?php } ?>
<div class="post_box">
<h2><blockquote><?php the_title(); ?></blockquote></h2>
<div class="post_entry">
<?php the_content(); ?>
</div>
</div><!-- post_box -->
</div>
<?php }
} ?>
<?php get_footer(); ?>
This is all I have, except that get_footer use Ul li based list where on LI change based on language variable, to show different images for either language.
To stop Ajax from loading pages/links, add to link anchor data-rel="external" or data-ajax="false". This will load page normally without any transition.
Reference: jQuery Mobile - Links
For those who have similar problem, I fix it by using following:
1) I add a "noswipe" class to A Tag so I can refer it in Jquery
2) I add following code
$(function(){
$(".noswipe").click(function(){
window.location.href= $(this).attr("href");
return false;
});
});
The above code simply enforce to skip the Mobile's parsing and calling and works for my case.
I need to add a spantag to an h1 heading in wordpress. I tried writing in through the CMS but it renders the spantag as text.
The site's title is a name and I want to give different styles to the words.
Suggestions?
Following David Thomas's advice I've written this: but it appends the span last and empty.
<h1>
<a href="<?php bloginfo('url'); ?>/">
<?php
$completeName = bloginfo('name');
$split = explode(" ",$completeName);
echo $split[0]."<span>".$split[1]."</span>"
?>
</a>
</h1>
You should be using get_bloginfo as Felipe suggested, but still pass in the 'name' parameter.
I was just working on the same code for the same reason and thought I should post for future visitors:
<?php
$completeName = get_bloginfo('name');
$nameParts = explode(" ", $completeName);
echo '<span>'.$nameParts[0].'</span> '.$nameParts[1];
?>
Apply the style to the h1 instead.
By the way, you probably want to edit the theme.
What about:
<? echo get_bloginfo('name', 'raw'); ?>
Can't test it for now, but here's the documentation about it:
bloginfo()
==> it just echoes the result of get_bloginfo() and there's a second parameter to this function
==> wptexturize(), a function that WON'T be called so beware!