WordPress.org

Ready to get started?Download WordPress

Forums

Codium Extended: Blog Title Image (15 posts)

  1. Luis
    Member
    Posted 2 years ago #

    I want to insert a logo at my blog title field while using Codium Extended 1.1.2 Theme version. Can you indicate how, for a person with a limited knowledge in coding, to do it please.

    The image is at: /wp-content/updates/2011/09/logo.jpg

  2. peredur
    Member
    Posted 2 years ago #

    OK. First off, you don't appear to have anything in your blog title and blog description fields. That's fine, I guess, but not so good for SEO.

    As for the logo, you just need to put the image into the header area. This is the HTML you have there at the moment:

    <div id="header">
    <div class="dp100">
    <h1 id="blog-title" class="blogtitle">
    <a title="" href="http://aeriport.mobi/"></a>
    </h1>
    <div class="description"> </div>
    </div>
    </div>
    </div>

    If you don't ever intend having a blog title displayed, it probably doesn't matter too much where you put your image, but I've have a go at doing something like this:

    <div id="header">
    <div class="dp100">
    <p id="logop"><!-- because it's xhtml and so must be in a p rather than a div -->
    <img src="path/to/image/mylogo.png" alt="" title="" />
    </p>
    <h1 id="blog-title" class="blogtitle">
    <a title="" href="http://aeriport.mobi/"></a>
    </h1>
    <div class="description"> </div>
    </div>
    </div>
    </div>

    Once you've done that, we can look at styling it so that it's in the right place and looking good.

    Cheers

    PAE

  3. Luis
    Member
    Posted 2 years ago #

    thanks for the info. If I want to do it in the Child Them I have just created to change of blog title (h2) - at the moment I only have syle.css file.

    > How do i do it?
    > Do I have to create a new file in my Child Theme Directory? If so, under which name

  4. peredur
    Member
    Posted 2 years ago #

    I take it you mean how do you add the logo to your header.

    Copy header.php from your parent theme into the child theme's directory. WP will then load that file instead of the parent theme's version. Since you've not made any changes, you should see none when you access your site - but check it, nonetheless.

    Now alter the child theme version of header.php to include the image.

    I would create a folder called images in your child theme's directory and put the image in there. You can then get hold of it like this:

    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/yourimage.png" alt="Your alt test" title="Your title" />

    (Where yourimage.png is the filename of the image you want to display).

    So put that code into header.php and let's see what it looks like. It'll probably take a bit of work to get it styled right, but it shouldn't be too hard.

    BTW, you may want to put an anchor around your image, pointing to the home page:

    <a href="<?php bloginfo('url') ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/yourimage.png" alt="Your alt test" title="Your title" /></a>

    If you meant how do you add the site title and description, you should be outputting whatever has been configured as the title/description in your Dashboard settings. The fact that it isn't suggests you've not got anything in your settings.

    Cheers

    PAE

  5. Luis
    Member
    Posted 2 years ago #

    Hi Peter,

    I have tried to follow your instructions:

    1) create a folder at Child Theme with "images" folder
    2) Insert in the folder the logo file "logo.jpg"
    3) To copy the "header.php" file into the Child Theme folder
    4) To change the code as follows

    <div id="header">
    		<div class="dp100">
    			<p id="logop"><!-- because it's xhtml and so must be in a p rather than a div -->
    			<img src="path/to/images/logo.jpg" alt="" title="" /></p>
    			<h1 id="blog-title" class="blogtitle">
    			<a title="" href="http://aeriport.mobi/"></a></h1>
    			<div class="description"> </div>
    		</div><!-- dp100 -->

    The results appear in general OK, except that I cannot se the logo. You might want to have a look at the outcome at http://www.aeriport.mobi

    Cheers.

  6. peredur
    Member
    Posted 2 years ago #

    You copied this verbatim:

    <img src="path/to/images/logo.jpg" alt="" title="" />

    Read my previous post again, concerning how to obtain the path to the image.

    Cheers

    PAE

  7. Luis
    Member
    Posted 2 years ago #

    Sorry! I change to this, but still does not work properly

    <div id="header">
    		<div class="dp100">
    			<p id="logop"><!-- because it's xhtml and so must be in a p rather than a div -->
    			<img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.jpg" alt="Your alt test" title="Your title" />
    			</p>
    			<h1 id="blog-title" class="blogtitle">
    			<a title="" href="http://aeriport.mobi/"></a></h1>
    			<div class="description"> </div>
  8. peredur
    Member
    Posted 2 years ago #

    Hmm. I'm doing something wrong.

    It's giving the src as http://aeriport.mobi/ whereas we want:

    http://aeriport.mobi/wp-content/themes/your-theme-name/images/logo.jpg

    (where 'your-theme-name' is the name of the directory in which your theme resides)

    Actually, did you do as I suggested and put your image in a sub-folder of your theme's directory?

    If you did, you could try hard-coding the <img> element:

    <img src="http://aeriport.mobi/wp-content/themes/your-theme-name/images/logo.jpg" alt="Your alt test" title="Your title" />

    Remember to put the proper value in for 'your-theme-name'

    Cheers

    PAE

  9. Luis
    Member
    Posted 2 years ago #

    Hi, it is getting to complicated with my with the coding, as I know very litter about coding. To summarise the status:

    1) I use Code-Exntend Theme and I have created a Child Theme to avoid changing the code of the orginal theme. At the moment I have activated back Code-extend as the child did not work with the logo.

    2) I have created a folder called:
    Code-Extend-Child
    3) I have created a folder inside 2) called:
    Images
    4) I have inserted an image file called:
    logo.jpg

    > What is the code I should write in the header.php file to insert in the Code-Extend-Child folder? I include the full content.

    `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes() ?>>
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="content-type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
    <meta name="viewport" content="width=device-width" />
    <title><?php bloginfo('name'); wp_title();?></title>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url') ?>" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    <?php wp_head() ?>

    </head>

    <body <?php body_class(); ?>>

    <div id="wrapperpub">
    <div id="header">
    <div class="dp100">
    <h1 id="blog-title" class="blogtitle">" title="<?php bloginfo('name') ?>"><?php bloginfo('name') ?></h1>
    <div class="description"><?php bloginfo('description'); ?> </div>
    </div><!-- dp100 -->
    </div><!-- #header -->
    </div><!-- #wrapperpub -->
    <div class="clear"></div>
    <div id="wrapper">
    <div id="access">
    <?php wp_nav_menu(array( 'container_class' => 'menu-header', 'theme_location' => 'primary-menu',)); ?>
    </div><!-- #access -->
    <div class="clear"></div>

    >> Could you include the above code with the changes to change the heading of the blog with the logo.jpg image please?

  10. peredur
    Member
    Posted 2 years ago #

    First of all just put an <img> element into header.php at the point where you want the image to appear. Give it the width and height attributes for the size you want. Just put src="" for the moment, or use a url to an external image of about the right size that you happen to know of (e.g. http://www.wales-legislation.org.uk/images/logo.gif) - if you just want something small for now.

    Then post that you've done it and I'll have a look at your outptu (you don't need to post it).

    Cheers

    PAE

  11. Luis
    Member
    Posted 2 years ago #

    Sorry if I am asking too much, but would you be able to change the code of the above header.php file I include as to point to the logo file? My coding skills are nuls... If you write, so I can do a copy paste would help a lot. Thank you for your patience.

  12. peredur
    Member
    Posted 2 years ago #

    No. I'm sorry. I can't change your header.php file without access to your site. I can look at its output, but I can't change it.

    Also, I'd be doing work for you and that's not what this forum is about. It's about giving advice and (sometimes) instruction. If I was doing work for you, it would be a commercial contract.

    If you really do not have HTML/CSS/PHP skills, you should probably stick to an unmodified theme that's as near to what you want as you can get. Or learn the skills, of course. I'm all for that.

    Another choice would be to host your site at wordpress.com where you can pay for premium add-ons that include customisation.

    Sorry I can't be of more help.

    I just reviewed your posts above, BTW, and notice that you talked about creating a child theme folder Child Theme. If you really did call it "Child Theme" you need to alter that. Spaces in file and directory names are a really bad idea. I'd stick to lower case letters, too.

    We can fix this, but you'll need some patience and persistence because you'll be learning the necessary skills along the way.

    One thing I suspect from the review above is that you may not have activated your child theme. I'd start off, therefore, by:

    • Activating the parent theme again (this will deactivate your child theme)
    • making the changes to any directory names as I suggest above, and then making the necessary changes to reflect that in your child theme's style.css file
    • Reactivating your minimal child theme

    Once you've done that, we can look at things again. But we're going to have to take things slowly. Rome wasn't built in a day.

    Cheers

    PAE

    Cheers

    PAE

  13. Luis
    Member
    Posted 2 years ago #

    Hi Peter,

    Thanks again for the information. I will try to build Rome, step by step then, you right. Following your recommendations:

    1) I wrote my folder and file names in small letters and without spaces
    2) I have reactivated the child them (only with a simple h2 size instruction)
    3) I have inserted the logo, but using a different approach

    I have inserted the logo in the header image. However, the size was to big and I have reduced the heigh at the theme functions.php file. I saw the instructions in a forum

    Then, I would only miss one point to keep your recomendations, of keeping changes in the child envioronment. That is to have a functions.php file in the child directory.

    Which instructions the functions.php file located in the child directory should contain? I tried the following, but I got an error.

    // gets included in the site header
    function header_style() {
        if (get_header_image() != ''){
        ?><style type="text/css">
            div#header {
                background: url(<?php header_image(); ?>); height :105px; -moz-border-radius-topleft:6px;border-top-left-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;
            }
            <?php if ( 'blank' == get_header_textcolor() ) { ?>
    		h1.blogtitle,.description { display: none; }
    		<?php } else { ?>
    		h1.blogtitle a,.description { color:#<?php header_textcolor() ?>; }
        	<?php
    		} ?>
    		</style><?php
    		}
    	}

    `

  14. peredur
    Member
    Posted 2 years ago #

    OK. Just to be clear. You simply want to know how to create your own functions.php file in your child theme, and what code to put in there?

    To create a functions.php file just create a file called functions.php in your child theme folder. That's it.

    To add code to it, just edit the file.

    As to what code you should add, I'm not sure any more exactly what you're trying to do, so can you tell me that and I'll see what I can do.

    Cheers

    PAE

  15. peredur
    Member
    Posted 2 years ago #

    Ah! Sorry. I misread your post above.

    All you need to do after you've created your functions.php file in your child theme is this:

    • Make sure your parent theme's function is wrapped in the PHP function function_exists
    • Copy your new version of functions.php from your parent theme to your child theme
    • Put your parent theme version of function.php back like it was

    If your parent theme's version of the function is not surrounded by a function_exists() call, your theme does not really support child themes (i.e. it was probably written for an old version of WP). In this case, I would, temporarily, put the code in there and then contact the theme designers asking them to do the same.

    If all else fails, I would copy the parent theme into a brand new theme and add the calls myself, making your child theme a child of the brand new theme instead of the out-of-date original one. This is assuming that the original one is licensed under the GPL, of course.

    HTH

    PAE

Topic Closed

This topic has been closed to new replies.

About this Topic