I am developing one wordpress site. I have made one post in it. Now I want to assign image in that post. For this, I have uploaded one image in media and attach that image to my post.
but how can I assign that uploaded image in my post? do I need to give path manually? or I can give dynamic path so that even if I upload this site on server or change main folder name, path gets changed automatically..
any help will be appreciated..
thank you
You should consider using Post Thumbnails (also known as Featured Images) in your posts. To do this, all you need to do is add the following to your functions.php file:
add_theme_support('post-thumbnails');
This will add a control in your Post Editor to add an image by either Uploading it or setting the URL, effectively "attaching" your image to your post in the way your looking for. To display the image in your template:
<?php
if(have_posts()) : while(have_posts()) : the_post();
if(has_post_thumbnail())
echo '<div class="post_thumb">'.get_the_post_thumbnail().'</div>';
?>
<div class="post_content"><?php the_content(); ?></div>
<?php
endwhile;endif;
?>
As for changing folder names, paths, etc. you need to be careful with that approach. Remember that you're giving a path to an asset. The server doesn't know what YOU want, only what your code is requesting. If you expect to be changing paths to your assets around quite a bit, then you can always forgo Post Thumbnails in favor of clever naming conventions. Something like this:
<?php
if(have_posts()) : while(have_posts()) : the_post();
$imgPath = get_bloginfo('stylesheet_directory').'/images/featured_'.$post->post_name.'.jpg';
?>
<div class="post_thumb"><img src="<?php echo $imgPath; ?>" /></div>
<div class="post_content"><?php the_content(); ?></div>
<?php
endwhile;endif;
?>
This looks for an image in your Theme Directory's images folder that is named featured_{post_slug}.jpg
The benefits to this approach is that Wordpress will always know where your theme folder is, regardless of URL changes. As long as you have an images folder in your theme directory, Wordpress will know where to look.
The drawback is that this code specifically doesn't first check for the EXISTENCE of the image before displaying it, which could lead to broken images if they aren't named properly or don't exist at all. This approach also requires the use of one file extension
A last option for you is to consider using Custom Fields to define paths to images. The benefit is that this does not require you to actually upload images to your server. However, this approach is still the least dynamic out of all of your options, and will likely break if paths to assets are changed.
Use whichever tool you feel is best for the job. Hope this helps!
Related
I'm absolutely new to WordPress theming but I decided to learn on the job and I really want the site to go live within the next week or so. I've stuck to a simple index.php (no templates or template-parts). I'm able to receive the contents in the proper format which they were published (with inline images, line breaks, etc.) but the css styling is absent. What could I be doing wrong?
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<div class="entry-content">
<?php
$content = wpautop(get_the_content());
echo $content;
?>
</div>
</article>
I realize there is a difference between the singular view and the list view (the loop). The list view doesn't actually style the content by default. Could that be where my problem lies, and if so, what's the best way to get around this problem?
EDIT
Essentially, I want the singular view (singular.php) within the index.php. When you visit the site you're greeted by an entire article, not previews and listings. So I don't actually need the loop for now. I simply retrieve the post and display the contents on the index page.
That is literally the only thing keeping my site from going online right now. I just need that article to be styled as it's supposed to be. There are only two files in my theme: index.php and style.css. I've already tried the_content(), I've also tried apply_filters('the_content', get_the_content()), to no avail. wpautop(get_the_content()) was the closest thing to styled I could get. I am retrieving the post using the_post() for now, could that be the issue, and if so, which is the best way to retrieve a post?
I have tried retrieving the post in various ways and it's still unstyled, so I decided to inspect the elements in the browser and found that WordPress is indeed attaching a class to the elements but just where on earth is that class? I read somewhere about a css reset being the possible cause -- how does one bypass any css reset issues?
It turns out it was just a header issue. Solved by adding:
<head>
<?php do_action('wp_head'); ?>
</head>
I am trying to hide the blog post thumbnails inside the blogposts, but at the same time I want to keep the thumbnails in my blog overview.
So far, I used the following CSS to make the thumbnail images disappear:
.attachment-post-thumbnail {display:none;}
However, this also makes them disappear on my blog overview: www.wavebutler.surf/surf-blog
Could anybody help me and let me know what CSS I could use to make the thumbnails disappear inside the posts. It would be very much appreciated!
Not sure if you found your solution or not but, Depending on your themes structure, in single.php look for something like
if(has_post_thumbnail()) :
the_post_thumbnail();
endif;
If you remove it from single.php or comment it out your single posts will no longer have your featured images
This could also be located in content.php which in this case you can just put a conditional statement on it.
if(!is_single()) :
if(has_post_thumbnail()) :
the_post_thumbnail();
endif;
else :
// continue on
endif;
Probably won't be this general as again it will depend on your theme but in a nut shell is how it can be done.
I am trying to create a Wordpress site. The design is Here
I have created most of the outline of the site, barring the 3 regions "Follow Us", "Self Employment" & "Into Work Consortium".
The client has told me he would like to make those 3 regions editable.
My template contains an Index file, Header & Footer File as well as the obvious CSS files.
I am using the "Multi Edit Plugin" Multi Edit Plugin but that guide, does it so that you create a CustomPage. I guess I could do that but what I want is my index.php file to be added to the admin side of the site and then point the template there or similar.
As it's getting a little frustrating working with multiple WP plugins that just don't seem to do the job correctly.
There are many ways to go about this: one being what was mentioned by Pekka and the other using Custom Page templates.
The above mentioned methods are, in theory, quite similar with subtle differences in terms of execution and inclusion.
Perhaps to better answer your question, I will provide a very brief sample outline below on Custom Post Templates. You may probably need to do a little more digging at Wordpress' Codex if you choose to further enhance anything else:
Custom Post Template Method
Referring to the wireframe provided in your image link, I propose that you use category filters to filter the associated posts to the right columns. So first up, you will need to create 4 categories for the method that I'm suggesting, namely: WELCOME, FOLLOW, SELF-EMPLOYMENT and CONSORTIUM.
After doing so, your index.php should look something like this:
INDEX.PHP
<?php get_header();?>
<!--container-->
<div id="container">
<?php query_posts('category_name=welcome&showposts=1'); ?>
<?php while (have_posts()) : the_post(); ?>
<!--top-content-->
<div class="top-content">
<h2><?php the_title();?></h2>
<p><?php the_content();?></p>
</div>
<!--top-content-->
<?php endwhile;?>
<!--bottom-content-->
<div class="bottom-content">
<!--follow-->
<div class="follow">
<?php include(TEMPLATEPATH . '/follow.php');?>
</div>
<!--follow-->
<!--self-employment-->
<div class="self-employment">
<?php include(TEMPLATEPATH . '/self-employment.php');?>
</div>
<!--self-employment-->
<!--consortium-->
<div class="consortium">
<?php include(TEMPLATEPATH . '/consortium.php');?>
</div>
<!--consortium-->
</div>
<!--bottom-content-->
</div>
<!--container-->
<?php get_footer();?>
What is happening here is that I'm doing a post query for posts tagged to the category "WELCOME" and filter the posts into the top-content DIV. Note that my loop starts right before of the top-content DIV and ends immediately after it. This will means that the loop will only affect that particular DIV. I have also set the post limit to "1", thereby restricting the display of posts to just the latest post.
Following on from there, you will notice that in the bottom-content DIV, I have included 3 different files for each column. These 3 files will be your custom post templates that you will need to create and have a post query to filter in the right post. An example of the custom post template will look something like this below:
FOLLOW.PHP
<?php query_posts('category_name=follow&showposts=1'); ?>
<?php while (have_posts()) : the_post(); ?>
<h2><?php the_title();?></h2>
<?php the_post_thumbnail('bottom-content-thumb');?> <!--you will have to enable featured image thumbs in your functions.php file before you can do this-->
<span class="read-more">Continue Reading</span> <!--there are other ways to do the read more link, but I'm just giving an example now so yeah-->
<?php endwhile;?>
The rest of the custom post templates for the bottom 3 columns should look something like the above. If there is any variation of style and all, you will probably have to shift things around and play around with the CSS.
I want to stress that this is not the one and only way to do what you hope to achieve, but rather, that it is one of the many. What I've suggested is only an example that hopes to provide some insights on how you can utilize Custom Post templates for developing Wordpress based sites.
My advice at the end of the day is to delve deeper into Codex and find out more about Custom Post/Page templates because eventually, they will come in very handy if you choose to make custom Wordpress templates.
Hope my post had made things a little clearer for you =)
I'm trying to make my single.php page show more details about each project/item in a portfolio, with multiple larger image files that will display with captions to the right of the project description.
I'm thinking the best way to approach this would be to use the 'featured image' for the thumbnail display on the homepage which seems to be working now, but I've been trying to figure out Custom Fields to use for my other images (image1, image2, image3). I can't figure it out.
I go to "Enter new" under Custom Fields from the admin screen, enter image1 for the name. What goes in the Value field? How do I get it to work? I know I need to add some code to my single.php page... but what? And when/where do I upload the images themselves?
Any help would be greatly appreciated! I'm a little dense in the PHP department...
Have look at your single.php file. You will find the following lines, one near the top, the other lower down.
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
...
...
<?php endwhile; // end of the loop. ?>
Anything between these two lines will be applied over and over, once per blog post that happens to be displayed by that template file. So you should put your magic between those lines.
What you put there will be a mix of HTML and PHP. For instance, you might use this line:
<img src="<?php echo get_post_meta($post->ID, 'image1', true) ?>"/>
which combines
<img src=""/>
with
<?php echo get_post_meta($post->ID, 'image1', true) ?>
The PHP line looks up whatever value you have entered for the custom field named 'image1'. If you look at the HTML I used, you will see that this value is being placed inside the 'src' attribute. In other words, the value associated with 'image1' should be the url of that image.
You can expand upon this basic idea, but that's where your own creativity will have to come in.
[Is this not a repeated question?]
What's the best way to associate an image with a post in WordPress?
What I mean by that is when each post has a 'header' image which is not in the body of the post. You'd most likely use it to show a small image next to each post when they're listed somewhere.
I know you can use custom fields with posts, but are there any better ways of doing it?
Thanks in advance.
If you go the custom field route - in your template code you can save the value of the custom field to a variable and then echo it out to your image.
<?php $post_image = get_post_meta($post->ID, post_image, true); ?>
<?php if( $post_image != "" && isset($post_image) ) : ?>
<p><img src="<?php echo $post_image; ?>" alt="<?php echo $post_image; ?>" /></p>
<?php endif; ?>
<?php the_content('read more...'); ?>
The function the_content() may or may not be what you will end up using - for more control, you can try setting a new WP_Query() and then revamping the loop.
Not really any better way than custom fields, although you could always write out a unique class name containing the post ID on the container div and add the images via CSS each time you add a post. You'd end with a potentially huge CSS file though so I'd go for custom fields myself.
If you want a different image per post then use Customs Fields as suggested before - the only problem with that will be that Custom Fields are text fields and so you will have to upload your image and then paste the filename into your Custom Field. You could use the normal Add Image facility in the main post entry form but that will break up your workflow a bit as you will have to: upload the image in main post form, copy image url from HTML of form, remove image from form, paste URL into a custom field.
A bit of a pain!
If you want to use an image per category. Say, for example, you have a thumbnail for news items and a thumbnail for tutorials and so on. You could edit your WP theme template, check the category inside The Loop and show the relevant image from there.
The first option is a bit of a pain and the second requires some PHP coding.
A good way of associating an image with a post is to call the first image attached to that post in your template file.
I've elaborated a bit in this thread:
How would you recommend adding an image as a custom field in WordPress?