• Red Shadow WordPress Template

    Published on September 15, 2010
    With 8 comments

    About the template

    Basically it has the backbone of the actual previous template of this blog. But, being developed based on an old WordPress template, requires a lot of code updates to meet the latest major version requirements. Anyway, after a week of reading, writing and designing and after a few more to wait for its approval, now it is ready to be distributed.

    The design

    The design is not very complicated and/or graphic emphasized. It has four main areas: the header, the main content container, the left sidebar and the footer. The containers were built using 8 (eight) <div> elements which overlap one over another to create the box effect. The style sheet formats almost all HTML elements (the drop-down list and the radio buttons are not, and a few more). Anyway, if you want to make some modifications, go ahead and do it. The DTD used for the HTML code is XHTML 1.0 Transitional. The font used for the main headings is Josefin Sans Std Light. The method used by Google seems to not be supported by old IE versions.

    The header area

    The header area contains a heading formatted as a link for the name of the blog, and the description of the blog goes under it. Those two elements are placed on the left side. On the right side there are 2 (two) images formatted as links which will give the possibility to your readers to subscribe to your articles using RSS 2 feeds and the Google Feedburner. For the last one you have to edit the header.php file and add the necessary link provided by Google. Maybe, in the near future I'll create a function to make this happened using the Dashboard.

    The last element is the menu container. The template supports custom menus as it is emphasized in WordPress codex about wp_nav_menu(). As the documentation says, if no custom menu is defined the function will fallback to wp_page_menu, else if name argument has no value defined or the value defined doesn't match the name of any custom menu defined, the function's name argument will take the name of the first custom menu defined (with the lowest ID). To use any other custom menu you have to manually add the menu name in the functions.php file in the navigation menu section. The menu supports two levels deep navigation (the parent will have children, and the children will have children), which means that the style sheet formats the menu list elements to be displayed. If you want more you have to add the proper formatting for the third level and so on (i.e.: div#menu ul ul ul ...). You have to pay attention to the order the CSS properties are declared, as long as they are served to the HTML page from top to bottom of the style.css.
    A snippet of the code is presented bellow.

    Important!
    In this area you have two icons on the right side. One points to the rss feed link and the other should pointed to you feedburner link. Read more here how to obtain your link. After this you have to edit header.php and add the link in the proper place.

    The main content container

    This container floats to the left. The main page file, index.php takes the while loop for the exiting posts and displays the entire content of the posts, not the excerpt. Based on the way the container is created, it was simple to add a conditional statement for the sticky post and with the help of the CSS properties to emphasized it on page. Another feature added, if I can say so, was to shrink the message "Enter your password to view comments." which is generated by comments_popup_link() function declared in comment-template.php file on line 973. The problem was if a password protected post exists and the password was not typed and used, instead of displaying "No comments" or "1 Comment" message, the page serve the "Enter your ..." message. This instance is only present in a WPMU environment all WP environment, based on what I experienced. So, shrinking the message assures that it will fit the container's width, otherwise will go under the place should be. The pages supports wp_link_pages() function which will add links to the next pages of one post, if it is split in more than one parts. Another function used is wp_list_pages() to add a link inside the page to the child pages of the current page. The page.php and single.php pages has the comment form built using the comments_template() function. Also I added a filter to change the messages of the input elements' labels. The template supports nested comments, three levels deep. If you want more, you have to add the proper style properties to achieve the desired effect. The comments made by the administrator (or by the main editor) are styled to be displayed different from the other comments. But, you have to modify in the style.css file the statements for the comment-author-administrator class, if your nickname, as it appears in the dashboard of your user admin (or editor) page, is different from administrator, and change it to the nickname you have. Otherwise, no change to the comment style. The comment li elements has different background for even and odd classes.

    The template also has a 404.php, a search.php and an archive.php page. If you want to use the archive.php page read how to create an archive page.

    The sidebar

    The sidebar floats to the right and it supports widgets. By default it has 4 (four) custom widgets defined: Category, Blogroll, Archives (monthly) and Meta. Also in functions.php file has 3(three) custom widgets declared: Custom Calendar, Custom Search Widget and Custom Tag Cloud. Please use the Custom Calendar widget as it is formatted with a different background box.

    The footer

    The footer has 2 links for RSS feeds and a link for the author of this template. Also it has a simple custom function which will display a Welcome back, user first name user last name message if the user is logged in, or a Login link if the user is not logged in. Anyway, it will be a little change, the message will be formatted as a link to the admin page, in the next version of this template.

    Credits

    The template is released under GPL v3 license. You can use it as it is, modify it, for commercial or non-commercial use. A thank you message is all that I need, if you get some satisfaction using this template.

    You can DOWNLOAD the template from WordPress site. A LIVE PREVIEW of the template is available also.

    I hope you'll enjoy it :) .

    8 comments to "Red Shadow WordPress Template"

    Share your thoughts on this article.

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">