What I want to know is, how can I implement my already made index.php file to apply custom posts to it. (See below)
What I want to accomplish:
Display all posts(already accomplished in index.php)
--> show normal post a.k.a 'Article' (already accomplished in index.php)
If category/or post type 'Aside' is used, don't apply a <a> tag, make title lighter(can figure it out in CSS)
-->show text for the 'Aside' marked post
If category/or post type 'Link' is used, wrap title in <a> tag linking to a site(<-- how would I do that in WordPress?)
-->show text for info about the link
If category/or post type 'Photo' is used, don't wrap title in a <a> tag
-->show attached image in post, and post text as a caption
I know this may look like a lot but I'm sure it's easily do-able.
Some source code may not help me all the way, so I have my index.php below to see if you can help me implement it into it:
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<article>
<!-- <p><span class="metaCat"><?php the_category(', '); ?></span></p> -->
<h1><?php the_title(); ?></h1>
<p><span class="meta"><?php the_time('F jS, Y') ?></span></p>
<hr />
<div class="entry">
<?php the_content('Read the rest of this entry ยป'); ?>
</div>
</div>
</article>
<hr class="big" />
<?php endwhile; ?>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
If you can input the needed code into a workable index.php file you will get some well thought of brownie points!
Thanks and all help is welcomed!
I finally see what you meant to do here. This is easily done using the get_post_format() function. Just replace the title here with:
<?php
$format = get_post_format(get_the_ID());
if ($format == 'link') { ?>
<h1><?php the_title(); ?></h1>
<?php }else{ ?>
<h1><?php the_title(); ?></h1>
<?php } ?>
The other bit about linking to a site though, I'm not sure how you want to accomplish that. Are you referring to the blogroll?
The best option for the "link" post format, is to use a custom metabox/custom fields. Add your key as "URL" then type the address in the value field.
Use get_post_meta() to get the URL and use that instead of the_permalink() in the href.
Related
I am hitting a bit of a brick wall with a simple WordPress problem. I am using the ACF plugin and can't seem to get it to show the field on the pages. My page.php file looks like this:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="main">
<div id="content">
<?php if (have_posts()) : ?>
<!-- Starting the loop -->
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?>>
<h1><?php the_title(); ?></h1>
</div>
<?php the_content(''); ?>
<?php endwhile; ?>
<h2><?php the_field('bottom'); ?></h2>
<?php else : ?>
<h1>Nothing Found</h1>
<p>Sorry but we cant find anything</p>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>
It's really simple as far as I can tell. Was just doing this as an exercise to get a handle on ACF before using it for something more technical and I'm stumped!
The field is 'bottom' and I just want to stick the text in there after the loop.
Screen shot of the custom field in the plugin
I'm guessing this is going to be something really simple but can't seem to find an answer anywhere!
(Posting a solution on behalf of the OP).
The answer is simple, as expected. I hadn't clicked update on the specific pages after adding the custom field template! Simple but no less frustrating. Thanks for the help.
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
My Wordpress site has a loop that creates posts, and I want to target specific posts to change their css values.
html - index.php
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
get_template_part( 'content' );
?>
<?php endwhile; ?>
content.php
<?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="container-fluid">
<div class="col-md-12 text-cell">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
It was suggested that I use 'get_post_meta ...' but I am not familiar with how to use it. I just want to change css values (padding, font-size, etc) for different posts
I would suggest using Custom Fields for this, so that you can define the values in the post itself, as opposed to having to edit the code every time you add a new post.
In the post, make sure you have Custom Fields visible (Togglable from screen options at the top)
Then make a field called "Alignment" or whatever you prefer and assign a value to it. (for example 'left')
Then you can add a conditional in the loop.
<?php $alignment = get_post_meta(get_the_ID(),'Alignment',true);
if($alignment) == 'left'):?>
<p>Do stuff and things here...</p>
<?php endif;?>
You can read more about it here: https://codex.wordpress.org/Custom_Fields
Hopefully that will work for you. If you want to get fancier with it, I would suggest looking at the Advanced Custom Fields plugin, which allows a lot more flexibility and options.
EDIT from comments:
1st option:
Set a field of "ExtraCSS" to "color:green;"
<?php $extraCSS = get_post_meta(get_the_ID(),'ExtraCSS',true);?>
<article id="post-<?php the_ID(); ?>" style="background-image:url('<?php echo $thumbnail_url ?>'); <?php echo $extraCSS;?>" <?php post_class('container-fluid'); ?> >
2nd option:
(In your stylesheet:)
article:nth-child(2n+0)
{
color:green;
}
http://www.w3schools.com/cssref/sel_nth-child.asp
I have a wordpress site I am creating.
on the post pages, I have text widget with PHP allowed, where I have a custom loop:
<?php $my_query2 = new WP_Query("showposts=1&cat=9,10,11,18,19&orderby=rand"); ?>
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>">
<div class="home-widget-thumb">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail('home-thumb');
}
?>
</div>
<h2><?php the_title(); ?></h2></a>
<div class="body">
<?php echo get_the_excerpt(); ?>
</div><!--body-->
</br>
<span class="more-link">
[more]
</span>
<?php endwhile; ?>
<?php else : ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
For some reason, whatever blog post you are on is the same as in the loop I created.
See an example here:
http://counselingandtraining.com/play-therapy/
The loop for the post is not modified.
Can anyone tell me why this is happening?
Let me know if I can provide further info.
Thanks in advance for your time.
Chris
It looks to me like the problem is that you are still using the base query.
You can change this by adding your variable $my_query2 in the code like this:
<?php if ($my_query2->have_posts()) : ?><?php while ($my_query2->have_posts()) : $my_query2->the_post(); ?>
This will make all the functions like the_title(), the_content(), etc work as intended since they will be set to $my_query2.
I've got a wordpress blog theme which shows the content of all posts on the index fine but when I click into one of the posts the content of the post is blank and I can't seem to figure out why. If I'm correct the single.php controls that page.
http://pastebin.com/afLVxMPb = My single.php
an example of what I mean would be http://www.ndesign-studio.com/demo/wordpress/blog/how-about-a-blog-post-with-longer-title but on this site the content of the blog post does show up but on mine it doesn't.
I think the problem is somewhere here...
<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?>
</div><!-- .entry-content -->
You should add "the loop" somewhere in your single.php file and call setup_postdata($post) or the_post() so you can access the post data inside that loop.
Read more about the loop here: http://codex.wordpress.org/The_Loop
For example, your single.php file will look something like this (simplified):
........
<div id="content">
<?php if(have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php the_title(); ?></h1>
// etc.. all post info
............
<?php endforeach; ?>
Hope that helps! Good luck.