im trying to style my WP post which is located in Single.php file ,
for the record this file contains
">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<div class="card-header">
<h2><a title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>
<div class="card-body">
<div class="entry">
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; endif; ?>
and i dont know how to style it cus there are no classes for anything in the said posts .
any ideas how to style my content with code and manually ???
You can do it with following code.
first you will have to declare a class
<div <?php post_class() ?> id="post-<?php the_ID(); ?>" <?php post_class("my-custom-css"); ?>>
now you define css in your theme css file
.my-custom-css{
//do css stuff here
}
You can give it a class name and then create a custom css for the just created style
Related
This is my first time on here so apologies if something like this has been asked before.
My current sites has 2 posts per row but I want the first/latest post to be styled slightly different.
Basically I want the first/latest post to be 100% wide on the page then all the other posts to follow, 2 per row but only on the home page. Category pages etc I'm happy for that to stay 2 per row.
My current code is:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article class="post-item clearfix" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<figure>
<?php the_post_thumbnail('single-post-feature'); ?>
</figure>
<header>
<div class="post-header-title">
<div class="post-category-feature">
<?php echo get_the_category_list(); ?>
</div>
<?php if ( is_singular() ) { echo '<h1>'; } else { echo '<h2>'; } ?><span><a class="black" href="<?php the_permalink(); ?>"title="<?php the_title_attribute(); ?>" rel="bookmark"><?php the_title(); ?></a></span><?php if ( is_singular() ) { echo '</h1>'; } else { echo '</h2>'; } ?>
<div id="excerpt"><?php the_excerpt(); ?></div>
<div id="author_date"><p><span><?php the_time('jS F Y') ?> | by <?php the_author(''); ?></span></p></div>
</div>
</header>
</article>
<?php endwhile; ?>
<?php endif; ?>
</div>
Any help would be greatly appreciated. If you would like to see the site to understand what I mean it is www.ltstlife.com. Thanks again.
I am using the ACF Repeater to create rows of images/content and to show/hide when clicked. Everything looks good on desktop screens, with a row of 3 images, when an image is clicked, the hidden div shows up below and the background color toggles on so you know which image's content you are looking at.
My problem, is I am trying to get the same functionality on mobile, but when an image is clicked, the content shows up under the 3rd div. I want to be below the image that was clicked. Since I am using the ACF repeater, my php script creates the parent div (3 across) first and then the hidden divs below.
I don't mind creating a separate html markup for mobile, I just can't figure out how to make it work with the ACF repeater.
<div class="staff">
<?php if (have_rows('staff_rows')):
while (have_rows('staff_rows')): the_row(); ?>
<div class="staff-wrap">
<div class="staff_images">
<?php if (have_rows('staff_images')):
while (have_rows('staff_images')): the_row(); ?>
<a href="#/" class="<?php the_sub_field('staff_class'); ?> show staff-box">
<img src="<?php the_sub_field('staff_image'); ?>"><div class="image-box"><h3>
<?php the_sub_field('staff_name'); ?></h3>
<h3><?php the_sub_field('staff_position'); ?></h3></div>
</a>
<?php endwhile;
endif; ?>
<?php if (have_rows('staff_bios')):
while (have_rows('staff_bios')): the_row(); ?>
<div class="bios">
<div class="wrap">
<div class="<?php the_sub_field('bio_class'); ?> row"><?php
the_sub_field('bio_text'); ?></div>
</div>
</div>
<?php endwhile;
endif; ?>
</div>
http://toolboxdevmachine.com/TechNiche/about-us
Thanks for your help
I'm guessing you've already figured this out by now, in 2019. It looks like you are missing a few closing <div> tags, as well as ending your while loop and the primary conditional. I broke out the code, indented it and wrote it with the correct closing tags:
<div class="staff">
<?php if (have_rows('staff_rows')):
while (have_rows('staff_rows')): the_row(); ?>
<div class="staff-wrap">
<div class="staff_images">
<?php if (have_rows('staff_images')):
while (have_rows('staff_images')): the_row(); ?>
<a href="#/" class="<?php the_sub_field('staff_class'); ?> show staff-box">
<img src="<?php the_sub_field('staff_image'); ?>">
<div class="image-box">
<h3><?php the_sub_field('staff_name'); ?></h3>
<h3><?php the_sub_field('staff_position'); ?></h3>
</div>
</a>
<?php endwhile;
endif; ?>
<?php if (have_rows('staff_bios')):
while (have_rows('staff_bios')): the_row(); ?>
<div class="bios">
<div class="wrap">
<div class="<?php the_sub_field('bio_class'); ?> row">
<?php the_sub_field('bio_text'); ?>
</div>
</div>
</div>
<?php endwhile;
endif; ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
My Wordpress site displays all the posts, stacked in articles spanning the full width on the index.php using rows (Bootstrap 3).
index.php - HTML
<div>
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
get_template_part( 'content' );
?>
<?php endwhile; ?>
<div class="clearfix"></div>
<div class="col-md-12">
</div>
<?php else : ?>
<?php get_template_part( 'no-results', 'index' ); ?>
<?php endif; ?>
</div>
content.php displays the post in each article (which are stacked on top of each other, full width, down the page)
<article id="post-<?php the_ID(); ?>" <?php post_class('container-fluid'); ?>>
<div class="row">
<div class="col-md-12 horiz-cell">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
I have the title and category showing up properly in each row. I would like each post's post-thumbnail (I added its use in functions.php) to be the background image of each row. Filling the whole space (background-size: cover)
Basically large, '100% width' & '300px(roughly) height' rows, each with corresponding title, category, and their post-thumbnail as a background-image.
If not done yet, enable thumbnails and define custom image sizes:
// Enable thumbnails
add_theme_support( 'post-thumbnails' );
add_image_size('my-fun-size',580, 480, true);
To display the thumbnails:
First, get the featured image URL for the post:
The parameter 'my-fun-size' should be the name of the size of the image you defined in your functions.php file - it can also be 'full' or 'thumbnail'
<?php
if (has_post_thumbnail()) {
$thumbnail_data = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'my-fun-size' );
$thumbnail_url = $thumbnail_data[0];
}
?>
Then add the image as a background:
<article id="post-<?php the_ID(); ?>" style="background-image:url('<?php echo $thumbnail_url ?>')" <?php post_class('container-fluid'); ?> >
<div class="row">
<div class="col-md-12 horiz-cell">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
And finally, apply some CSS to achieve your desired background-size:
article {
background-size: cover;
}
It sounds like you've already figured out the CSS part, so here's the PHP/HTML you're looking for:
<article id="post-<?php the_ID(); ?>" <?php post_class('container-fluid'); ?>>
<?php $imgurl = wp_get_attachment_src( get_post_thumbnail_id($post->ID) ); ?>
<div class="row" style="background-image: url('<?php echo $imgurl[0]; ?>');">
<div class="col-md-12 horiz-cell">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
References:
http://codex.wordpress.org/Function_Reference/get_post_thumbnail_id
http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src
I am trying to target individual posts so I can change the css (title tags, padding, etc) of specific posts. My Wordpress site currently generates the posts in a loop.
index.php code (brings in content.php which has 'post' code)
<div>
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
get_template_part( 'content' );
?>
<?php endwhile; ?>
<div class="clearfix"></div>
<div class="col-md-12">
</div>
<?php else : ?>
<?php get_template_part( 'no-results', 'index' ); ?>
<?php endif; ?>
</div>
content.php code (gets post-title, category, and sets post-thumbnail to background-image)
<?php
if (has_post_thumbnail()) {
$thumbnail_data = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID()), 'my-fun-size' );
$thumbnail_url = $thumbnail_data[0];
}
?>
<article id="post-<?php the_ID(); ?>" style="background-image:url('<? php echo $thumbnail_url ?>')" <?php post_class('container-fluid'); ?> >
<div class="row">
<div class="col-md-12">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
functions.php (setting image size)
add_theme_support( 'post-thumbnails' );
add_image_size('my-fun-size', 'thumbnail');
The output is 'rows' 100% width with the title, category and background-image (feature-image). Stacked on top of each other. I want to be able to target the text and bg-image of different posts to make them each look different.
i think the best way to to this is by adding a custom field inside your posts, then, in your templates, you call that custom field this way:
get_post_meta($post->ID, 'name_of_your_custom_field', true);
this must be inside the loop.
Is there a way to combine content from a wordpress page's main textarea with the content in its custom template?
In this case I have a custom template that displays all posts from a single category, but I would also like to have a section that displays what is written in the wordpress admin Page area.
This is how I have the custom template set up to display relevant posts:
<?php query_posts('category_name=baby-coupons'); ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<h2><?php the_title() ;?> <span class="post-date">- <?php the_time('F j, Y'); ?></span></h2>
<div class="row">
<div class="one-third">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</div>
<div class="two-third last">
<?php the_excerpt() ;?>
</div>
</div><!--/row-->
<hr>
<?php endwhile; ?>
Above this I would like to have the wordpress pages admin area content display, what a user would normally write into the textarea to display on the page, is this possible?
This is what I've come up with:
<?php get_posts(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content() ;?>
<?php endwhile; ?>
<?php query_posts('category_name=baby-coupons'); ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<h2><?php the_title() ;?> <span class="post-date">- <?php the_time('F j, Y'); ?></span></h2>
<div class="row">
<div class="one-third">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
</div>
<div class="two-third last">
<?php the_excerpt() ;?>
</div>
</div><!--/row-->
<hr>
<?php endwhile; ?>
Is this acceptable? It's working but I'm not sure how classy it is!