WordPress.org

Ready to get started?Download WordPress

Forums

Help with Header and Sidebars please! (8 posts)

  1. mhsiao45
    Member
    Posted 6 years ago #

    Hi,
    I just installed WP onto my website. I'm very new to WP, and not very savvy with coding. Anyhow, I am trying to get my WP theme to look like this:
    http://site.barkslope.com/blog/

    Actually, I'd like to just have a custom header with my store's logo, and links back to my homepage and to the other products.
    So I downloaded this theme.
    http://themes.wordpress.net/testrun/

    All I would like to do is change the header of this theme to my store's logo, and change the link up top: 'Front Page', 'Archives' and 'About' to links back to my store.

    Can someone help me with editing the header of this theme?
    Also, how can you edit these themes in Dreamweaver? I tried to pull in the header.php file into dreamweaver and didn't see anything. I'm very inexperienced, so please help. Thanks so much!

  2. garryconn
    Member
    Posted 6 years ago #

    mhsiao45,

    These questions you ask come in time with experience. I would strongly recommend (if you are able to) installing a second copy of WordPress on your hosting account so that you can keep this as an experimental or "Sandbox" install. Something that you can freely play around with and log experience time into it.

    All the documentation on how to use WordPress has been provided for you. You have to invest the time into learning how to install, maintain and operate WordPress. Otherwise you will need to hire someone. There is no quick answer to these questions. You need to invest the time into learning. I am sorry.

    If you can invest one weekend.. I am talking two 8 hours days into reading this section:

    http://codex.wordpress.org/Main_Page

    You will take home a ton of knowledge and experience. WordPress is fun and the challenge of learning about the program will bring you even more enjoyment.

    [mod: this post has been caught by Akismet and released after the reply below has been posted]

  3. moshu
    Member
    Posted 6 years ago #

    1. That example site is not looking good in FireFox: the sidebar is displaced... I hoep you don't want your blog to look like that :)

    2. "...testrun" is NOT a valid link. Link to the theme's page not to the testrun site!

    3. Never open WordPress files in DW!
    No, you will not see them.

    4. If so inexperienced as you say, then you shouldn't try to modify a theme. (I never repair my car because I don't understand what is under the hood.)

  4. Dgold
    Member
    Posted 6 years ago #

    Can you link to the actual theme's page please? The above link went to the demo site, not unique to the theme you chose.

    If you're editing in DW you can only do it in "code mode" not the wysiwyg because DW doesn't understand the PHP and messes it up. Alternatively, try editing in Notepad or Notepad+++ or PSPad, or another text editor.

    The site you liked, is not too wild of a theme, you can get your site looking like that & make the changes you mentioned easily, just take it 1 thing at a time, search for the answer if you don't know, and ask here if you still don't know.

    hope this helps

  5. mhsiao45
    Member
    Posted 6 years ago #

    Dgold:
    Sorry about that link. Here is the one I'm talking about:
    http://themes.wordpress.net/columns/3-columns/4415/cutline-3-column-split-11/

    I wanted to download this one, and just replace that image in the header with my image. Then replace those anchor text links with my anchor text links or possibly add some more links across the top. And that would be all for now. The color and everything else would be fine.

    Can you help with this? Thanks!

  6. Dgold
    Member
    Posted 6 years ago #

    Well, for starters you can easily replace the header graphic by making your graphic the same size, give it the same filename, and upload it to the same folder (over-writing the existing graphic). This method is probably easier than going into the theme's code to change the filename.jpg, but if you read on I will show you where the code is anyway.

    From what I can tell on the demo, the header graphic is located in the theme's folder, at something like this path:
    yoursite.com/testrun/wp-content/themes/4415/images/header_1.jpg

    So just make your own header_1.jpg and put it there.

    Then, I noticed that theme has header_2 and _3 and _4 and _5 as well. I think #1 is for the homepage, #2 is used on category pages, #3 is on Single Post, or something like that. You can kind-of read it in the code, even if you don't understand all the code. So you need to do the method I suggested, but 5 times - depending if you want 5 different headers, or all pages to show the same header graphic (in that case either erase part of the code, or duplicate your graphic and rename it 5 times to match).

    Now let's look at that code. Both questions you ask, are in the header.php so open that file with a text editor, make changes, and upload the header.php overwriting the old one (Remember To Keep A Back Up Copy Before You Modify).

    The relevant code for the menu, and then the header graphics, is what I paste below. You should see where to replace the navigation links with whatever links you choose.

    <ul id="nav">
    		<li><a <?php if (is_home()) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>">front page</a></li>
    		<li><a <?php if (is_archive() || is_page('archives')) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/archives/">archives</a></li>
    		<li><a <?php if (is_page('about')) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/about/">about</a></li>
    		<li class="rss"><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>
    	</ul>
    
    	<div id="header_img">
    		<?php if (is_home()) { ?>
    		<img src="<?php bloginfo('template_url'); ?>/images/header_1.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 1" title="<?php bloginfo('name'); ?> header image 1" />
    		<?php } elseif (is_single()) { ?>
    		<img src="<?php bloginfo('template_url'); ?>/images/header_2.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 2" title="<?php bloginfo('name'); ?> header image 2" />
    		<?php } elseif (is_page()) { ?>
    		<img src="<?php bloginfo('template_url'); ?>/images/header_3.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 3" title="<?php bloginfo('name'); ?> header image 3" />
    		<?php } elseif (is_archive()) { ?>
    		<img src="<?php bloginfo('template_url'); ?>/images/header_4.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 4" title="<?php bloginfo('name'); ?> header image 4" />
    		<?php } else { ?>
    		<img src="<?php bloginfo('template_url'); ?>/images/header_5.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 5" title="<?php bloginfo('name'); ?> header image 5" />
    		<?php } ?>
    	</div>

    Bingo! What else?

    by the way I have never used this theme but that's what I would try.

  7. mhsiao45
    Member
    Posted 6 years ago #

    You're awesome. Great help! I'll give it a shot and let you know what happens. Have a great weekend

  8. mhsiao45
    Member
    Posted 6 years ago #

    dgold:
    I was able to modify my header. I changed the name of the links also at the top of the header. Now, I'm trying to point the links to the right area. Here is my blog:

    http://www.swankpets.com/blog/

    So for example, I just wanted to have 'SHOP NOW AT SWANKPETS' go to my homepage, http://www.swankpets.com

    I tried this code:

  9. shop now at swankpets
  10. But now it points to: http://www.swankpets.com/blog/www.swankpets.com

    So you can see that everything I place a link to will have this in front of it: http://www.swankpets.com/blog/whatever...

    Could you help in seeing where I can change the code so my links will appear correctly, without the prefix http://www.swankpets.com/blog whenever I need to.
    Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags