Help Creating a Custom Theme

  • Resolved lsbyerley

    (@lsbyerley)


    12 years, 5 months ago

    Hey everyone. I’m new to wordpress, but not web development, and decided to begin creating my own custom theme. I already have the css and html coded out, and am now converting it to a wordpress theme. At the moment i have the following files in my theme directory folder: index.php, header.php, footer.php, sidebar-right.php, sidebar-left.php, page.php, comments.php, functions.php(which is blank), single.php, and style.css. When I live preview the site in wordpress admin, it looks fine. However, when I activate it, and load it in the browser, only the footer and some unformatted links show.

    Here is a link to how it looks when activated https://byerleywebdev.com/wordpress/

    And this is how it looks when viewed in Live Preview
    https://byerleywebdev.com/images/Capture.JPG

    Here is what my index.php file looks like.

    <?php get_header(); ?>

<div id="contentContainer">

		<?php get_sidebar('left'); ?>

		<div id="contentCenter">

			<div id="bodyCenter">

				<p>This site is dedicated to delivering content related to web design, sporting news, and information about Byerley Web Development. </p>

				<h4 id="contentTitle" style="width:260px;">Check out the stuff below</h4>
				<ul id="homePageList">
					<li>Helpful code snippets</li>
					<li>HTML/CSS, PHP, Javascript, Jquery, MySql</li>
					<li>HTML Color Codes</li>
					<li>Links to web design resources</li>
				</ul>

				<p>You will also find the latest sporting news related to the NFL, College Basketball, College Football, NBA, MLB, and East Tennessee State University Athletics</p>

				<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
				<div class="postBox">
		    		<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
		    		<?php the_content(); ?>
		    		<p><?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | <?php comments_number('No comment', '1 comment', '% comments'); ?></p>
		    		<?php endwhile; else: ?>
		    		<h2>Woops...</h2>
		    		<p>Sorry, no posts we're found.</p>
		    		<?php endif; ?>
		    		<p align="center"><?php posts_nav_link(); ?></p>
	    		</div>

			</div>

			<?php get_sidebar('right'); ?>

		</div>
		<div style="clear:both;"></div>

<!-- close contentContainer -->
</div>

<?php get_footer(); ?>

    I’d be glad to post what some of my other files look like. Can anyone point me in the right direction as to what im doing wrong? I would greatly appreciate it.

Viewing 13 replies - 1 through 13 (of 13 total)

  • Looking at the source code, you have your navigation bar ul commented out.
    You’ll need to edit somewhere around line 22 of your header.php file ??

    Thread Starter lsbyerley

    (@lsbyerley)

    I am aware of this ?? I was messing around with the calls to grab the menu items. Any ideas as to why the live version looks the way it does?

    Oh okay, I’m a bit confused – I take it how it looks in live preview is how you want it to look?

    Thread Starter lsbyerley

    (@lsbyerley)

    Yep, thats correct. The way it looks in preview is the way its supposed to look. However, when activated, the only thing showing up is the footer. The style.css is there, but for some reason nothing else is.

    Thread Starter lsbyerley

    (@lsbyerley)

    As you can see here

    What happens if you comment the ul back in? Currently it’s got li elements without a parent element which is invalid HTML and could be preventing most of the page from rendering.

    Thread Starter lsbyerley

    (@lsbyerley)

    Just did. Here is my header file now.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?> charset=<?php bloginfo('charset'); ?>" />
<link href="<?php bloginfo('stylesheet_url') ?>" rel="stylesheet" type="text/css" media="screen,projection"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"/>
<title><?php bloginfo('name');  wp_title(); ?></title>
<?php wp_head(); ?>
</head>

<body>

<div id="container">

	<div id="header">
		<div id="logo">
			<h1 id="pageLogo"><a href="#">Byerley Web Development</a></h1>
		</div>
		<div id="siteNav">
			<ul id="navLinks">
				<li><a href="#">About</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Contact</a></li>
				<?php //wp_list_pages('sort_column=menu_order&title_li='); ?>
				<?php //wp_nav_menu(array( 'menu' => 'mainnav', 'menu_class' => 'nav-bar-content', 'menu_id' => 'navLinks', 'container' => false, 'theme_location' => 'primary-menu', 'show_home' => '1')); ?>
			</ul>
		</div>
		<div style="clear:both;"></div>
	</div>

    Thread Starter lsbyerley

    (@lsbyerley)

    And here is the footer

    <div id="footer">

	<ul id="footerNav">
		<li><a href="index.php?page=about">About</a></li>
		<li><a href="index.php?page=portfolio">Portfolio</a></li>
		<li><a href="index.php?page=contact">Contact</a></li>
	</ul>
	<div style="clear:both;"></div>

	<div id="footerContent">
		<p id="copyright"><?php the_time('Y'); ?> Copyright ? Byerley Web Development</p>
		<div style="clear:both;"></div>
	</div>

</div>
<?php wp_footer(); ?>
</body>
</html>

    Hmm, try changing <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"/>
    to
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
    Not sure if this’ll make a difference or not, but I’m running out of ideas!

    Also, it’s not actually necessary to import jQuery as WordPress already has it. You need to enqueue it though.

    Thread Starter lsbyerley

    (@lsbyerley)

    Wow! that was it lol. Not sure why that was causing it to break. How do you include jquery enqueue

    Glad that fixed it, some versions of HTML don’t like that for some reason. I’m sure there’s lots of documentation on it though, if you wanted to find out.

    Ignore the bit about enqueuing it, I don’t think you need to – it’s already enqueued (hopefully someone will correct me if I’m wrong here). WordPress uses jQuery in no conflict mode though, which means you need to change any instances of “$” to “jQuery” in your scripts.

    It’s entirely up to you if you continue loading it as you are or not though.

    Thread Starter lsbyerley

    (@lsbyerley)

    Cool, thanks!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Help Creating a Custom Theme’ is closed to new replies.