Tag: thesis

6 steps to set up an Amazon aStore in a WordPress blog with Thesis theme

After over a year of “part-time” e-Commerce (read – link referrals), I think it is about time for my blog to host a bigger eshop. I have set up the Amazon aStore before as a standalone website, but have not tried embedding it in a WordPress blog, especially one (like mine) equipped with the Thesis theme (one of the best WordPress theme frameworks in the market). So let’s give it a try.

If you’re familiar with the Amazon Associates program, you can probably finish the set up within an hour, in only 6 steps (no kidding !!). First thing first, here is the plan, you first set up your own Amazon Associates account, then you will set up the aStore parameters, and finally embed the aStore in your blog.

Step 0 – Login to Amazon Associates program, click “aStore” in the top blue color menu, and then click “Add an aStore” with your Tracking ID.

Step 1 – Define product categories in your new store. In the example below, I created 4 main categories (you can create subcategories if you want to). In the right hand side, the most important field is how you would like to populate the products from Amazon to your aStore. There are 3 options, and the easiest one is the first one – “Add products by Amazon.com category”. Just search the category and add to your store. You can also add products one by one or add products from a pre-defined listmania.

1. Add Category

Step 2 – Customize the look and feel of the store, I suggest to make all the colors (headers, background, text, links etc.) the same as your blog’s theme colors.

2. Customize theme

Step 3 – Select where to put the category and search sidebar. I picked the left hand side option as it mimics the Amazon store (even though my blog used to have sidebar on the right).

3. Sidebar

Step 4 – Get the store link by clicking the second option – i.e. get the iframe code. Copy the iframe code to the notepad for the next step. The Amazon aStore part is finished.

4. Get link

Step 5 – Now, start up your WordPress blog engine, login to your administrator mode, add a new “Page”, not a new blog post. Instead of using Visual editor, use the HTML editor and copy the iframe statement there. Then in the Page Attributes box, select “No Sidebars” for the Template option. Save the draft and you can preview it. If it looks ok, publish the newly created Page. Wow!! Your eshop with all the Amazon products, payment gateway and delivery logistics is now online.

5. Create page

Step 6 – The very last step is simply to put up your eshop page to the navigation menu of the Thesis theme. Go to Thesis Site Options, in the Navigation Menu panel, turn on the newly created Page and you can edit the display text as well (in the example, I simply edited it to “Store”).

6. Site Options

That’s it … and here is my Amazon aStore in an hour !!

Update : Please note that WordPress.com does not allow embedding iframe in your website. So the above steps work for your self-hosting blog (i.e. download and install from WordPress.net) only.

Upgrade Thesis 1.7

DIY Themes released the latest version of Thesis and it is certainly a great upgrade. The latest generation is version 1.7 and the upgrade process is rather easy:

  1. Backup the /custom folder of your current Thesis installation to your PC;
  2. Download the new theme to your PC and unzip it, it will be a subfolder with name /thesis_17;
  3. Upload /thesis_17 to your /wp-content/themes folder, via your favorite FTP client;
  4. In that new uploaded directory, rename the /custom-sample subfolder to /custom;
  5. [Important] Copy the contents from the folder you backed up in step 1 above, to the new /custom folder – folder by folder, file by file;
  6. Set the permission of /cache folder to 775;
  7. Set the permission of layout.css file to 666;
  8. [Optional] Remove the WordPress Admin link in the footer. Please refer to Update 4 of how to enhance the Thesis theme;
  9. Inside WordPress dashboard, Appearance -> Themes, activate Thesis 1.7. You shall see the new Thesis links on the left of the dashboard;
  10. Visit the Design options page, and save all the updates once.

That is it !! As smooth as silk …

Thesis 1.7

Header image rotation for Thesis theme

One of the very first things I want to do to the blog in the new year is to change its look, with a very simple twist – rotate the header image. The very good theme I installed six months ago was the Thesis theme, but the standard installation does not include a header image auto rotation – something that is a standard for many WordPress themes. As I believe I am not the only one in the world want to do this, so I did a search in Google and of course the search results did not disappoint me. Anyway, here are the step-by-step instructions with some more details.

Step 1. Create your series of rotating banners. All I did was to create a few more header images with a size same as the current image. However, to make it works with the following hook, the header images should have the same name followed by an identifying number. For example, in my case, I created 5 banners from my photos and named them header_1.jpg, header_2.jpg, header_3.jpg, header_4.jpg, and header_5.jpg. Note that if your files are GIFs, then name those files *.gif. And as you may aware, you cannot mix jpgs and gifs with this hook.

Step 2. Upload your header images to a folder inside your site. In my case I created a folder named “headers” inside the “custom” folder of my Thesis Theme. If you don’t like the name “headers”, change it to anything but don’t forget to change the script below.

