How To Add Amazon aStore To Your WordPress Page
This was one of those projects that I thought would be pretty cut and dry. As it turned out, it wasn’t, it was not that bad though, it only took me about an hour. The issues that I had were:
- The Amazon aStore was too wide for my current page setup, so I needed to remove the side bar.
- I needed to change the page content section from a narrow class to a wide class without affecting all my other pages.
- My Stylesheet (Style.css) did not contain the .widecolumn class.
I was able to find some of my answers on the internet, but as usual I had to wade through 40 different websites to get most of my answers, the rest I just used common sense. I’ll walk you through it step by step.
Create New Page Template for the Store
- First thing we need to do is create a new template. (I’m assuming that you only have ftp access to your server so that’s how I’ll explain this part. However you do it doesn’t matter as long as it gets done.) Download the Page.php from your template directory which is usually located at:
/public html/content/wp-content/themes/<<your theme folder>>/
- Save it to your hard drive.
- Open it your code editor or notepad
- Once open, give it a different name, I’ll just use blank.php, and save it to your computer.
- Now that you have it saved with its new name we need to let wordpress know that this new page is a template. Add the following code to the very top of the blank.php.
**Make sure you are working in the new Blank.php file**
<?php
/*
Template Name: Blank
*/
?>
-
Now we need to change the content section from the narrow class to the wide class. Look for this or similar: <div id=”content” class=”narrowcolumn”>
Change it to this: <div id=”content” class=”widecolumn”>
- Save and close your new blank.php file.
- Upload your new Blank.PHP file to the same directory that you got the Page.php file from:
/public html/content/wp-content/themes/<<your theme folder>>/
- Go into the WordPress admin section, click on “Appearance” then click “editor”. You’ll see your new page listed on the right as a template.
Add WideColumn Class to Your Style Sheet
Now we need to put the wide column class parameters into the style sheet. It might be entirely possible that your style sheet has the wide column class already in it. If it does (look for .widecolum with parameters in the style sheet) skip this section.
- Back up your StyleSheet (Style.css), just in case
- Open up the sylesheet (Style.css) in the word press editor. Now scan through the StyleSheet; everytime you come across a .narrowclass; ( looks similar to this:)
.narrowcolumn .entry {
line-height: 1.6em;
width: 100%;
}
Copy and paste it below the narrowclass column entry, then change .narrowcolumn to .widecolumn. so it looks something like this
.narrowcolumn .entry {
line-height: 1.6em;
width: 100%;
}
.narrowcolumn .postmetadata {
text-align: left;
}
.widecolumn .entry {
line-height: 1.6em;
width: 100%;
}
.widecolumn .postmetadata {
text-align: center;
}
- Continue this all the way through the StyleSheet.
- Now we need to adjust the width of the wide column. Look for this in the StyleSheet:
.widecolumn {
padding: 10px 10px;
margin: 0px auto;
width: 580px;
}
- Change the width to your desired width. I have mine set to 950px
.widecolumn {
padding: 10px 10px;
margin: 0px auto;
width: 950px;
}
- Once you have completed this, update the style sheet
Create Your Amazon aStore Page
Now we are ready to create the new page with your Amazon Store.
- Go to Pages and click “Add New”.
- On the right hand side you’ll see a drop down menu titled “Template”. Select Blank as your template.
- Give your page a Title if so desired.
- Paste you aStore iframe code from Amazon into the page. Make sure you put it in the HTML tab, not the Visual tab.
- Save Draft
- Preview the Page.
- Tweak as necessary. If all looks well your done.
Did This Tip Work For You?
Did it Save You Some Valuable Time?
My wife dumped me and I have brain damage. Any tip would be greatly appreaciated!!!!!




Like






Hello,
Ugh, I liked! So clear and positively.
GlenStef