New Topic/Question
Reply
I'm having some issues with a custom theme displaying in WordPress. I'm converting ---->> this <<---- HTML template page into a WordPress 3.1 blog theme so the WP-Blog looks like the site when you click on the blog link.
Click here for the blog with the theme activated for debugging.
My problem is when I activate (or even preview) the theme, all I get is blank white, nothing loads. All my assets are in separate folders (css, js, images, etc...) and I don't have any styles in the style.css theme folder except for Theme info and @import of the css styles required by the HTML.
I'm unsure to just post all the code here for each page (index.php, footer.php, header.php, sidebar.php) along with the style.css.. it will be a bit long all together, or just attach a .zip with all the theme files, so I'll do both.
CSS
Here is my style.css for the WP theme:
/*
Theme Name: MCS Multimedia WordPress Theme
Theme URI: http://www.virtuallycreative.ca/
Description: The 2011 theme for Mark C. Shaw Multimeida is stylish, customizable, simple, and readable. MCS Theme supports widgetized areas.
Author: Vip3rousmango
Version: 1.0
Tags: black, blue, multimedia, site-switcher
*/
@import url("<?php bloginfo('stylesheet_url'); ?>css/style.css");
@import url("<?php bloginfo('stylesheet_url'); ?>css/slider.css");
@import url("<?php bloginfo('stylesheet_url'); ?>css/skins/sky-blue.css");
@import url("<?php bloginfo('stylesheet_url'); ?>css/s/switcher.css");
@import url("<?php bloginfo('stylesheet_url'); ?>css/ie.css");
HTML
I'll put all the files in order of a WP theme (header, index, sidebar, footer) for ease of viewing:
header.php
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- charset -->
<meta charset="UTF-8">
<!-- Title, description and keywords -->
<title>Mark C. Shaw | <?php bloginfo('name'); ?></title>
<meta name="description" content="A premium (X)HTML & CSS template designed and developed by TahaH Studio">
<meta name="keywords" content="xero, XHTM, CSS, Template, Professional, Mulicolour, TahaH, Themeforest">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>css/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>css/slider.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>css/skins/sky-blue.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>css/s/switcher.css" media="screen" />
<!--
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>css/skins/blue.css" media="screen">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>ss/skins/red.css" media="screen">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>css/skins/purple.css" media="screen">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>css/skins/green.css" media="screen">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>css/skins/orange.css" media="screen">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>css/skins/yellow.css" media="screen">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>css/skins/cream.css" media="screen">
-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>css/ie.css" media="all">
<![endif]-->
<!-- RSS Feed -->
<link rel"alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'): ?>" />
<!-- Javascripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.superfish.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/xero.forms.js"></script>
<script type="text/javascript" src="js/xero.js"></script>
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
<div id="header_container">
<div id="header">
<span id="logo" class="switcher">
<a href="http://www.markcshaw.com/index.html" title="Multilogo"><img src="<?php bloginfo('url'); ?>images/i/multi.png" width="165" height="37" alt="Multimedia Logo"></a>
<a class="switchbutton" href="#">switchbutton</a>
<ul class="dropdown">
<!--<li><a href="http://markcshaw.com" title="Multimedia"><img src="images/i/multi.png" width="165" height="37" alt="multi"></a></li> -->
<li><a href="http://photo.markcshaw.com" title="Photography"><img src="<?php bloginfo('url'); ?>images/i/photo.png" width="165" height="37" alt="photo"></a></li>
<li><a href="http://illustration.markcshaw.com" title="Illustration"><img src="<?php bloginfo('url'); ?>images/i/illustration.png" width="165" height="37" alt="drawn"></a></li>
<li><a href="http://audio.markcshaw.com" title="Audio Editing"><img src="<?php bloginfo('url'); ?>images/i/audio.png" width="165" height="37" alt="audio"></a></li>
<li><a href="http://video.markcshaw.com" title="Video Editing"><img src="<?php bloginfo('url'); ?>images/i/video.png" width="165" height="37" alt="video"></a></li>
<li><a href="http://print.markcshaw.com" title="Print Design"><img src="<?php bloginfo('url'); ?>images/i/print.png" width="165" height="37" alt="print"></a></li>
<li><a href="http://web.markcshaw.com" title="Web Design"><img src="<?php bloginfo('url'); ?>images/i/web.png" width="165" height="37" alt="web"></a></li>
</ul>
</span><!-- end logo -->
<ul id="nav">
<li><a href="index.html" class="current"><span>Home</span></a></li>
<li><a href="about.html"><span>About Us</span></a></li>
<li><a href="#"><span>Portfolio</span></a>
<ul class="subnav">
<li><a href="viewall.html">View All</a></li>
<li><a href="#">Sections</a>
<ul class="subnav">
<li><a href="#">Photography</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Audio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Web</a></li>
</ul>
<!-- end 2nd sub navigation -->
</li>
<li><a href="#">Artists</a>
<ul class="subnav">
<li><a href="#">Photography</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Audio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Web</a></li>
</ul>
<!-- end 3nd sub navigation -->
</li>
</ul>
<!-- end sub navigation -->
</li>
<li><a href="<?php bloginfo('url'); ?>"><span>Blog</span></a>
<ul class="subnav">
<li><a href="blog.html">Pages</a></li>
<ul class="subnav">
<?php wp_list_pages('depth=1&title_li='); ?>
</ul>
<!-- end sub navigation -->
<li><a href="single-post.html">Post Archives</a></li>
</ul>
<!-- end sub navigation -->
</li>
<li><a href="#"><span>Services</span></a>
<ul class="subnav">
<li><a href="http://photo.markcshaw.com">Photography</a></li>
<li><a href="http://illustration.markcshaw.com">Illustration</a></li>
<li><a href="http://audio.markcshaw.com">Audio</a></li>
<li><a href="http://video.markcshaw.com">Video</a></li>
<li><a href="http://print.markcshaw.com">Print</a></li>
<li><a href="http://web.markcshaw.com">Web</a></li>
</ul>
<!-- end sub navigation -->
</li>
<li><a href="contact.php"><span>Contact</span></a></li>
</ul>
<!-- end main navigation -->
<div class="clear"></div>
<!-- clears floted logo & nav -->
<div id="page_title">
<ul class="breadcrumb_nav">
<li><a href="<?php bloginfo('url'); ?>">Home</a></li>
</ul>
<h1>Blog</h1>
</div>
</div>
<!-- end header (940px width) -->
</div>
<!-- end header container (100% width) -->
index.php
<?php get_header(): ?>
<div id="body_content">
<div id="content" class="has_sidebar left">
<!-- The Loop -->
<?php while(have_posts()) :the_post(); ?>
<div class="post">
<a href="<?php the_permalink(); ?>" class="post_thumb read_more">
<img src="<?php bloginfo('url'); ?>images/post_thumb.jpg" alt="">
</a>
<!-- end post image -->
<div class="post_content">
<h2 class="post_title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<!-- end post title -->
<div class="post_info">
<ul class="post_cats">
<li><a href="#"><?php the_category(','); ?></a> /</li>
</ul>
<p>Posted on <?php the_time('F dS Y'); ?> by <?php the_author(); ?></p>
<span class="comment_count"><?php comments_number('0', '1', '%'); ?> </span><!-- comment count -->
</div>
<!-- end post info -->
<p class="post_brief"><?php the_content(); ?></p>
<!-- end post excerpt -->
<a href="<?php the_permalink(); ?>" class="post_read_more">(Read More)</a> </div>
<!-- end post content -->
</div>
<!-- end post -->
<?php endwhile; ?>
<!-- End The Loop -->
<ul class="pagination">
<li><a href="#" class="large_button">« Previous</a></li>
<li><a href="#" class="large_button current">1</a></li>
<li><a href="#" class="large_button">2</a></li>
<li><a href="#" class="large_button">3</a></li>
<li><a href="#" class="large_button">4</a></li>
<li><a href="#" class="large_button">5</a></li>
<li><a href="#" class="large_button">Next »</a></li>
</ul>
</div>
<!-- end content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
sidebar.php
<div id="sidebar" class="right">
<form action="<?php bloginfo('url'); ?>" id="search_widget">
<label for="search_field" class="auto_clear">Search...</label>
<!-- end auto clear label -->
<input type="text" name="search_field" id="search_field">
<!-- end search field -->
<input type="submit" name="search_submit" id="search_submit" value="">
<!-- end search submit -->
</form>
<!-- end search form -->
<div class="inline_content_widget">
<h3 class="widget_title">
Text Widget
</h3>
<!-- end widget title -->
<div class="widget_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac scelerisque nisi. Maecenas auctor tellus semper leo viverra ultricies. Vestibulum vel turpis non enim vulputate gravida at id urna. Proin eu fringilla nulla. Morbi rhoncus pellentesque elit eget dictum. Proin vestibulum iaculis pulvinar. Nam rhoncus velit quis elit sollicitudin tempus iaculis justo vestibulum. Aenean gravida mollis nisl ac posuere. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc feugiat fringilla metus.
</div>
<!-- end widget content -->
</div>
<!-- end widget -->
<div class="tabbed_widget">
<ul class="widget_tabs">
<li><a href="#tab1"><span>Inline Content</span></a></li>
<li><a href="#tab2"><span>Categories</span></a></li>
</ul>
<!-- end tabs heads -->
<div class="widget_tabs_content">
<div class="tab_content">
<h3>Just a Title</h3>
<img src="<?php bloginfo('url'); ?>images/content_widget.jpg" width="126" class="alignright" alt=""> Quisque sapien odio, malesuada vel hendrerit in, pellentesque vitae erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi elementum vulputate porttitor. Fusce sed metus in nisi facilisis malesuada. Curabitur volutpat hendrerit enim, eget rutrum massa semper in. Sed tristique, augue sit amet aliquam pharetra.
</div>
<!-- end tab 1 content -->
<div class="tab_content">
<h3>Categories</h3>
<ul>
<li><a href="#">Web design</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">Some category</a></li>
<li><a href="#">Another one</a></li>
<li><a href="#">Final one</a></li>
</ul>
</div>
<!-- end tab 2 content -->
</div>
<!-- end tabs content -->
</div>
<!-- end widget -->
</div>
<!-- end sidebar -->
footer.php
</div>
<!-- end body content -->
<div id="footer_container">
<div id="footer">
<ul class="copyright_info reset_style">
<li><img src="<?php bloginfo('url'); ?>images/i/multi.png" alt="" id="footer_logo" class="reset_style center"></li>
<li>Developed by <a href="http://virtuallycreatie.ca">Virtually(Creative)</a>. All Rights Reserved. Copyright © 2011</li>
</ul>
<!-- end copyright info, copyright info can be changed as desired -->
<div class="footer_nav_container">
<ul class="footer_nav reset_style">
<li><a href="#">Home</a> /</li>
<li><a href="#">Advertise</a> /</li>
<li><a href="#">Terms of Service</a> /</li>
<li><a href="#">Privacy Agreement</a> /</li>
<li><a href="#">Looking for Work?</a></li>
</ul>
<!-- end footer nav -->
<ul class="social_profiles reset_style">
<li><a href="#"><img title="By mail" src="<?php bloginfo('url'); ?>images/icons/social_profiles/16/email.png"></a></li>
<li><a href="#"><img title="My Facebook account" src="<?php bloginfo('url'); ?>images/icons/social_profiles/16/facebook.png"></a></li>
<li><a href="#"><img title="My Flickr account" src="<?php bloginfo('url'); ?>images/icons/social_profiles/16/flickr.png"></a></li>
<li><a href="#"><img title="My Twitter account" src="<?php bloginfo('url'); ?>images/icons/social_profiles/16/twitter.png"></a></li>
<li><a href="#"><img title="RSS feed" src="<?php bloginfo('url'); ?>images/icons/social_profiles/16/rss.png"></a></li>
</ul>
<!-- end social profiles nav -->
</div>
</div>
<!-- end actual footer -->
</div>
<!-- end footer container -->
</div>
<!-- end wrapper -->
<?php wp_footer(); ?>
</body>
</html>
Hope that helps! Any insight would be appreciated! Thanks.
Attached File(s)
-
mcs_multimedia copy.zip (1.43MB)
Number of downloads: 57
MultiQuote
| 