Worn Wall
Latest Version: 1.00 Added on: 2015/06/06 After much anticipation, I am really glad to release my first theme in 2010! To add to my excitement, Speckyboy collaborated and co-released this Worn Wall theme to give it greater exposure. What a good start to the new year 🙂 Click on the “Free Download” link above to get the theme now! By using this theme for FREE, you agree to accept the external links. Gain access to the fully layered Photoshop file for quick and easy tweakage. PSD files included for both the main and the sub themes. Ad-Free PackageRemoving the credit links will make the theme to not function properly. Unencrypted main and sub theme files can be purchased at $20. Theme CustomizationDo you want to customize this theme to include images that suit your blog's topic? I can help you with the graphical customization. For more details, please visit the theme customization service page. The following is an example of a custom design of the Worn Wall theme. Main Features – Different design for sticky post feature – Compatible with IE7, IE8, Firefox, Chrome, Safari, Opera – W3C XHTML and CSS compliant – SEO ready – Gravatar enable Plugin There is a featured content section below the header link. This feature is built in using the Featured Content Gallery (FCG) plugin. Please download the latest version and follow the instruction found in “Readme.txt” to do the setup. If you do not want to show this feature, just don’t install the plugin. Blog Title and Description The demo is showing a special font as below: By default, after you install the theme, the blog title and description are showing the Times New Roman font. You can change the font style by following this instruction: – Download this PSD zip file (also include the font that I use that is available free from dafont.com.) – Extract and open the PSD file in the Photoshop program – Change the title and description using your desired font – Save the image using this name: bg_header_new.jpg – Upload the image to your server in the /images folder View all my themes Change log 2010-01-06 v1.00 – Release 2011-110-27 v3.0 – New – Added drop-down menu, ad-widget, Options page, advanced automatic thumbnails, custom style, custom menu (works on WP 3+ onwards) and enabled localization...
Read MoreHow to Customize my Themes without Changing Coding
This guide is very useful for the graphic designers who have little or no knowledge about theme coding. See how I turn my Wooden Fence theme into a kids topic below. There is no such theme that fits all topics. Though I have created themes in many topics, you may not find the one most suitable for your blog. At TemplateLite, I want to allow my theme users to have greater control over the look of my themes while keeping the core coding intact. You only need to change the graphic part to suit your topic. Minor modification of the font style is needed sometimes. Before I start out, it is important to stress and explain why I don’t encourage changing the core coding in the whole customization process. Reason #1 You may mess up the coding that makes the customization become very complicated and difficult. Reason #2 Since you are not changing the coding, whenever a theme upgrade version is made available in this site, you can download and install the upgrade without having to develop your own upgrade version of your customized theme. This will save you a lot of time considering WordPress is constantly upgrading and improving it’s platform quite frequently. In this tutorial , I am taking the Wooden Fence theme and show you how to customize the header and footer to suit your sites topic. First of all, take a look at the theme before and after customization viewed at a resolution of 1600px. Before Customization (Parent Theme) Preview Theme | Download Theme After Customization (Child Theme) Preview Theme | Download Theme You can see that the changes made to the theme include ONLY the header and the footer section. The design in the content and the sidebar area are left intact. This is how I did it. Step 1 Open the PSD file of the Wooden Fence theme. The header and footer design is shown below. Header Design (Parent Theme) Footer Design (Parent Theme) Step 2 Turn off the layers above the wooden fence (make them blank). Header Design (Parent Theme) Step 3 Design your own header. In this particular case, I designed a stitched frame with 3 adorable children, rainbow, color pencil, and some kids playing kites. I assume you possess the intermediate/advance Photoshop skill so I am not going into detail as to how I created them. This guide is mainly for graphic designers to customize the theme image without changing coding. Header Design (ChildTheme) Step 4 Now, repeat the same procedure in the footer. First, turn off the layers in the footer in front of the wooden fence. Footer Design (Parent Theme) and add your own footer image to it. Footer Design (Child Theme) Now you have completed the header and the footer design. The next steps will be slicing the right images to the correct size. To do it correctly, you need to open the header and the footer images of the parent theme to get the dimension. Step 5 Under the parent theme’s “/images” folder, find all the files containing the header area that you have modified. There are only 16 image files (some of them are icons) in this theme so it would be easy to find the right images. Files in “/images” folder (Parent Theme) In this case, “bg_header.jpg” and “bg_top.jpg” contains the header area that you have modified in the PSD file. Step 6 Open these two files and measure their dimension. bg_header.jpg (Parent Theme) bg_top.jpg (Parent Theme) Step 7 In the modified PSD file containing your new design, slice the header using the exact...
Read MoreTemplateLite’s Options Page Explained
I always want to improve the standard of my WordPress themes to make them premium-like. My latest innovation is to include an Options page in the Sunset Farm theme. What is a WordPress theme Options page? A theme Options page is an interface in WordPress where you can control how a theme looks and functions solely by setting options without changing the core theme files. How to access the Options page The Options page can be found under the “Appearance” tab in the WordPress admin. Take the Sunset Farm theme for example, click on the “Sunset Farm” link under “Appearance” to access the WordPress Options page. What features are available in my Options page? Too many features will confuse the users. I only include the essential one while allowing some extent of customization. If you think some features are important and would be nice to be added to the Options page, please let me know. All the new themes created after the Sunset Farm theme (excluding child themes) have the Options page. In future, the Options page will be applied to all older themes eventually. There are three main sections in the theme Options page General Setting Layout Setting Post Layout Please note that the “Post Layout” section is only available in themes with version 2.0+ The features are explained base on the Sunset Farm and the Texture Art theme. General Setting The general setting in the Options page allows you to define the Twitter settings, feed URL, tracking code and IE6 warning option. The details of each items are described below. This option allows you to display or hide the Twitter icon. Enter your feed URL for your readers to subscribe. If you leave it blank, it will be showing the WordPress default feed URL in this format: http://www.yourblog.com/feed/ Enter your traffic tracking code in this field. I recommend Google Analytics as it is by far the most comprehensive tracking code I have used. If you check this button, your visitors’ who browse your site in IE6 will see a popup icon asking them to switch to other browsers in order to view the theme correctly. Layout Setting The layout setting in the Options page allows you to define the theme style, blog title and tagline and home link. Let me explain how they work as follows: In the Sunset Farm theme, there are 4 options in the pull-down menu. Let’s experiment with the “templatelite.css” and “paint.css” option. In each experiment, the “Blog Title and Tagline” has to be in the “uncheck” status. I’ll tell you why later. Option 1: templatelite.css When you select this option, the header design will look like this: And the font is showing the Verdana style: Option 2: paint.css When you select this option, the header design will look like this: And the font is showing the Arial style: Now, let me take the paint.css option example and show you how this is done. Changing header image with texture – Download this PSD zip file containing the header image. – Extract and open the PSD file in the Photoshop program – Use the Texturizer effect found under Filter -> Texture to create the effect. – Save the image using this name: bg_header.jpg – Upload the image to your server under the “/styles/paint/” folder Changing the font style – Open style.css under the root folder of the theme – Open paint.css under the “/styles/” folder – Copy the following “body” element in style.css and paste it in paint.css body { font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif; color:#C2AE7D; background:#160500 url(‘images/bg_repeat.jpg’) repeat-y center...
Read MoreNote Paper
Latest Version: 2.00 Added on: 2015/05/24 Here comes the Note Paper theme with the feature content section below the header. Click on the “Free Download” link above to get the theme now! By using this theme for FREE, you agree to accept the external links. Gain access to the fully layered Photoshop file for quick and easy tweakage. PSD files included for both the main and the sub themes. Ad-Free PackageRemoving the credit links will make the theme to not function properly. Unencrypted main and sub theme files can be purchased at $20. Theme CustomizationDo you want to customize this theme to include images that suit your blog's topic? I can help you with the graphical customization. For more details, please visit the theme customization service page. Main Features – User-friendly Options page – Drop-Down Menu – Automatic Thumbnails – Different design for sticky post feature – Compatible with IE7, IE8, Firefox, Chrome, Safari, Opera – W3C XHTML and CSS compliant – SEO ready – Gravatar enable Automatic Thumbnails Please refer to this page for the details of how the automatic thumbnails work. Drop-down Menu The Note Paper theme has a multi-level drop-down menu. The drop-down menu will show up automatically in the header navigation when you create hierarchical pages. This is another feature that will be added to all my future themes. Plugin There is a featured content section below the header link. This feature is built in using the Featured Content Gallery (FCG) plugin. Please download the latest version and follow the instruction found in “Readme.txt” to do the setup. If you do not want to show this feature, just don’t activate the plugin. Blog Title and Description The demo is showing a special font as below: By default, after you install the theme, the blog title and description are showing the Times New Roman font. You can change the font style by following this instruction: Part 1: Modifying Font Style – Download this PSD zip file (also include the font that I use.) – Extract and open the PSD file in the Photoshop/ImageReady/Gimp/PaintShop program – Change the title and description using your desired font (you are free to modify the header image if you want) – Save the image using this name: bg_header.jpg – Upload the image to your server in the “/styles/default/” folder Part 2: Activating the Style – Login to your WP admin – Go to the options page of the Note Paper theme under “Appearance -> Note Paper” – Find “Theme Style” under “Layout Setting” – In the pull-down menu, select “default.css” – Save the setting and go to your site to see the changes. Ad Widget An ad widget can be found under the “Available Widgets” section. You can drag the widget to Sidebar 1. This widget allows you to add your advertisement while keeping the sidebar design. Please limit the width of your ad to 250px. User Showcase The followings are a few examples of nice modification of this theme from other users. You can view all the nice design in the forum theme showcase. View all my themes Change log 2009-11-24 v1.00 – Released 2010-06-10 v2.00 – Added drop-down menu, ad-widget, Options page that includes Twitter and feed integration, advanced automatic thumbnails, custom style and more. Paper Cups...
Read MoreTheme Partnership with Catswhocode
The Bulletin Board theme is one of my best design and I am pleasured Catswhocode accepted my partnership invitation to co-release the theme. In this win-win partnership, Catswhocode gets a link hardcoded in the footer of the theme while my theme gets a feature on Catswhocode. As you see, I only partner with big players when it comes to theme release. Smashingapps, Sixrevision, Hongkiat are some of the super blogs that I collaborated with. Now it is Catswhocode which added to the portfolio 🙂 Let me introduce a bit about Catswhocode. This site is like a coder’s paradise. You could find almost anything you need to start up a WordPress blog or a new website there. There’s a wealth of tips to be found there for bloggers as well as some really good WordPress themes, widgets, plug-ins, theme reviews, short codes and fonts. For the ones who are still new to blogging there are plenty of help articles to be found there too. Along with WordPress tools there are web design and web development tools and tips available on the website where you can find tips, tutorials and a host of tools to be downloaded. The website is designed in a user friendly and an attractive manner which makes navigating and searching for topic easy. It will soon become a good one stop shop to find all that you need at one...
Read More
