Wordpress and Webdesign Forum go41 » WordPress Code Snippets

Adding an extra heading to the Featured section

(9 posts) (2 voices)

Tags:

sharonp
Member

Hi Joern,

In a previous forum I had requested some help regarding adding an extra heading in the Featured section for the Arthemia free template. I would like it to look like the following:

Featured

Post...(with photo thumbnail)
Post...(with photo thumbnail)

Spotlight

Post...(with photo thumbnail)
Post...(with photo thumbnail)

You told me to do the following:

Take your featured.png from arthemia/images/ folder, inrease the canvas size from 17px height to 34px and add the text Spotlight under Featured. In index.pxp where featured.png is loaded (..images/featured.png" width="72px" height="17px") you just change height="17px" to height="34px"

However, I am still a little confused. I've been trying to figure it out for the past few days, but I'm still stumped. I want to keep the size of each heading the same as it is in the template. I'm just not sure exactly what I need to do to add the extra heading that I want to name "Spotlight"

Please could you tell me step by step what I need to do? You mention above to "add the text Spotlight under Featured" but I'm not a coder so I wasn't sure exactly where within the code I needed to add the text.

Sorry for all the questions, but I would really appreciate your help.

Thanks.
Sharon

Posted 1 year ago #
Joern
Moderator

hi Sharon, thanks for asking here..
what I explained you in the Arthemia forum was just how to change the Image (Featured)
But I guessed you would like to show under this featured title some posts of your featured category and following these posts you want to show a new title (image) and more posts of another category. So what I explained before you should just forget...

I will try to make a sample here: http://themes.go41.de/?wptheme=arthemia
might take a while (some hours), be patient.

If that looks like what you think about, I will post the code for you.

What I will do is:
leave the image Featured
change the number of posts to display below that from 4 to 2
put a new image Spotlight
use a new code to display 2 more posts from another category

have a nice day

EDIT: sample already working under the content slider, Spotlight image not so nice, which font do you use for your logo?

Posted 1 year ago #
sharonp
Member

Hi Joern,

Yes, your sample is EXACTLY what I'm looking to do. I would like the "Spotlight" heading to be the exact same font as the "Featured" font, just like you have in your sample. If you can give me the code on how to achieve this look, I would really appreciate it. I think my logo uses the Garamond font, but I would prefer to use the original font you have in the sample above.

thanks so much.
Sharon

Posted 1 year ago #

Sharon, to get the image 'Spotlight' you see in the sample, just right click it and save somewhere on your PC. It has to go as 'spotlight2.png' into the folder /arthemia/images/ in your site. There should also be featured.png and headline.png.
The font used for these images is called District Thin, here: http://www.philsfonts.com/freefont.html
I just thought all these 3 images looking like your titles font would be nice too.

The code I give you here goes into the template file index.php
MAKE A BACKUP FIRST OF YOUR FILE AS IT IS BEFORE EDITING!!
Now look for
<div id="featured"> and <div id="middle" class="clearfloat">
we are going to replace these two lines including all stuff in between.
After replacing you should just have once <div id="featured"> before and once
<div id="middle" class="clearfloat"> after the replacement. Difficult??

<div id="featured">
<!-- old code but display only two posts of Featured category showposts=2&category_name=Featured -->
	<img src="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/images/featured.png" width="72px" height="17px" alt="" />

	<?php query_posts("showposts=2&category_name=Featured"); $i = 1; ?>

      	<?php while (have_posts()) : the_post(); ?>
	<div class="clearfloat">
	<?php $values = get_post_custom_values("Image");
	if (isset($values[0])) { ?>
      <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
	<img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php
$values = get_post_custom_values("Image"); echo $values[0]; ?>&w=100&h=65&zc=1&q=100"
alt="<?php the_title(); ?>" class="left" width="100px" height="65px"  /></a>
      <?php } ?>
	<div class="info"><a href="<?php the_permalink() ?>" rel="bookmark" class="title"><?php the_title(); ?></a>
<div class="meta">[<?php the_time('j M Y') ?> | <?php comments_popup_link('No Comment', 'One Comment', '% Comments');?> | <?php if(function_exists('the_views')) { the_views(); } ?>]</div>	

</div>
    	</div>

      <?php endwhile; ?>

<!-- end of old code and start of new code to show one more 'title image' spotlight2.png and two posts of another category -->

	<img src="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/images/spotlight2.png" width="76px" height="19px" alt="" />

	<?php query_posts("showposts=2&category_name=Gallery"); $i = 1; // replace Gallery with the name of one of your categories ?>

      	<?php while (have_posts()) : the_post(); ?>
	<div class="clearfloat">
	<?php $values = get_post_custom_values("Image");
	if (isset($values[0])) { ?>
      <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
	<img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php
$values = get_post_custom_values("Image"); echo $values[0]; ?>&w=100&h=65&zc=1&q=100"
alt="<?php the_title(); ?>" class="left" width="100px" height="65px"  /></a>
      <?php } ?>
	<div class="info"><a href="<?php the_permalink() ?>" rel="bookmark" class="title"><?php the_title(); ?></a>
<div class="meta">[<?php the_time('j M Y') ?> | <?php comments_popup_link('No Comment', 'One Comment', '% Comments');?> | <?php if(function_exists('the_views')) { the_views(); } ?>]</div>	

</div>
    	</div>

      <?php endwhile; ?>

<!-- end of new code to show one more 'title image' and two posts of another category -->

	</div>

</div>	

	<div id="middle" class="clearfloat">

Now look at your page, you should see two posts of Featured category followed by the Spotlight image followed by two posts of your Gallery category.
Somewhere in this new code you find
showposts=2&category_name=Gallery
you can change Gallery to any other of your categories name.

Hope it works, exciting.. ;-)

