1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Anyone Know if This Edit Would be Easy to do to my Theme?

Discussion in 'WordPress' started by Altug, Oct 25, 2010.

  1. #1
    Hey guys,

    My site/blog is http://loseweightbuildmuscles.com (please spare me spam comments please) and my theme is magazine theme from studiopress (heavily modified)

    I've been going back and forth with this new theme forever it seems but right now I feel like there is no way for the users to see my latest posts above the fold. I could bring the featured box above the fold but then the information about my site goes further down.

    Would it be easy at all to add a narrow 3rd column on the far right that I could operate with widgets in wordpress? And also in the process obviously increasing the overall width of the site? I just want simple widgets like "recent posts" and "twitter/facebook" adds etc to make it more user friendly.

    Maybe this should be in the programming section but I've historically had some knowledgable people help me out with WP in this section so any advice would be really appreciated :)

    Thanks in advance

    Altug
     
    Altug, Oct 25, 2010 IP
  2. DawnBaby

    DawnBaby Peon

    Messages:
    105
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I do not understand the need to have the latest post above the fold, in the sidebar you could have recent posts listing the latest 4-5 posts, then update the theme with anchor points, google now includes anchor points in the search results and when someone click on the search result then it will taken them to the exact point where the keyword was.
     
    DawnBaby, Oct 25, 2010 IP
  3. zhoom

    zhoom Peon

    Messages:
    388
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Here is my suggestion... Make your header smaller. It is currently 205px..Make it 125px or similar. Then remove your searchbar div and put it at the bottom of the home page. I could be wrong, but I suspect that subscribing to posts/comments, searching or browsing categories are not your key calls to action. You need to save that prime real estate for your money makers!

    Then you have that extra 130px or so to add your recent posts, facebook etc (or even better, you key money making calls to action).

    But to directly answer your question, it would not be particularly easy to widen your whole site. It would be easier to make the current columns narrower and add another vertical column inside the current width.
     
    zhoom, Oct 25, 2010 IP
    Altug likes this.
  4. Altug

    Altug Active Member

    Messages:
    188
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    53
    #4
    Thanks for the suggestions!

    Zhoom, yes I did think my header was rather large. I will work on making it a little smaller. Also, I will try and add a narrow column inside the column. How would I go about this? Any decent tutorials out there? (I'll do a search on Google too but any suggestions are appreciated)

    Dawn baby, what are anchor points and how do I update my theme to have them?

    Thanks a lot for the help so far!
     
    Altug, Oct 26, 2010 IP
  5. zhoom

    zhoom Peon

    Messages:
    388
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #5
    No worries...

    You will need to learn how to float 3 divs beside each other. You will use the css property float: left or float: right. See w3schools page: http://www.w3schools.com/css/pr_class_float.asp.

    And here is a good explanation of floats for you: http://www.wipeout44.com/brain_food/css_staying_afloat.asp

    IN your case you have div id content left (floating left) and div id sidebar (floating right). You will need to create another div in between those two and float it left or right (doesn't really matter) and then position it using margin and padding.

    Anchor points are a way of creating a hyperlink that does not open a fresh page, rather it directs the user to a point on the same page. See here: http://www.webmastercourse.com/articles/anchors/#top

    Let me know if you have any questions.
     
    zhoom, Oct 26, 2010 IP
  6. Altug

    Altug Active Member

    Messages:
    188
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    53
    #6
    Thanks you've been a great help!

    Ohhh that's what anchor links are..I know what they are now :) I have them on some of my pages. It's cool I know how to use them.

    Just an quick question about the floating divs..so once I've done that, how will I have the recent posts show up in my new column? I imagine that there won't be a widget option in the WP CMS? Will I have to insert some code etc manually?
     
    Altug, Oct 26, 2010 IP
  7. sundaybrew

    sundaybrew Numerati

    Messages:
    7,294
    Likes Received:
    1,260
    Best Answers:
    0
    Trophy Points:
    560
    #7

    Yes, JUST EDIT:

    Sidebar.php and your theme functions.php to show a DUAL Sidebar..

    Here is a tutorial

    http://www.blogohblog.com/adding-extra-sidebar-to-your-wordpress-theme/

    Not my blog , but that guy gives a fast, easy and clear lesson.

    Its called a wordpress double dynamic sidebar, or you could always use a theme that came with two sidebars ;)

    http://wordpress.org/extend/themes/search.php?q=2+sidebars

    Hope this helps!!
     
    sundaybrew, Oct 26, 2010 IP
  8. Altug

    Altug Active Member

    Messages:
    188
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    53
    #8
    Yeah I hear you SundayBrew lol I was beggining to think that but I've spent so much money getting it modded and all sorts of other things done I feel like I better stick to the theme! I mean I like it apart from the innaccesability to my latest posts and offers. I guess before the updated template it was more like a "site"..now I want it to be like a hybrid site/blog with a bit more social activity going on :)

    Thanks a million for the tutorial I'm gonna check it out now! :)
     
    Altug, Oct 26, 2010 IP
  9. zhoom

    zhoom Peon

    Messages:
    388
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #9
    You're welcome!

    If you simply want to just show your most recent posts, you could use a Wordpress loop and the query posts function. Here is the official Wordpress codex page on query_posts: http://codex.wordpress.org/Function_Reference/query_posts.

    And you will need to figure out how the loop works: http://codex.wordpress.org/The_Loop

    But that will involve learning some php, which is not a bad idea if you are going to work with wordpress alot!

    But if you want to full flexibility of a widget ready sidebar, follow the tutorial below by sundaybrew. That explains it quite well.

    Good luck!
     
    zhoom, Oct 26, 2010 IP
  10. Altug

    Altug Active Member

    Messages:
    188
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    53
    #10
    Thanks again Zhoom.

    I did follow that tutorial below but something went wrong and instead of 2 sidebars I ended up with none lol. Then when I changed it back, I only got the 2nd sidebar I added...but I figured out how to restore it to it's original state.

    Looks like I'll just have to pay a programmer to sort it out for me. I think I actually just like the idea of making my header smaller and squeezing some more info in there.

    Yup, I think learning php will be helpful. I learnt html and css from scratch so php shouldn't be too bad.

    Thanks again all.
     
    Altug, Oct 27, 2010 IP
  11. zhoom

    zhoom Peon

    Messages:
    388
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Yes, I should have mentioned, make sure you back up everything before you start :)

    If you paste your code in I can have a look and see where you went wrong. We'll try and figure it out first.

    If it ends up getting to the point that you need to pay someone, I'd be happy to take on the project. My team works with php on a daily basis.
    ----------
    Edits..

    One possible reason you had no sidebars was to do with column widths...You have to ensure that your total widths for all columns plus margins and padding are less than the total width of the wrapping div. Otherwise they will drop below or overlap and look funky.
     
    Last edited: Oct 27, 2010
    zhoom, Oct 27, 2010 IP
  12. Altug

    Altug Active Member

    Messages:
    188
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    53
    #12
    Thanks Zhoom you've been super cool in helping me out. I think if I make a 2nd side bar without increasing the width then both sidebars will be too narrow.

    I actually like your idea of making the header smaller and leaving space for maybe 2 featured items underneath..kind of like the flexibility theme? Can't find a demo of it right now. closest thing is to click on the image found on this link http://www.flexsqueeze.com/weight-loss-niche-blog-v-2/

    That way I could have my call to action under the header and my recent posts can just go to the top widget of the right column.

    Wish I'd gone for the flexibility theme now!

    So If I make the header image 125ish like you suggested, where do I go from there? Do I just add another box underneath split into 2? (Would I use tables for that?). This way I could also put small social links on the top right hand side of the header too as that will just be unused green space.
     
    Altug, Oct 27, 2010 IP
  13. zhoom

    zhoom Peon

    Messages:
    388
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #13
    You will need to insert a new div in between your navbar and search bar divs. Here is a code outline for you.

    <div id="navbar"> 
    <!-- Current Navbar Stuff -->
    </div>
    
    <div id="newbar"> 
    <!-- This wraps your new content -->
            
             <div id="newbarleft"> 
             <!-- Left Newbar Stuff -->
             </div>
    
             <div id="newbarmiddle"> 
             <!-- Middle Newbar Stuff -->
             </div>
    
             <div id="newbarright"> 
             <!-- Right Newbar Stuff -->
             </div
    
    </div>
    
    </div>
    
    <div id="searchbar"> 
    <!-- Current SearchbarStuff -->
    </div>
    
    HTML:

    CSS
    #newbar {
    height: *set height*;
    width: *set width*;
    margin: 0 auto;
    padding: *adjust to suit*;
    other styles, background, border etc...
    }
    
    #newbarleft{
    float:left;
    height: *set height*;
    width: *set width*;
    margin: *set margin to position*;
    padding: *set padding to suit position*;
    other styles....
    }
    HTML:
    You will create css classes similar to #newbarleft for #newbarmiddle and #newbarright, ensuring that the total of the 3 width plus padding and margins are not wider that #newbar.

    The important thing is that you set float: left; (or float: right) for each of the newbarmiddle, let and right. This will position them next to each other similar as three columns.
     
    zhoom, Oct 27, 2010 IP
  14. Altug

    Altug Active Member

    Messages:
    188
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    53
    #14
    Awesome, I'm gonna give that a go once I sort my header out. Will let you know how it goes :)
     
    Altug, Oct 28, 2010 IP
  15. Altug

    Altug Active Member

    Messages:
    188
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    53
    #15
    Hey Zhoom, I had some problems but managed to figure a few of them out myself..like my header was still 205px in my CSS so it was showing in a tiled fashion..Fixed that though..I'm stumped now however.

    Take a look...do you remember those 3 tabs that were above my navbar? It had "home" "about" and "online supplements store" buttons...They seem to have dissapeared on me with my header getting smaller..Any idea where they've gone and how to get them back?

    Thanks for any advice as always :)

    Edit : Also if I can just add to that...I can't find any div codes that look like the ones you posted..I looked in both index.php and home.php....Is this code supposed to be in my files or am I adding these codes? I know I'm adding the "newbar" codes but cant find the other divs such as Nav, search etc.

    I should be fine with the CSS though

    Thanks again Zhoom appreciated
     
    Last edited: Oct 28, 2010
    Altug, Oct 28, 2010 IP
  16. zhoom

    zhoom Peon

    Messages:
    388
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #16
    No worries...:)

    To get the three tabs back find #topnav id in your css and change it's margin: -80px -40px;

    The negative margin will bring it back up. you can adjust the margin settings to get it positioned exactly where you want.. I wouldn't say this is the best way to do this but it should work for now and avoid restructuring the file. Make sure you test for cross browser compatibility.

    As for finding the divs, it's possible that those are in your header.php. As usual, create a backup of your header.php before you edit. In fact, I would download your whole theme as a backup.

    Note that adding something in your header.php will mean it appears on every page.
     
    zhoom, Oct 28, 2010 IP