Forums

WordPress › Support » Themes and Templates

Building Website template into/around WP theme (8 posts)

  1. Horizonz
    Member
    Posted 2 years ago #

    Alright, so.. I guess this is my first real post on the WP forums, since my first post seems to have bugged. :p I'm hoping the community here is strong and friendly! :)

    Basically, I'm trying to create a WordPress page that mimics my website's template. However, I've found a WP theme I'm already fairly fond of, and after having played with a little image editing software, I've found this WP theme goes REALLY well with my template. :) So now, being new to WordPress (and CSS/PHP), and only being familiar with HTML... I'm completely lost in the coding and have no idea how to proceed.

    Here are pictures of what I want...
    How my website looks now: http://i42.tinypic.com/2pyb4i1.png
    How my WordPress looks now:http://i42.tinypic.com/1054my9.png
    How I want my wordpress to look:http://i40.tinypic.com/1zd4vht.png

    I'll post any code you need, I'm just not sure what to post right now being new to WP and all and I don't want to spam the thread with code tags. I also have all of my site's code, which I assume will be needed for something like this. I'd use an iframe HTML tag on my site to do this, but I guess my host doesn't recommend it because 'it causes problems with their database-driven servers'. o.0

    I really hate to have to ask for so much help without being able to offer much in return... I'd hire someone to help me, but honestly I'm near-broke now and college is fast approaching. :/ Anything I can do to help this along or maybe help you in return... just let me know.

    Thanks a TON in advance! :)

  2. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    http://codex.wordpress.org/Theme_Development

  3. Horizonz
    Member
    Posted 2 years ago #

    Read the entire post/related posts, and looked up a little info on google. I have a very basic understanding of WP now, but I'm still having trouble understanding how I'd place the whole theme inside of a new header/sidebar. I just don't understand the php all that well.

    From what I do understand now.. I'll probably be adding to index.php and adding to the style sheets somehow.

    Could I place the majority of the php/java code inside of the content table area of my original website code? Would something like that work since my site is coded mainly in HTML (and uses some javascript/flash)?

    Any ideas/examples would be appreciated. :)

    Thanks again in advance!

  4. j-aperture
    Member
    Posted 2 years ago #

    I think the easiest way is to write a wrapper class in your original website scripts that wraps the entire wordpress into it. This way you'll have more flexibility in case you want to change the stuff getting displayed.

    Alternatively I think you can consider modifying header.php in your theme folder to integrate the top banner and index.php for your side panel. The header part is fairly straightforward but you might need a bit of tinkering for your side panel.

    << Website: http://maestroilluminist.com >>

  5. Horizonz
    Member
    Posted 2 years ago #

    Alright, thanks a lot Maestro. :) Any idea what kinda tags I'd be using? The problem with my website's header is the title is a small flash animation which might complicate things. I'd also like to keep the link bar there too, and have the rest of the blog content below the link bar. I don't mind leaving out the sidebar if it's gunna be too much of a hastle (though it'd be nice to keep it :p).

  6. Horizonz
    Member
    Posted 2 years ago #

    I think I may have accidentally deleted a bit of code in the header while I was trying to figure this out... Pixel theme (under popular)... anyone mind taking a look and telling me what I did? x.x

    <body>
<div id="wrapper">

<div id="header">

<h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<span><?php bloginfo('description'); ?></span>
</div>
<div id="topright">
<ul>
  <?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?>
  <li><a href="#searchform">search</a></li>
  <li><a href="#main">skip to content &darr;</a></li>
</ul>
</div>
<div class="cleared"></div>
</div> <!-- Closes header -->

<div id="catnav">
<div id="toprss"><a href="<?php bloginfo('rss2_url'); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/rss-trans.png" alt="<?php bloginfo('name'); ?>" width="65" height="24" /></a></div> <!-- Closes toprss -->
<ul id="nav">
  <li><a href="<?php echo get_option('home'); ?>">Home</a></li>
  <?php wp_list_categories('sort_column=name&title_li=&depth=2'); ?>
</ul>
</div> <!-- Closes catnav -->

<div class="cleared"></div>

    You can see the affect it had on the template here: moviesentinelblog.com :/

  7. Horizonz
    Member
    Posted 2 years ago #

    fixed problem with header.. (the edit button disappeared on me or I'd erase the above post). Gunna expiriment with this some more...

  8. j-aperture
    Member
    Posted 2 years ago #

    I would say create a new div element before the header div (name it something like top-banner). Integrate your flash/html code there. Then style it in style.css in your theme folder. I guess work on one thing at at time first would be a good idea :P

    << Website: http://maestroilluminist.com >>

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags