Well I got bored one night, and you know how bored evenings can go and I created a Shiny new WordPress 3+ theme named 2Clone.

TL;DR… Goto bottom for Demo and Download Links

Why?

I’ve been thinking of 2leep a lot lately and thought that their layout would make for an interesting theme. So I set out on making it into a wordpress theme, cause it looked like it would be easy and a good place to start off as my first theme. Yes, this is my first WordPress Theme I’ve ever released, so be kind, but any pointers is appreciated. The concept behind this theme is not to make a link exchange, or to spoof 2leep. It’s actually a pretty neat theme when you start playing with it. Contributions are also welcome, in the form of code or cash! Just let me know what you think in the comments!

Features

• Full Auto Thumbnails. Don’t worry about them, other than setting the cache folder to 777
• Front Page sorts posts by Comments, Most Views,Randomly(Shuffle) and by Newest
  (Tracked Automatically via Custom Post MetaData aka Custom Fields)
• Custom Menu for the Top nav. Simpley choose what categories you want and add them to the menu.
• Best Ever, just add any post to a category called “Featured” and it gets on the front page.
  (Similar to sticky posts, but the posts are kept seperate)
• VERY Minimal theme, only Two images, and one css file!
• Colors easy to change, only two green colors in css, find and replace for whole new look!
• 7 Widget areas, Sidebar 1, Sidebar 2, Pre Header, Header,Pre Article,Post Article, Footer
• WordPress 3 Required for Menus and Post Queries
• A Very  Simple Theme, means few files to edit, and loads very fast! My own demo site loads in under 2 seconds, without caching!

The Second Menu (menu2.php) Has 5 Hard-coded links:

• New – Newest posts on top.
• Lately Popular – Shows Posts with most views on top (Uses Custom Field to store post views, so the number of views can be edited if desired)
• Shuffle – Shows Random Posts.
• Best Ever – Shows the “Featured” category. Requires Slug to be /category/Featured/ – changable via menu2.php.
• Commented – Shows posts with most comments on top.

All of the above was achieved via WordPress 3 api’s, so NO PLUGINS REQUIRED! Woot!!

Creative Commons Attribution Required. All free things come with strings attached now-a-days, so just leave the footer links alone. That’s all there is to it! I’m thinking about selling a no Attribution version for those interested.

Planned Features to come:

• Random Posts Widget for the sidebars
• Custom Category and Tag pages to mimmik the out pages
• Custom Post Templates, for making posts the redirect to external urls if desired or to look different.
• RSS Links
• Better  Comments
• Post Ratings? Maybe…
• ?? Open to suggestions ??

Installation

Simple themes require a little more footwork to setup, so after you upload it, let’s get it on with a checklist!

• Step 1: Logo! Change it by replacing /images/2logo.jpg with your own!
• Step 2: CHMOD the cache folder to 777 this is where timthumb saves thumbnails to make your site load faster.
• Step 3: Create a Menu, and save it as the Primary menu.  ( Apearance -> Menus )

Colorization

• Edit style.css and do a Find/Replace on #66AE3E to change the theme color.
• Article box hover color is #d3eac7 in the CSS to change

Screenshots

Demo & Download

Addedbytes.com offers a slew of cheat sheets, and Green Complex is proud to feature some of the best programming cheat sheets on the internet right here. These are mirrored from their source (http://www.addedbytes.com/download/css-cheat-sheet-v2/) to preserve them for the future.  As a side note, you should avoid using the * selector as it impairs CSS rendering performance across all browsers, as much as 400% in some cases.

This is a beginners guide to creating a site-wide navigation that is consistent from page to page.

Tired of keeping track of multiple Menu’s on different pages? As your site grows, adding 1 new page to 25 other pages’ navigation can become a full time job. I’ll show you how easy it really is to make a single navigation that will save you time and headaches!

For this you’ll need:

1. Guts
2. A little understanding of HTML CSS and PHP (Not Really)
3. Notepad++ (Or any HTML editor)
4. A copy of DDtabmenu From Dynamic Drive (This file)

1. Let’s start off with the code you’ll need. The Three Parts are:

A. The CSS include, paste this in the header of your html.

<link rel="stylesheet" type="text/css" href="/solidblocksmenu.css">

B. The Javascript Magic,  paste this near the top of your html.

<script type="text/javascript" src="/ddtabmenu.js"></script>
<script type="text/javascript">ddtabmenu.definemenu("ddtabs1", auto)
</script>

To make adjustments, you can change the tab_menu_id to whatever HTML id your using for your menu, and the number after the comma will select which link is highlighted.
SYNTAX: ddtabmenu.definemenu(“tab_menu_id”, integer OR “auto”)
//initialize Tab Menu with ID “ddtabs1″ and select 1st tab by default

C. The HTML for the Links

<div id="ddtabs1" class="basictab">
<ul>
<li><a href="http://green.cx/" rel="sc1">Home</a></li>
<li><a href="http://green.cx/Link1.htm" rel="sc2">Link1</a></li>
<li><a href="http://green.cx/Link2/" rel="sc3">Link2</a></li>
<li><a href="http://green.cx/Link3/">Link3</a></li>
<li><a href="http://green.cx/Link4">Link4</a></li>
</ul>
</div>

D. The HTML for the Subtitles

<DIV class="tabcontainer">

<div id="sc1" class="tabcontent">Sub contents here</div>
<div id="sc2" class="tabcontent">Sub contents here</div>
<div id="sc3" class="tabcontent">Sub contents here</div>

</DIV>

2. Now The Required files you need on your server

Download this file and extract the contents to the root of your webserver, using a FTP client like FileZilla.

And, Volia! You should have a nice HTML/CSS Navigation on your site, but you don’t want to copy/paste this to EVERY page on your site right?
What if you needed to change a link or fix a typo? That would be a LOT of editing for a site with more than a hand full  of pages.

So we get around that using a simple PHP include file.

Woah! Don’t get nervous, this is actually really easy, just keep following along!

Now making that nice flashy menu and making it a PHP include is really quite easy.

First off I feel the need to make it clear, your server needs to support PHP. (Of course)

Start off Coping the HTML code for the MENU and the Subtitles, into a new document, named nav.inc

nav.inc Contents

<div id="ddtabs1">
<ul>
<li><a href="http://green.cx/" rel="sc1">Home</a></li>
<li><a href="http://green.cx/Link1.htm" rel="sc2">Link1</a></li>
<li><a href="http://green.cx/Link2/" rel="sc3">Link2</a></li>
<li><a href="http://green.cx/Link3/">Link3</a></li>
<li><a href="http://green.cx/Link4">Link4</a></li>
</ul>
</div>
<DIV>
<div id="sc1">Sub contents here</div>
<div id="sc2">Sub contents here</div>
<div id="sc3">Sub contents here</div>
</DIV>

Now rename your index.html file to index.php

Keep the CSS and Javascript in the header as per usual.

But where the Menu was located, replace it with this code.

<?php
include ("/nav.inc");
?>

That should put the contents of the navigation include file whenever this line is called. But notice! It will only work when the index (or any file on the server) ends with .php

Give it a try!

]]> http://green.cx/web-resources/web-dev-resources/web-20-navigation-crash/feed/ 0