I am creating my own custom theme from scratch and have run into a bit of trouble. On the blog page, each time a new post is displayed, it is smaller than the last. This is due to me setting the width of the blog post to 33.3%. Also each blogpost gets displayed slightly right of the one previous to it. How can I have each blog post be 33.3% of the content area and be displayed side by side, 3 per row? I am using wordpress functions to call each blog post. I am only displaying the blog posts thumbnail and when you click the thumbnail it takes you to the post. So basically 3 images side by side.
[BONUS]: How could I get text to display horizontally and vertically on hover over each blog post image?
I know this is a lot to ask, but I have been trying to work this out for days. A JS Fiddle or Codepen would be greatly appreciated.
Index.php:
<?php get_header(); ?>
<div class="blog-posts">
<?php while (have_posts()) : the_post(); ?>
<div id="page-content">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<h3><?php the_title(); ?></h3>
</a>
<?php endwhile; ?>
</div>
</div>
<?php get_footer(); ?>
You should use bootstrap and do something like this :
<?php get_header(); ?>
<div class="blog-posts">
<?php while (have_posts()) : the_post(); ?>
<div class="col-md-4">
<div id="page-content">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<h3><?php the_title(); ?></h3>
</a>
</div>
</div>
<?php endwhile; ?>
</div>
<?php get_footer(); ?>
Take care to remove the width: 33.33%; CSS rule and close your <div> tags in the loop, not after.
Hope it helps
[EDIT]
See this link for more information about how to use column classes with bootstrap : grid example basic
[EDIT #2]
You could do it without bootstrap but it will be a bit more difficult. You'll have to set the "display" to "inline-block" and set the width of the divs with taking care of the inherit margin of these tags. In this example, I had to set it to 32%. Here is the fiddle
Related
I'm creating a portfolio page using "WordPress posts" (this is so it spits out single.php pages nicely for me) using PHP and ACF. I'm trying to find a way to put each "category" in its own div. This would allow me to style the layout of the content within each filter. Please see the example below. Maybe I should be doing this a different way?
• Filter 1 - 1 column layout
• Filter 2 - 3 column layout
example of filter 1
example of filter 2
TLDR: Trying to put the content of each WordPress category in its own div.
<div class="work">
<?php if (has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>" class="blogimage">
<?php the_post_thumbnail( 'medium' ); ?>
</a>
<?php endif; ?>
<div class="work-copy">
<div class="category">
<?php echo get_the_category_list(); // Display categories as links within ul ?>
</div>
<h2 class="headline">
<?php the_title(); ?><i class="fal fa-chevron-right"></i>
</h2>
</div>
</div>
<?php endwhile; ?>
WordPress automatically adds CSS classes to different elements throughout your website. These include both the body class and the post class.
For example, if you view a category archive page and then use the Inspect Tool, you will notice category and category-name CSS classes in the body tag.
Category class added to body element by WordPress
You can use this CSS class to style each individual category differently by adding custom CSS.
You can find more details here
Quite a simple fix after doing some research, here is the answer I found useful;
<?php $category = get_the_category(); ?>
<div class="category-<?php echo $category[0]->slug ?>">
Place this within each post. In order to style each div class individually, you need to place a containing div in between the if / while statement. Then you'll the place content of each "category filter" with the div.
<?php if ( have_posts() ) : // Do we have any posts in the database that match our query? ?>
<div class="work-container">
<?php while (have_posts()) : the_post(); ?> <!-- Finds the post -->
<?php $category = get_the_category(); ?>
<div class="category-<?php echo $category[0]->slug ?>"> <!-- This calls out the Category in the WP Post -->
<div class="work-group">
<?php if (has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>" class="blogimage">
<?php the_post_thumbnail( 'medium' ); ?>
</a>
<?php endif; ?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
This was answered here and with a bit of playing I got it to work, Hope this helps someone! Get the name of the first category
I have created a sidebar.php-file with the code;
<section class="sidomeny"><p class="Senastenytt2"><?php get_search_form();?></p></section><!--Slut på sidomeny-->
<div id="nyhet3">
<?php
query_posts('category = all');
if (have_posts()) :
while (have_posts()) : ?>
<?php the_post(); ?>
<p class="datum2"><?php the_time('Y-m-d'); ?></p>
<p class="Nyhetsrubrik3"><a style="orange"; href="<?php the_permalink() ?>" ><?php the_title(); ?></a></p>
<?php the_excerpt(); ?>
<p class="textnyhet2"></p>
<?php
endwhile;
endif;
?>
</div><!--Slut på Nyhet3-->
And now I would like to add the function that if you press the sidebar news section, the "textnyhet2" section will get updated with the news you clicked on. That is how it's working now.
But the problem is that the sidebar vanished whenever you click on one of those "latest news" links. So what I need help with is to edit the sidebar.php-file so the "latest news" function with links is still there so you don't have to go back one page whenever you would like to read about another post.
Im not sure how to do this. If it's php involved or if you can do it by simple visiting the posts/pages section in wordpress.
Would be grateful if anyone could help me. If I have forgotten any necassary information please tell me and I will the post.
Thanks!
<?php
get_header();
?>
<section class="textinnehall">
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;?>
</section>
<section class="sidomeny">
<?php
get_sidebar(); ?>
</section>
<?php
get_footer();
?>
This is my page.php file. Don't know if it will be to any help. But the sidebar is already active.
May be the sidebar is not called in your single page.
you need to have the same design in your themes single.php page(As per twenty ten theme standard).
<p class="Nyhetsrubrik3"><a style="orange"; href="<?php the_permalink() ?>" ><?php the_title(); ?></a></p>
The href <?php the_permalink() ?> takes the post to single page for full view
Just call the sidebar in your theme's single page.
I have a loop which displays blog post Titles, Excerpts and a Read More link.
I want to also include the amount of views each blog post has in the loop.
I have tried using various view count plugins but none seem to work within a loop.
Would anyone know if there is a way to, say, retrieve this info directly from the database, pairing views with post IDs?
My loop is:
<div id="bloglist">
<?php query_posts('category_name=blog&showposts=6'); while (have_posts()) : the_post(); ?>
<div class="panel">
<div class="panel-wrapper">
<div class="blogstats">
<div>ID: <?php $postid = the_ID(); echo $postid; ?></div>
<div>Views: <?php echo_post_views($postid); ?> </div>
</div><!--BLOGSTATS--->
<div class="excerpt"><?php the_excerpt(); ?></div>
<a class="readmore" href="<?php the_permalink(); ?>">Read More</a>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
</div><!--BLOGLIST-->
I am currently unsuccessfully using the WP-post-view plugin
I suggest using this plugin
WP-PostViews
i attached a picture for change plugin setting
image WP-PostViews setting
good luck.
I'm trying to pull post types into my Bones based theme, and I'd like those posts to live inside of divs. eg.
<div class="fourcol"></div>
The problem is, some of the divs will also need a class of "first" or "last".
Right now, I'm using JQuery to find all of the divs with the class "fourcol" and adding a "first" class to the first div in the row, and a "last" class to the last div in the row. It seems to work, but there's a little bit of shifting when the page loads, and it doesn't seem as safe as I'd like it to be. It also causes issues when trying to filter the post types, as the first and last div are constantly changing, and the jQuery isn't reloading to reflect the posts new position.
Is there better way to pull these posts into divs?
I've tried everything I can to come up with minor fixes, but I'm sure it's come up before so I figured I'd post it here. Let me know if you have any suggestions!
Here's my loop so far:
<?php query_posts( array( 'cat' => 10, 'post_type' => 'people', 'showposts'=>-1 ) ); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="threecol">
<article id="post-<?php the_ID(); ?>" <?php post_class( 'clearfix' ); ?> role="article">
<header class="article-header">
<center><h3><?php the_title(); ?></h3></center>
</header> <?php // end article header ?>
<section class="entry-content clearfix">
<a class="ctp-hover" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<span class="hover-caption">VIEW</span>
<?php the_post_thumbnail('full'); ?>
</a>
</section> <?php // end article section ?>
</article> <?php // end article ?>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
For my portfolio site, I would like to add anchor links to both the 'work' and 'blog' sections so that when clicked through to the next page it goes to the respective section. I noticed this is possible using jQuery from this question: WordPress pagination - Adding an Anchor link, but am unsure how this would work with two loops on the same page?
my current loops look like this, just replacing categories for each section:
<?php $paged = (get_query_var('page')) ? get_query_var('page') : 1;
$args=array('category_name'=>'portfolio','posts_per_page'=>4,'paged'=>$paged);
query_posts($args);
if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="blog-post">
<div class="thumbnail">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
<a class="details" href="<?php the_permalink(); ?>">
<h6><?php echo get_the_excerpt(); ?></h6>
</a><!-- DETAILS -->
</div><!-- THUMBNAIL -->
<div class="aside">
<h4><?php the_title(); ?></h4>
</div><!-- ASIDE -->
</div><!-- BLOG - POST -->
<?php endwhile; ?>
<div class="navigation">
<h3><?php posts_nav_link('∞','« Newer Posts','Older Posts »'); ?></h3>
</div><!-- PAGED-NAVIGATION -->
<?php wp_reset_query(); ?>
Ah I see what you mean; actually you are better off using wordpresses $args for the paginate_links() function. You can see it here: http://codex.wordpress.org/Function_Reference/paginate_links .
The one you want to change is 'format'=>'?page=%#%', (which is the page number) and changing it to something like 'format' => '?page=%#%#work', and 'format' => '?page=%#%#blog',
So you can do:
echo paginate_links(array('format' => '?page=%#%#work')); which should make clicking the link jump back down to the work anchor.
The problem is, you will still have a page jump if the user isn't scrolled exactly to the position of the anchor link. You are best to implement an Ajax solution so there is no reload of the page at all. Here is a good tutorial to get you started: http://wp.tutsplus.com/articles/getting-started-with-ajax-wordpress-pagination/
Where you have your first <div class="navigation">
Add an id="work" and to the second id="blog"
so you would have
<div class="navigation" id="work">
</div>
<div class="navigation" id="blog">
</div>
Somewhere on your page.
Then you need a small modification to the jquery from the question you referred to to make the correct anchor link:
<script type="text/javascript">
$(document).ready(function() {
$('.pagenavi a').each(function(i,a){
$(a).attr('href',$(a).attr('href')+'#'+a.parents('.navigation').attr('id'));
//$(a).attr('href',$(a).attr('href')+'#blog') <-- instead of this
});
});
</script>
The parents('.navigation').attr('id') tells jquery to move up the dom intil it finds the navigition tag, and just grab it's ID to use as the text for the achor text
If you already have the ids blog and work on the page, you could use rel="work" instead and then you would in the jquery use attr('rel')