Building Custom WordPress Theme

15,08,2010 at 10:52 Yorum bırakın

<![CDATA[You want to build your own WordPress theme but in a very simple way, then you dont need to edit the default wordpress theme, just create a new one with just 5 files. That is why I will share a simple version of the theme I used on skalenius.com

index.php(main stuff)

<!DOCTYPE html>
<html lang="en"><head>
    <meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta name="google-site-verification" content="T8yRQAwK80tGKOWA-nTlOAjNo37ye8C8UIvgM-6zW0I" />
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/html5.js"></script>
	<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/custom.js"></script>
    <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/reset.css" />
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/960.css" />
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/custom.css" />
    <link rel="icon" href="/favicon.ico?1" type="image/x-icon" />
    <link rel="shortcut icon" href="/favicon.ico?1" type="image/x-icon" />
    <?php if(!is_single()){?><link rel="image_src" href="<?php bloginfo('stylesheet_directory'); ?>/images/share.gif?1" /><? }?>
    <?php wp_head();?>
    <script type="text/javascript">

		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-3174937-16']);
		_gaq.push(['_trackPageview']);

		(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();

	</script>
</head>

<body onLoad="ready()">
	<div class="blog container_16">
    	<header class="grid_16">
        	<h1 class="grid_12 alpha"><a href="<?php bloginfo('url');?>" class="logo ti">Sofie Kalenius</a></h1>
        	<aside class="grid_4 omega">
                <form id="searchForm" method="get" action="<?php bloginfo('url');?>"><input type="text" name="s" value="Search..." /><input type="submit" value=""/></form>
                <div class="networks"><a href="http://www.linkedin.com/in/skalenius" class="nw1 ti">linkedin</a><a href="http://twitter.com/skalenius" class="nw2 ti">twitter</a><a href="http://www.facebook.com/profile.php?id=638866694" class="nw3 ti">facebook</a><a href="/feed/" class="nw4 ti">rss</a><a href="http://www.flickr.com/photos/50587722@N06/" class="nw5 ti">flickr</a></div>
            </aside>
            <ul>
				<?php if(is_category()){$cat = get_query_var('cat');$currentCat = get_category($cat);}
				$categories=get_categories();foreach($categories as $cat){?><li><a href="<?=get_category_link($cat->term_id);?>" <? if($currentCat->slug == $cat->category_nicename){?>class="on"<? }?>><?=$cat->cat_name;?> (<?=$cat->category_count;?>)</a></li><? }?>
				<?php $pages=get_pages();foreach($pages as $pagg){?><li><a href="<?=get_page_link($pagg->ID);?>"><?=$pagg->post_title;?></a></li><? }?>
            </ul>
        </header>
    	<div class="main grid_16">
        	<section class="posts grid_13 alpha">

				<?php if (have_posts()) : ?>
					<?php while (have_posts()) : the_post();?>
                        <div class="post">
                            <div class="date grid_2 alpha"><section><p class="top"><?php the_time('d') ?></p><p class="bottom"><?php the_time('M') ?> <?php the_time('y') ?></p></section></div>
                            <div class="content grid_11 omega spacing80">
                                <a href="<? the_permalink() ?>#comments" class="comment_no"><?php comments_number('0','1','%'); ?></a>
                                <h2><a href="<? the_permalink() ?>" rel="bookmark" class="title"><? the_title();?></a></h2>
                                <? if(has_tag()){?><div class="tags"><?php the_tags('Tags: ', ', '); ?></div><? }?>
                                <article><?php the_content('Read the rest of this entry &raquo;'); ?></article>
                            </div>

						<?php comments_template();?>
                        </div>
                    <?php endwhile; else: ?>
                    <p>Sorry, no posts matched your criteria</p>
				<?php endif; ?>

                <nav class="grid_11 prefix_2 alpha omega"><section><?php next_posts_link('&laquo; Older Posts') ?>&nbsp;</section><section>&nbsp;<?php previous_posts_link('Newer Posts &raquo;') ?></section></nav>
            </section>
        	<aside class="sidebar grid_3 omega">

                <ul>
					<?php
                        if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
                    <?php endif; ?>
                </ul>

            </aside>
        </div>
    </div>
    <footer class="footer">
    	<div class="container_16">
			<? $categories=get_categories();foreach($categories as $cat){ if($first) echo " | ";$first=1;?><a href="<?=get_category_link($cat->term_id);?>"><?=$cat->cat_name;?></a><? }
            $pages=get_pages();foreach($pages as $pagg){?> | <a href="<?=get_page_link($pagg->ID);?>"><?=$pagg->post_title;?></a><? }?><br />
            <p class="copyright">Copyright Sofie Kalenius 2010. All Rights Reserved. Designed by <a href="/contact">Sofie Kalenius</a> | Developed by <a href="http://www.geryit.com">geryit</a></p>
        </div>

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

style.css

body{font-family:Arial, Helvetica, sans-serif;background:#f6f5f5 url(images/body_bg.png) repeat-x center top;font-size:12px;}
input,select,textarea{font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#8f8e90;}
input{float:left;padding:5px;width:50%;font-size:18px;color:#666;}
input[type=submit]{background:#1e7972;color:#fff;border:none;width:auto;padding:5px 40px;}
textarea{float:left;padding:5px;width:80%;font-size:18px;color:#666;}
header,footer,nav,section,article,aside,details,div,ul,li,p,a,img,label,form{display:block;position:relative;float:left;}
h1,h2,h3,h4,h5,h6,p,ul,form{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-weight:normal;line-height:normal;float:left;width:100%;clear:both;}
h3{font-size:22px;color:#424242;font-weight:bold;}
ul{list-style:none;}
a{text-decoration:none;color:#424242;}
a:hover{color:#999}

.blog{float:none;padding-bottom:30px;overflow:hidden;visibility:hidden;}
.blog>header{width:100%;padding-top:27px;}
.blog>header>h1>a{width:479px;height:65px;background:url(images/logo.png);margin-top:33px;}
.blog>header>h1>a:hover{background-position:bottom;}
.blog>header>aside{height:94px;background:url(images/search_and_networks_bg.png) right top;}
.blog>header>aside>form{width:100%;}
.blog>header>aside>form>input[type=text]{width:162px;height:19px;border:2px solid #e3e2e2;background:#e9e9e9;padding:5px;padding-right:45px;}
.blog>header>aside>form>input[type=submit]{position:absolute;width:40px;height:33px;background:url(images/search_submit.png);top:0px;left:174px;cursor:pointer;background-color:none;border:0;padding:0;}
.blog>header>aside>form>input[type=submit]:hover{background-position:bottom;}
.blog>header>aside>div{width:100%;margin-top:24px;}
.blog>header>aside>div>a{width:38px;height:38px;background:url(images/networks.png);margin-left:7px;}
.blog>header>aside>div>a:first-child{margin-left:0;}
.blog>header>aside>div>a.nw1{background-position:0px top;}
.blog>header>aside>div>a.nw1:hover{background-position:0px bottom;}
.blog>header>aside>div>a.nw2{background-position:-47px top;}
.blog>header>aside>div>a.nw2:hover{background-position:-47px bottom;}
.blog>header>aside>div>a.nw3{background-position:-93px top;}
.blog>header>aside>div>a.nw3:hover{background-position:-93px bottom;}
.blog>header>aside>div>a.nw4{background-position:-138px top;}
.blog>header>aside>div>a.nw4:hover{background-position:-138px bottom;}
.blog>header>aside>div>a.nw5{background-position:-182px top;}
.blog>header>aside>div>a.nw5:hover{background-position:-182px bottom;}
.blog>header>ul{width:100%;margin-top:50px;padding:10px 0;border-top:1px solid #e9e8e8;border-bottom:1px solid #e9e8e8;}
.blog>header>ul>li{}
.blog>header>ul>li>a{height:25px;line-height:25px;font-size:15px;color:#424242;padding:0 10px;}
.blog>header>ul>li>a.on{background:#424242;color:#f6f5f5;font-weight:bold;}
.blog>header>ul>li>a:hover{background:#424242;color:#f6f5f5;}
.blog>.main{width:100%;padding-top:30px;}
.blog>.main>.posts{}
.blog>.main>.posts>.post{width:100%;margin-bottom:30px;color:#424242;}
.blog>.main>.posts>.post>.date{}
.blog>.main>.posts>.post a{display:inline;float:none;}
.blog>.main>.posts>.post img{display:inline;}
.blog>.main>.posts>.post .wp-smiley{border:0!important;margin:0!important;}
.blog>.main>.posts>.post>.date>section{width:80px;height:81px;background:url(images/bgitem1.png);color:#f6f5f5;}
.blog>.main>.posts>.post>.date>section>.top{margin-top:5px;text-align:center;font-size:42px;}
.blog>.main>.posts>.post>.date>section>.bottom{margin-top:0px;text-align:center;font-size:13px;}
.blog>.main>.posts>.post>.content{background:#eaebeb url(images/bgitem2.png) no-repeat right top;padding:20px 40px 40px;}
.blog>.main>.posts>.post>.content>a.comment_no{width:40px;height:70px;float:right;margin:-18px -38px 0 0;font-size:15px;color:#f6f5f5;text-align:center;line-height:55px;padding-left:25px;}
.blog>.main>.posts>.post>.content>a.comment_no:hover{color:#000;}
.blog>.main>.posts>.post>.content>h2{margin-top:-40px;}
.blog>.main>.posts>.post>.content>h2>a.title{font-size:28px;color:#424242;font-weight:bold;}
.blog>.main>.posts>.post>.content>h2>a.title:hover{color:#999;}
.blog>.main>.posts>.post>.content>.tags{width:100%;color:#424242;font-size:12px;margin-top:3px;}
.blog>.main>.posts>.post>.content>.tags>span{font-weight:bold;}
.blog>.main>.posts>.post>.content>.tags>a{display:inline;float:none;color:#424242;}
.blog>.main>.posts>.post>.content>.tags>a:hover{color:#999;}
.blog>.main>.posts>.post>.content>article{width:100%;}
.blog>.main>.posts>.post>.content>article>p{margin-top:20px;width:auto;float:none;clear:none;}
.blog>.main>.posts>.post>.content>article>p>a{display:inline;width:auto;float:none;clear:none;}
.blog>.main>.posts>.post>.content>article>p img{border:5px solid #999;margin:0 15px 10px 0;padding:0;}
.blog>.main>.posts>nav{}
.blog>.main>.posts>nav>section{width:50%;}
.blog>.main>.posts>nav>section>a{font-size:22px;color:#424242;text-decoration:underline;}
.blog>.main>.posts>nav>section>a:hover{color:#999;}
.blog>.main>.sidebar{}
.blog>.main>.sidebar>ul{width:100%;}
.blog>.main>.sidebar>ul>li{width:100%;margin-bottom:30px}
.blog>.main>.sidebar>ul>li>h3{font-size:20px;color:#424242;background:url(images/bar1.png) repeat-x bottom;padding-bottom:5px;margin-bottom:5px;}
.blog>.main>.sidebar>ul>li>ul{width:100%;}
.blog>.main>.sidebar>ul>li>ul>li{width:100%;padding:5px 0;}
.blog>.main>.sidebar>ul>li>ul>li>a{font-size:11px;color:#424242;background:url(images/bull1.png) no-repeat left center;text-indent:7px;}
.blog>.main>.sidebar>ul>li>ul>li>a:hover{color:#999;}
.blog>.main>.sidebar>ul>li>ul>li>p{font-size:10px;}
.blog>.main>.sidebar>ul>.featured>ul>li{width:100%;border-bottom:1px solid #eee;padding:10px 0;}
.blog>.main>.sidebar>ul>.featured>ul>li>.right>h4>a{font-size:13px;font-weight:bold;background:none;text-indent:0;}
.blog>.main>.sidebar>ul>.featured>ul>li>.right>h4>a:hover{color:#999;}
.blog>.main>.sidebar img{padding:2px;}

.blog>.main>.posts>.post>.comments{margin-top:30px;background:#eaebeb;padding:20px 40px 40px;}
.blog>.main>.posts>.post>.comments>.navigation{width:100%;margin-top:10px;}
.blog>.main>.posts>.post>.comments>ul{width:100%;margin-top:10px;}
.blog>.main>.posts>.post>.comments>ul>li{width:100%;margin-top:10px;}
.blog>.main>.posts>.post>.comments>ul>li a{float:none;display:inline;clear:none;}
.blog>.main>.posts>.post>.comments>ul>li>div{width:100%;color:#666;}
.blog>.main>.posts>.post>.comments>ul>li>div>img{padding:0 5px 5px 0;}
.blog>.main>.posts>.post>.comments>ul>li>div>.date{font-size:9px;}
.blog>.main>.posts>.post>.comments>ul>li>div>.comment_text{font-size:11px;color:#000;}
.blog>.main>.posts>.post>.comments>#respond{width:100%;margin-top:20px;}
.blog>.main>.posts>.post>.comments>#respond #commentform p{margin-top:10px;}
.blog>.main>.posts>.post>.comments>#respond #commentform label{margin:10px 0 0 10px;}
.footer{width:100%;height:100px;background:#1e7972 url(images/footer_bg.png) repeat-x;}
.footer>div{float:none;margin-top:30px;color:#133c39;}
.footer>div>a{float:none;display:inline;color:#133c39;font-size:12px;text-decoration:underline;}
.footer>div>a:hover{color:#000;}
.footer>div>.copyright{margin-top:5px;color:#fff;}
.footer>div>.copyright a{float:none;display:inline;color:#CFCFCF;}
.footer>div>.copyright a:hover{color:#333;}

.ti{text-indent:-99999px;}
.tar{text-align:right;}
.fr{float:right;}
.vv{visibility:visible!important;}
p img {padding: 0;max-width: 100%;float:none;}
img.centered {display: block;margin-left: auto;margin-right: auto;}
img.alignright {padding: 4px;margin: 0 0 2px 7px;display: inline;}
img.alignleft {padding: 4px;margin: 0 7px 2px 0;display: inline;}
.alignright {float: right;}
.alignleft {float: left;}
.wpcf7{width:100%;padding-top:30px!important;}
.wpcf7 p{padding-top:10px!important;}

comments.php(customize comment form)

<?php

// Do not delete these lines
	if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');

	if ( post_password_required() ) { ?>
		<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
	<?php
		return;
	}
?>

<div class="comments push_2 grid_11 alpha spacing80">
<!-- You can start editing here. -->

<?php if ( have_comments()) : ?>
	<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>

	<ul>
		<?php wp_list_comments('callback=custom_comment_template'); ?>
	</ul>

 <?php else : // this is displayed if there are no comments so far ?>

	<?php if ( comments_open() ) : ?>
		<!-- If comments are open, but there are no comments. -->

	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments">Comments are closed.</p>

	<?php endif; ?>
<?php endif; ?>


<?php if ( comments_open() ) : ?>

<div id="respond">

<h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3>

<div class="cancel-comment-reply">
	<small><?php cancel_comment_reply_link(); ?></small>
</div>

<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
<p>You must be <a href="<?php echo wp_login_url( get_permalink() ); ?>">logged in</a> to post a comment.</p>
<?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( is_user_logged_in() ) : ?>

<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a></p>

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>

<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->

<p><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<?php comment_id_fields(); ?>
</p>
<?php do_action('comment_form', $post->ID); ?>

</form>

<?php endif; // If registration required and not logged in ?>
</div>
<?php endif; // if you delete this the sky will fall on your head ?>
</div>

functions.php(customize comments view)

<?
if(function_exists('register_sidebar'))
register_sidebar(array(
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));

function custom_comment_template($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment; ?>
	<li id="comment-<?php comment_ID(); ?>">
        <div><?php echo get_avatar($comment,$size='48'); ?><?php printf(__('<cite>%s</cite> <span>says:</span>'), get_comment_author_link()) ?><br /><span class="date"><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?></span><br /><span class="comment_text"><?=get_comment_text();?></span></div>
        <?php
}

require_once (TEMPLATEPATH . '/widgets.php');
?>

Click here for the entire theme files

]]>

Reklamlar

Entry filed under: Css3, Php, Wordpress.

Custom Html5 Video Player with HD option An (Almost) Complete Guide to CSS3 Multi-column Layouts

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Takvim

Ağustos 2010
P S Ç P C C P
« Tem   Eyl »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Most Recent Posts


%d blogcu bunu beğendi: