new013

Thanks rrbx!!! I am new to PHP (am taking an online course to try to get a better handle on it) so I really appreciate your suggestions. Being about to order the pages is something that I want to do for sure so I will play around with the above code and see what I come up with. Thanks again for your help!!

Thank you rxbbx for the solution!! Works perfectly for me!!

Hi lacigaleoulafourmi,

I’m happy to try to help although please note that I am very new to wordpress and PHP and thus can’t guarantee that this will be the correct way to do something!

I don’t think you’re supposed to post long chunks of code on this forum so I’ve linked to the pastebin for the code…

For my site, first I created a child theme. Then within created the “content-home.php” for my child theme with this code

and then for my “style.css” file in my child theme I used this code

There is more code on my style sheet to do other things (change the opacity and color of the text in the header etc.) that I removed so as not to confuse things but let me know if you need that as well.

I hope this helps! Let me know if there is anything else that you need.

In case anyone is following this thread…I posted a question similar to this (with the above code suggested earlier in this thread) on another forum and Andrew Nevins was kind enough to help me with a solution so I thought I would share it here in case other people have the same issue.

I still have to play around with it to see if I can get it to only display on hover but I am very happy to finally have something that’s working to show the title!

Here’s the link to the previous post.

Andrew, is there a better way to link this to the SPUN theme so that others can easily find this solution if they need it?

Thank You!!!!!!!!!!!!!!!! You are absolutely brilliant!! It works perfectly and is centred over the image! Thank you! Thank you!! I had spent days trying to sort this out! I can’t wait till I better understand PHP so that things like the span’s location will be more obvious to me!

Thank you again!

Thanks Andrew. That does seem to isolate the title but some of the previously working CSS is working on it now, I’ll take a look at firebug and see if something is being overwritten in CSS. It also makes the title get duplicated in the circles that already print the title (when there is no image). At this point though I’d be happy to add images to the ones that don’t have them if your span allows me to move the title over the images!!

Really though, thanks for taking the time to help me. I really appreciated it. I’ll play around and see if I can make it work.

I think that’s likely what I’m doing. Admittedly PHP is very new to me and I am working hard to learn it but I’m still very new. Can you look at the code below and see if I’ve put the span in the correct location/where it should go??

THank you for all of your responses Andrew I really do appreciate it!

<article id="post-<?php the_ID(); ?>" <?php post_class( $postclass ); ?>>
	<span class="hometitle"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php echo $thumb; ?><?php the_title(); ?></a></span>
</article><!-- #post-<?php the_ID(); ?> -->

Thanks Andrew!

I did wrap the a span in the section that they suggested be changed (content-home.php) to have the title always show….

<article id="post-<?php the_ID(); ?>" <?php post_class( $postclass ); ?>>
	<span class="hometitle"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php echo $thumb; ?><?php the_title(); ?></a></span>
</article><!-- #post-<?php the_ID(); ?> -->

and then I tried to use CSS to style it in using the class I added to the span

.hometitle a{
	color: red;
	display: table-cell;
	font-family: Baskerville, "Playfair Display", "Times New Roman", serif;
	font-size: 32px;
	font-size: 3.2rem;
	font-style: italic;
	text-align: center;
	vertical-align: middle;
	word-wrap: break-word;
	z-index: 1999;
}
}

which is based the styles that the theme uses to display the title in the circle when there isn’t an image with the post.

I’ve spent hours/days trying to get it to work and no matter what I try the title always appears in under the image….Am I missing something? Maybe I put the span in the wrong section?

Hi Andrew. Thanks for the quick response. I’m using a child theme

As for your last question

Lastly, how do I use pictures instead of word for circles if eventually I wanted to change it?

I’m very new to wordpress so this may not be the right way but for what worked for me is if you want an image to appear on the home page (inside the circle) rather then the title, just add a “featured image” (bottom right when you’re creating/editing the post in wordpress). That way the image will show up on the home page but does not seem to show up in the actual post. Does that do what you’re looking for?

Everyone can feel free to correct me if that’s not the right way to go about it but it worked for me so I thought I would answer in case it helped!

Also, if I delete

$thumb = '<span class="no-thumbnail">' . get_the_title() . '</span>';

as you suggested above then it changes the titles on the circles without images (one can’t be seen at all and another just shows part of it)…Am I missing something or perhaps once I get the span working I can position those titles the same way as the ones with images?

Thanks!

Thanks Caroline. I appreciate your help!! I’m sorry if this is rather basic but I’ve been playing with it for quite a while now and although I could isolate the title with a span & class i am still having trouble getting it to move where I want it (overlay on the image). I know you don’t provide CSS support but do you have any suggestions about where the best spot to put the span is? i.e. where in the code?

I’m working on learning PHP so I have a better understanding of these things! If was just HTML I would know how to do it but I get a little lost with the PHP ??

Thanks again for you help! I really do appreciate it!

Thanks Andrew! I appreciate your prompt reply. I have been using safari’s inspector to find selectors but maybe it’s not the best choice? I’ll download firebug right now but with Safari I can’t seem to find the right selector to use to target the titles…

Here’s the URL if you have a chance to take a look

Am I missing something? I will download firebug now though and maybe that will work better? Thanks for the suggestion.

Let me know if you think there is something I’m missing!!

Thanks again!! I really appreciate your help!

Thanks for this thread!! The code you provided works better for me then the other thread (before the titles were showing up in different areas, now they are all nicely tucked under the circle). I am excited to get styling them in CSS (already have a working child theme/style sheet) but as I am not familiar with PHP (I’m trying to learn though!) I’m not sure how to choose a selector from your code to use in the CSS to target the titles and style them? Do I need to add a class/id somewhere? Could someone please point me in the right direction??

Thank you to anyone who tries to help me ??

And thank you @caroline Moore for such a great theme! We started with plans to just use it for our blog and now want to redo our whole site with it!! It’s wonderful!