Posted 1 year ago #

sharonp
Member

Thanks Joern. I'll give it a shot. Hopefully I won't mess things up :)

Posted 1 year ago #
sharonp
Member

Hi Joern,

Thanks! Your code worked perfectly :) You can see it here http://sharonpicone.com/

Posted 1 year ago #
Joern
Moderator

Fine, your spotlight image is even better than mine ..

What I recognize on your site is that you use quite big images in your footer, forcing them to display in smaller size. For performance reason it would be better to rescale them and upload in a size just fitting to the one you want to display.

Finally I would not use too many sub-categories with one post in it, except you plan to put more posts in each sub.

Better in my eyes would be to start to make use of tags and tag your posts, as visitors will easier find a post tagged with (single) keywords.

Your site will be great!

Posted 1 year ago #
sharonp
Member

Thank you Joern! :)

I have another question. The code you gave me for the Spotlight header works perfectly in Firefox and Safari, but when I test it in IE, the Featured and Spotlight posts now scrunch on top of each other http://sharonpicone.com/

Do you have any advice on how I can fix this problem please?

P.S. For the moment, I changed my site back to the original code, until I know how to fix it.

Sorry to be just a pain, but it seems that nothing can be easy in life. Just when you thought you've got something the way you want it, something else messes up :)

Posted 1 year ago #
Joern
Moderator

Sharon, I see you got it working with tables now.
I can't see any problem on my test site with the old code still in place. But I am using IE8. With Safari I and can choose IE6 or IE7 as user agent, but no changes - so no idea, sorry.

The other thing, about using big images and force them to display small - I would try to prevent! Your new Mesclun Salad with Mushrooms images is just a new sample for that. In Firefox and in Safari you can disable styles on viewing a site, thats why these big images really jump out

And did you ever validate your site here: http://validator.w3.org/ ?

Most of errors it shows are there because the theme is not using html code for '&', the timthumb lines should have & replaced by '& a m p ;' without the spaces (Even as code can't display it here)

And what is this tons of hidden links (hammertonail) in your code? did you insert this or did you get hacked? (<script type="text/javascript">
a = Array('c4v4', 'I', ' wid',.....)

Posted 1 year ago #

RSS feed for this topic

Jump to Latest Reply

Reply

You must log in to post.