Step 3. Create a new file in your preferred text editor and copy the following code and then save the file as “rotating_images.php”

<?php
$random_image = rand(1,5);
?>

<a href=”<?php bloginfo(‘url’); ?>”><img src=”<?php bloginfo(‘template_url’); ?>/custom/headers/header_<?php echo $random_image; ?>.jpg” alt=”Random header image… Refresh for more!” /></a>

Upload this file to the custom folder in your Thesis Theme (the same folder that custom.css & custom_functions.php reside in). The boldfaced texts are those that you may want to change to fit your settings. For example, the second number in the call rand() should equal to the total number of images that you want to rotate. I found that to achieve best effect, try 4 to 5 images for rotation.

Step 4. Lastly, add the following code to your custom_functions.php in the custom folder:

function custom_header() {
include (TEMPLATEPATH . ‘/custom/rotating_images.php‘);
}
remove_action(‘thesis_hook_header’, ‘thesis_default_header’);
add_action(‘thesis_hook_header’, ‘custom_header‘);

Again, the boldfaced texts are those you can change to whatever you want.

Hope it’s useful to your Thesis theme.

WordPress Thesis theme

Since adopted the blog engines like Blogger, Plog (now Lifetype) and WordPress instead of writing HTML pages for my weblog, one never-ending task is to find the right theme for the blog – a theme that you can change the look at ease, with good support in widgets, and perform well in SEO.

I used the Mandigo theme as my WordPress engine for quite some time, reckoned it is about time to change it to another one and started the search for couple of weeks. So far, the best I can find is the Thesis theme from DIY Themes. This is not a free theme, but I think it is OK as I am willing to pay some money for good works and support. And in fact it is not a very good looking theme (unless you a follower of minimalism), but it is extremely versatile in changing the look, setting the SEO parameters and believe it or not, quite programmer friendly with the “Hook” concept. So I like it and hope you like the new look of this blog as well.

But same as in any other theme implementations, I made quite some changes even in the version one of the new look, so here are the things I did after I downloaded and installed the theme. Hope it is useful to any of you that also want to try out the Thesis theme.

Settings in Thesis Options

  • Change windows title structure;
  • Add homepage meta tag;
  • Change number of feature posts;
  • Change text of “Read more” link;
  • Add Google Analytics to Footer script;
  • Turn on Pages in navigation menu (tabs); and
  • Change save button text.

Settings in Design options

  • Change font and font sizes, you have to try many many times to find the one you want;
  • Change “Size layout” (column width), make it to fit your biggest images / slides;
  • Change the column order (now content column on the left);
  • Change the teaser attributes and teaser date format;
  • Remove image rotator, for now, but uploaded lots of picture for future use

Change background color, add border (add in custom.css)

body.custom { background: #F5F5F5; }
.custom #container { margin-top: 2em; margin-bottom: 2em; padding: 0.3em; background: #e6e6fa; border: 0.4em solid #dcdcdc; }
.custom #page { background: #fff; }

Change header image, add border (add in custom.css)

.custom #header #logo a { display: block; height: 222px; width: 1004px; background: url('images/church.jpg') no-repeat; outline: none; border: 2px solid #dfdfdf; }
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
.custom #header #tagline { height: 0; }
.custom #header { padding: 0; }

Change side bar color and widget heading sizes (add in custom.css)

.custom #sidebar_1 {background:#F5F5F5 none repeat scroll 0 0;}
.custom .sidebar h3 {font-weight: bold; padding: 0px 5px; background: #F5F5F5;}

Swap heading image and navigation tab (add in custom_functions.php)

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');

Change 404 page content (add in custom_functions.php)

function my_404_title() {
echo "Ooops ... where is the content ?";
}
remove_action('thesis_hook_404_title', 'thesis_404_title');
add_action('thesis_hook_404_title', 'my_404_title');
function custom_404_page() { ?>
<h3>No worry. Try one of the followings:</h3>
<ul>
<li>Hit the "back" button on your browser. It's perfect for situations like this!</li>
<li>Head on over to the <a href="http://www.michaelyung.com/">home page.</a></li>
<li>Use the search box on the right!</li>
</ul>
<?php }
add_action('thesis_hook_404_content', 'custom_404_page');
remove_action('thesis_hook_404_content', 'thesis_404_content');

Update 1: Change the order of the comments

In file comments.php

Insert $comments = array_reverse($comments, true);

before foreach ($comments as $comment) :

Update 2: I just undo the changes in Update 1 above, as I can achieve the same with WordPress Discussion settings.

Update 3: Remove the Thesis Attribution link in the blog footer

Add this line to the custom_functions.php

remove_action('thesis_hook_footer', 'thesis_attribution');

Update 4: Remove the WordPress admin link in the blog footer

Find the program footer.php in /lib/html directory and comment out the line thesis_admin_link();