WordPress.org

Ready to get started?Download WordPress

Forums

Help integrating website with blog (19 posts)

  1. ksks
    Member
    Posted 4 years ago #

    So I have a website and I like it. I have a css stylesheet that I like as well, but I can't for the life of me figure out how to just place my new word press blog onto one of my pages and make it look just like everything else. I have quite a bit of html and css experience and very little php experience. I've visited the sites which try and explain how to seamlessly integrate both things, but it all seems like gibberish to me. Would anyone be willing to help me with my specific situation?

    What I do understand is that index.php references each of the other parts of the page which are stored in different documents (much like frames). My page is structured in divs, is there any possible way I can just paste the reference code inside the divs, so that my structure is kept? or am I going to have to figure out how to somehow recreate my current layout exactly into php form?

    Thanks!

  2. esmi
    Forum Moderator
    Posted 4 years ago #

  3. ksks
    Member
    Posted 4 years ago #

    Alright cool. So if I take an existing HTML page with my divs, add that code to the top and paste those codes inside the divs, and rename the file index.php everything will be good?

  4. esmi
    Forum Moderator
    Posted 4 years ago #

    Do you want to pull content from WP into your main site? Or do you want to make WP look like your site? If it's the former, use the info in the link above. If it's the latter, you'll need to build a custom theme or customise an existing theme.

    http://codex.wordpress.org/Theme_Development

  5. ksks
    Member
    Posted 4 years ago #

    I went to both of those websites before I posed this thread. If I knew which of these would work with what I want, or even how to begin trying them, I would've tried them already.

    Can anyone try to address my questions directly instead of just directing me to other tutorials? I explained my entire situation already hoping someone could tell me what I need to do. I obviously have no idea what I'm doing, so a little bit of patience would be awesome.

  6. esmi
    Forum Moderator
    Posted 4 years ago #

    It comes down to which of the two options you want to use. If you just want to pull a few posts onto your main site and, effectively, not provide public access to the blog itself, I'd suggest going for Option A: integrating WP into your site.

    If you want a complete blog available for public display via your main site, go for Option B - creating/customising a theme that matches your site.

  7. ksks
    Member
    Posted 4 years ago #

    Well I want the posts to show up in the body of my website, I want to give the visitors the ability to make comments on the posts, and I want my sidebar to the right so that they can navigate to older posts. I don't need a header or a footer. Should I use option A?

  8. esmi
    Forum Moderator
    Posted 4 years ago #

    I think, once you start getting into commenting, it might be easier in the long run if you use Option B.

  9. ksks
    Member
    Posted 4 years ago #

    Alright, so how would I begin transforming this skeleton layout into a theme? It's in html format, not php. This tutorial just assumes your file is in php format.

    <!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">
    <head>
    <link rel="Shortcut Icon" href="favicon.ico">
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    
    <title>
    kicksnarekicksnare.com - a melting pot.
    </title>
    </head>
    <body>
    
    <div id="wrapper">
    <div id="header"><a href="index.html"><img src="ksksbannerwhite.png" border="0"></a></div>
    <div id="links"><center>
    <a href="index.htm">music</a> //
    <a href="index.htm">film</a> //
    <a href="index.htm">art</a> //
    <a href="index.htm">photography</a> //
    <span class="current">blog</span> //
    <a href="index.htm">about</a>
    </center></div>
    <div id="maincontent">
    
    Here's where the posts would go.
    
    </div></div>
    </body>
    </html>
  10. esmi
    Forum Moderator
    Posted 4 years ago #

    Start by breaking down the HTML template into at least 4 distinct files:

    header.php - everything from <!DOCTYPE to <div id="header"><a href="index.html"><img src="ksksbannerwhite.png" border="0"></a></div>

    sidebar.php - everything from <div id="links"> to </center></div>

    index.php - <div id="maincontent"> to the first </div>

    footer.php - all the rest.

    Then read up on The Loop and wp_list_categories. You'll need to former to display your posts and the latter to generate your (currently hardcoded) nav links.

    Also research what you must include in header.php and footer.php.

  11. netviper
    Member
    Posted 4 years ago #

    I did the basic version which makes comments have to go to the blog site. Is there any way to keep this all in my site without having to link out to the wordpress site?

  12. ksks
    Member
    Posted 4 years ago #

    awesome. thank you so much esmi. except my images aren't showing up. Even after I made an "images" folder in my theme and referenced them.

  13. esmi
    Forum Moderator
    Posted 4 years ago #

    Don't use relative urls unless it's within CSS files. WP doesn't handle relative urls very well.

  14. ksks
    Member
    Posted 4 years ago #

    alright cool, well you knew I'd be back with a question. I want my nav links above the maincontent like they are, but I also want an actual sidebar with the archive and list of categrories and whatnot to the right. My sidebar.php file is already used with the nav links. What do I do??

  15. esmi
    Forum Moderator
    Posted 4 years ago #

    You can have as many sidebars as you want. If you call them names like sidebar-left.php or sidebar-two.php, you can use <?php get_sidebar('left');?> and/or <?php get_sidebar('two');?>.

  16. ksks
    Member
    Posted 4 years ago #

    awesome awesome awesome. alright. I think this may be the last question I have. For my sidebar-two.php, I just copied and pasted the contents of the "default" theme's sidebar.php. I was able to reclassify the headings (Archive, Categories..etc) so that I could manipulate the font, size etc with css. BUT I cant find the code where "Blogroll" is, so I cant manipulate it...I don't even understand how it even knows its there.

    here's the site: http://www.kicksnarekicksnare.com/blog

    <div id="sidebar">
    
    <ul>
    			<?php 	/* Widgetized sidebar, if you have the plugin installed. */
    					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
    
    <li>
    				<?php get_search_form(); ?>
    			</li>
    			<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
    
    <li><h2>Author</h2>
    			<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
    			</li>
    			-->
    
    			<?php if ( is_404() || is_category() || is_day() || is_month() ||
    						is_year() || is_search() || is_paged() ) {
    			?>
    <li>
    			<?php /* If this is a 404 page */ if (is_404()) { ?>
    			<?php /* If this is a category archive */ } elseif (is_category()) { ?>
    			<p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p>
    
    			<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
    			<p>You are currently browsing the <a>/"><?php echo bloginfo('name'); ?></a> blog archives
    			for the day <?php the_time('l, F jS, Y'); ?>.</p>
    
    			<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
    			<p>You are currently browsing the <a>/"><?php echo bloginfo('name'); ?></a> blog archives
    			for <?php the_time('F, Y'); ?>.</p>
    
    			<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
    			<p>You are currently browsing the <a>/"><?php echo bloginfo('name'); ?></a> blog archives
    			for the year <?php the_time('Y'); ?>.</p>
    
    			<?php /* If this is a monthly archive */ } elseif (is_search()) { ?>
    			<p>You have searched the <a>/"><?php echo bloginfo('name'); ?></a> blog archives
    			for <strong>'<?php the_search_query(); ?>'</strong>. If you are unable to find anything in these search results, you can try one of these links.</p>
    
    			<?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
    			<p>You are currently browsing the <a>/"><?php echo bloginfo('name'); ?></a> blog archives.</p>
    
    			<?php } ?>
    
    </li>
    		<?php }?>
    		</ul>
    		<ul role="navigation">
    
    <li><h3>Archives</h3>
    <ul>
    				<?php wp_get_archives('type=monthly'); ?>
    				</ul>
    </li>
    			<?php wp_list_categories('show_count=1&title_li=<h3>Categories</h3>'); ?>
    
    <ul>
    			<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
    				<?php wp_list_bookmarks(); ?>
    
    <li><h3>Meta</h3>
    <ul>
    					<?php wp_register(); ?>
    
    <li><?php wp_loginout(); ?></li>
    <li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
    <li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
    <li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
    					<?php wp_meta(); ?>
    				</ul>
    </li>
    			<?php } ?>
    
    			<?php endif; ?>
    		</ul>
    	</div>
  17. esmi
    Forum Moderator
    Posted 4 years ago #

    Please don't post huge chunks of code here. For larger blocks of code, use the WordPress pastebin. It makes life easier for everyone.

    The tag you're looking for is wp_list_bookmarks

  18. MichaelH
    Member
    Posted 4 years ago #

    Fabulous advice in this thread, esmi. Thank you.

  19. IAmMikeYoung
    Member
    Posted 4 years ago #

    I understand the concept of breaking down my existing XHTML site into several pieces (header, content, sidebar, footer), but I'm stumped about how to break up the code when there are several divs within divs. I'm using a drop shadow, then a wrapper, header, and a div for navigation within my header than contains rollover buttons. Can I keep all of that intact as a WordPress theme, or do I need to think about restructuring it a bit?

    To see an example of the structure in action: About

    <body onload="MM_preloadImages('images/blog_3.png','images/works_2.png','images/works_3.png','images/about_3.png','images/contact_2.png','images/contact_3.png','images/about_2.png')">
    <div id="shadow">
      <div id="wrapper">
        <div id="header">
          <div id="navigtion"><a href="about.html" target="_self" onmousedown="MM_swapImage('About','','images/about_3.png',1)" onmouseover="MM_swapImage('About','','images/about_2.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/about_1.png" alt="A gripping tale of mystery and intrigue!" name="About" width="100" height="40" border="0" id="About" /></a><a href="index.php" onmousedown="MM_swapImage('Blog','','images/blog_3.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/blog_2.png" alt="Some random thoughts." name="Blog" width="140" height="40" border="0" id="Blog" /></a><a href="works.html" target="_self" onmousedown="MM_swapImage('Works','','images/works_3.png',1)" onmouseover="MM_swapImage('Works','','images/works_2.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/works_1.png" alt="Some stuff I made." name="Works" width="160" height="40" border="0" id="Works" /></a><a href="#" target="_self" onmousedown="MM_swapImage('Contact','','images/contact_3.png',1)" onmouseup="MM_swapImage('Contact','','images/contact_2.png',1)" onmouseover="MM_swapImage('Contact','','images/contact_2.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/contact_1.png" alt="Contact me!" name="Contact" width="100" height="40" border="0" id="Contact" onclick="MM_openBrWindow('contact.html','Contact','width=660,height=240')" /></a></div>
        </div>
        <div></div>
      </div>
    </div>
    <div id="footer">© 2009 Michael Young | <a href="about.html">About</a> | <a href="index.php">Blog</a> | <a href="works.html">Works</a> | <a href="#" onclick="MM_openBrWindow('contact.html','Contact','width=660,height=240')">Contact</a> | <a href="images/MYoung_Resume.pdf" target="_blank">Résumé</a></div>

Topic Closed

This topic has been closed to new replies.

About this Topic