WordPress.org

Ready to get started?Download WordPress

Forums

Add image to a page title (8 posts)

  1. CBlum
    Member
    Posted 7 months ago #

    Hello,

    I'm using Theme Horse Attitude Pro and recently have created a child theme to modify a few things. On my website http://www.lowcountryreds.com, under the "Blog" section, I would like to add images to the titles. Personally, I would like to learn how to have just an image for a title and also how to have an image and title together formatted that the image is on the left and title is centered.

    Here's where I'm at now. Under the my Child Theme, Appearance, & Editor I have three options I've copied from the parent (functions.php, page.php and Styls.css). Using the support forum on my theme, I've added the code to my functions.php:

    if ( ! function_exists( 'attitude_theloop_for_page' ) ) :
    /**
     * Fuction to show the page content.
     */
    function attitude_theloop_for_page() {
    	global $post;
    	$meta = get_post_meta($post->ID, 'attitude_title_hide', true );
    
    	if( have_posts() ) {
    		while( have_posts() ) {
    			the_post();
    
    			do_action( 'attitude_before_post' );
    ?>
    	<section id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    		<article>
    
    			<?php do_action( 'attitude_before_post_header' ); ?>
    
    			<?php
    			if( 'on' != $meta ) {
    				?>
    				<header class="entry-header">
    	    			<h2 class="entry-title">
    	    				<?php the_title(); ?>
    	    			</h2><!-- .entry-title -->
    	  			</header>
      				<?php
    			}
    			?>	
    
      			<?php do_action( 'attitude_after_post_header' ); ?>
    
      			<?php do_action( 'attitude_before_post_content' ); ?>
    
      			<div class="entry-content clearfix">
        			<?php the_content(); ?>
        			<?php
        				wp_link_pages( array(
    						'before'            => '<div style="clear: both;"></div><div class="pagination clearfix">'.__( 'Pages:', 'attitude' ),
    						'after'             => '</div>',
    						'link_before'       => '<span>',
    						'link_after'        => '</span>',
    						'pagelink'          => '%',
    						'echo'              => 1
                   ) );
        			?>
      			</div>
    
      			<?php 
    
      			do_action( 'attitude_after_post_content' );
    
      			do_action( 'attitude_before_comments_template' ); 
    
             comments_template(); 
    
             do_action ( 'attitude_after_comments_template' );
    
             ?>
    
    		</article>
    	</section>
    <?php
    			do_action( 'attitude_after_post' );
    
    		}
    	}
    	else {
    		?>
    		<h1 class="entry-title"><?php _e( 'No Posts Found.', 'attitude' ); ?></h1>
          <?php
       }
    }
    endif;

    Being new to wordpress and website design, I'm not sure where I import the image url. I learn best by looking at the before code and after code so we can use the http://www.lowcountryreds.com/skunked/ page and the image http://www.lowcountryreds.com/wp-content/uploads/2013/12/Skunked.png

    How do I add the image to the title "skunked?"

    Thanks for your help, sorry if this question is far fetched.

  2. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    Have you asked the developers? They should be providing support for a Pro version - these forums don't support commercial versions.

  3. CBlum
    Member
    Posted 7 months ago #

    I have ask but they are stopping at that point. They said I should hire someone to help me.

  4. esmi
    Forum Moderator
    Posted 7 months ago #

    That seems reasonable. Have you tried http://jobs.wordpress.net/ ?

  5. CBlum
    Member
    Posted 7 months ago #

    I didn't know about that, I'll look into it. Thank you for the help, I didn't realize that adding the image is such daunting task.

  6. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    In that case, you could post a job listing here:

    http://jobs.wordpress.net/

    Or you could likely more easily add the image using CSS - as a background image on this element:

    .entry-header {
    }
  7. Sandeep
    Member
    Posted 7 months ago #

    Either use css to apply backgrounds or your add_filter on the title.

    http://codex.wordpress.org/Plugin_API/Filter_Reference/the_title

    Define a function to hook to the title content before rendering, modify the title to add your <img> to it.

    If you want this configurable, you can define a meta box, save it as meta content of the post, retrieve and use it in the filter.

  8. CBlum
    Member
    Posted 7 months ago #

    Thanks sandyr, I'm quickly finding that this task is over my head. I understand what your saying, however, I don't know how to do it.

Reply

You must log in to post.

About this Topic

Tags

No tags yet.