How do you put an image below nav & above content.

Resolved jaedenky77
(@jaedenky77)

14 years, 3 months ago

Hello, If anybody knows how to do this I would really appreciate it, I tried searching online but could’nt find an answer.

Basically I need to place a image into my wordpress theme. I would like to place it underneath my navigation and above my content with my sidebar to my right.

here is my site: http://www.onlinedatingclass.com

I’m guessing I would need to push the content down and insert an image into that space, the image will be roughly the same width as the content area.

I need it to appear only on the homepage too, and maybe have different images for other pages.

Any help with this would be appreciated, thanks in advance.

Viewing 14 replies - 1 through 14 (of 14 total)

henkholland
(@henkholland)

14 years, 3 months ago

Hi Jae,

First of all you need to read this:
http://codex.wordpress.org/Template_Hierarchy

Makes you understand, after comparing the info with the filenames of your theme, what template generates the Forntpage, the single post and the single page.

To start with the Homepage, find index.php and lok inside it for something like <?php wp_list_pages('title_li='); ?>

Right below that you can insert something like:
<a href="http://yoursite.com/wp-content/uploads/myfrontpagepicture.jpg"></a>

Last step (or maybe the first one): upload myfrontpagepicture.jpg through mediaupload from the Dashboard or with an ftp program.

Thread Starter jaedenky77
(@jaedenky77)

14 years, 3 months ago

Hey Henk,

Thanks for the reply but I couldn’t get it to work, There was no line of code like:<?php wp_list_pages('title_li='); ?>

the closest thing was this: `<h1>” href=”<?php the_permalink() ?>” rel=”bookmark”>
<?php the_title(); ?>`

I double checked everything to see if I made any sort of mistake with the code or where I put the pic. everything checks out.

btw here is the code I inserted: <a href="http://onlinedatingclass.com/wp-content/themes/modxblog/images/img06.jpg"></a>

Thread Starter jaedenky77
(@jaedenky77)

14 years, 3 months ago

actually there was a mistake in my last post, I placed the code you told me under this line in index.php:

<h1>” href=”<?php the_permalink() ?>” rel=”bookmark”>
<?php the_title(); ?>
henkholland
(@henkholland)

14 years, 3 months ago
Ok, the link to the jpg is good but the code is now in the postheader of each post; not where you want it. So take it out of there.
```
<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
```
Place it before the first one, so before <?php if (have_posts()) : ?>

so that it is outside the loop for the posts.
Thread Starter jaedenky77
(@jaedenky77)

14 years, 2 months ago

I put the code above the first one so now it looks like this:

<div id=”content”>

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class=”postwrap”>

it still doesn’t show up, I tried messing around with it a bit and the closest I could get was the actual text link show up if I put:

=”mysiteurl”>

but even that doesn’t link to the actual pic. Think the code may be in the right spot but maybe need different code, hmmm… not sure, any suggestions?

Thread Starter jaedenky77
(@jaedenky77)

14 years, 2 months ago

hmm. it’s weird every time I put some code in a post here it turns into a blue link and changes or doesn’t show up.

Michael
(@alchymyth)

14 years, 2 months ago

every time I put some code in a post here it turns into a blue link

please press the ‘code’ button above this edit window once before pasting code and then after the code. that will prevent your pasted code to be interpreted as html, and give it the bluegrey background.

or highlight the code you have already posted, and press ‘code’.

or you could use a ‘backtick’ before and after the posted code.

example:
with the code buttons:
<a href="#">linktest</a>
without the code buttons:
linktest
henkholland
(@henkholland)

14 years, 2 months ago
Ok, Jae, it is there. Now you need some css to place it properly.
Add a class to your link:
```
<div class="topimage">
     <a href="http://onlinedatingclass.com/wp-content/themes/modxblog/images/img06.jpg"></a>
</div>
```
An add this to your stylesheet:
```
.topimage
{
	margin: 0 0 0 8px;
}
```
Change the 8 to anything you like. Margins read: top, right, bottom, left
Thread Starter jaedenky77
(@jaedenky77)

14 years, 2 months ago

yeah, I did some fooling around with code and did some research, I used the <IMG SRC="mysite" instead of <a href

and to my surprise it worked and the pic showed up, now I have to center it, I’ll try to insert the code in your last post.

Thread Starter jaedenky77
(@jaedenky77)

14 years, 2 months ago

Yes! It worked! The image is now in the proper place and centered, I feel like I learned a lot from this little exercise about html. Thanks Henk for showing me how to do this.

I still got a lot to learn about html but it’s a start I guess.

henkholland
(@henkholland)

14 years, 2 months ago

Ok, glad I could help. And always take care when working on a live site. Backup first and keep a safe copy locally of the file (like index.php) that you are working on. For big changes a test setup is advisible.

whitesoxrule
(@whitesoxrule)

13 years, 9 months ago

Hi Jae & Henk…I’ve read this forum, but I can’t get mine to load up.
I have no header & I just want an image above my content

Here is my code..
<div class=”content”>
<div class=”topimage”>

</div>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class=”Post”>

I added the css to the style sheets, thank you in advance!

Jose B
(@linkaq)

13 years, 9 months ago

Hello!

I want to do something similar to what was described in the topic of this post. I want to put a gallery on the home page above all the posts. I’ve placed the code below before the <?php if (have_posts()) : ?>:

<div class=”my_gallery”><?php echo do_shortcode(“[flgallery id=10/ ]”); ?></div>

However, instead of my gallery appearing one time above the posts, it appears before each post. FML! Any ideas on how I can fix this? I really need to get this done and I will appreciate any help you dudes suggest. Thanks in advance.

Link

Jose B
(@linkaq)

13 years, 8 months ago

Nevermind, I had it right. All I had to do was log out and log in again.