Add static image to Homepage only

Here is the code you’re looking for:

<a href="https://www.spectaclip.com/shop/spectaclip/">
  <p class="buy-now">Buy It Today For Just $9.95!</p>
</a>

And in the css:

p.buy-now {
    background: url("images/buy-now.png") no-repeat scroll center top transparent !important;
    color: #FFFFFF;
    font-size: 25px;
    font-style: italic;
    font-weight: 900;
    height: 46px;
    line-height: 46px;
    margin-bottom: 10px !important;
    margin-left: 19px !important;
    overflow: hidden;
    text-align: center;
    width: 344px;
}

You will want to:

a) add a div before the first set of code I listed for your php file, and put your image code into it. Your code should look something like this:

<div class = "new-image">
   <img src = "imagelocation.jpg" />
</div>
<a href="https://www.spectaclip.com/shop/spectaclip/">
  <p class="buy-now">Buy It Today For Just $9.95!</p>
</a>

b) write the appropriate css to make the ‘new-image’ div float left and appear at the proper size.

c) edit the p.buy-now css to alter the hard width that’s coded into it so that both divs will fit side by side.

You’ll likely have to tinker with it for a bit to get them both to fit, but that’s the process. Check back if you have more questions!

The easiest way I’ve found to tell which template file a page is using is to add a comment to it. So at the top of the page-home.php add:

<!-- using page-home.php-->

You can insert it just before the opening <?php tag… then when you view your site and the source code for the home page, if you see that comment you’ll know it’s the correct template.

After you determined it’s the correct template, you can add straight html to it to get your image. Any css can be added to the style.css file. That’s probably the easiest thing for you to do, as long as you know you won’t be able to edit or change that image via the standard WordPress editing process. You’ll have to go edit that php file.

Thank you both very much! I will let you know how it goes when I get a few minutes to tinker with it!

Okay I need some further help with this. I have figured out how to insert within the php but I am having problems getting it where I want it. If I insert the image in the

<a href="https://www.spectaclip.com/shop/spectaclip/">
  <p class="buy-now">Buy It Today For Just $9.95!</p>
</a>

it is being positioned in the inside of the inner portion of the page. I would like for it to show on the right side of the “buy it now for $9.95” button in the scrolling images. I have tried multiple things as far as moving the reference for the image to other portions of the php and positioning the image with CSS but I am having no luck.

Apparently I am not as knowledgeable as I thought I was… : )

Thanks for your help.
Adam

A little update. I have tried using Firebug to help me a bit on placement but I think my main problem is I am not able to move the image in the CSS…at all. I can move it within Firebug, but when I reference offer in CSS it is not making the adjustments.

Here is where I am stuck:

<?php get_header(); ?>
<div id="wrapper"<?php if (is_front_page()): ?> class="home"<?php endif; ?>>
<?php slideshow_loop(1, 'home_slideshow.php'); ?>
<div id="hp-content">
<strong><div id="offer">
   <img src = "https://www.spectaclip.com/wp-content/uploads/2013/09/Buy-2-Get-1-Free.png" />
</div></strong>
  <div class="inner">
    <div id="video">
      <p class="video-title"><?php echo get_post_meta($post->ID, 'video title', true); ?></p>
	  <?php
		if (have_posts()): while (have_posts()): the_post();
		$content = get_post_meta($post->ID, 'video shortcode', true);
		$content = apply_filters('the_content', $content);
		$content = str_replace(']]>', ']]>', $content);
		_e($content);
		endwhile; endif; wp_reset_query();
	  ?>
      <a href="<?php bloginfo('url'); ?>/shop/spectaclip/"><p class="buy-now"><?php echo get_post_meta($post->ID, 'buy button text', true); ?></p></a>
      <p class="hp-para"><?php echo get_post_meta($post->ID, 'paragraph', true); ?></p>
    </div>
  </div>
  <?php slideshow_loop(1, 'home_slideshow.php'); ?>
  <div class="cf"></div>
</div>
</div>
<?php get_footer(); ?>

#offer {
	float: right;
}

Obviously not exactly what I want for CSS but thought I’d give you a reference to how I am calling it.

I also checked to make sure that header.php was pointing back to the style sheet. It is a bit weird though how when I pull it in Firebug there seems to be literally no CSS for the entire homepage.

Someone else built this thing and I jumped in half way, but now I”m all the way so looking for some help!

Thank you for your time in advance! : )
Adam

Hey Adam, is your site down? I can’t access it now to check out what you mean. If so, post here again when it’s back up and I’ll take a look.

Hi lettergrade,

It doesn’t seem to be down?? What error were or are you getting?

Thank you!
Adam

Plain old ‘can’t find the server at spectaclip.com’