We were new to WordPress when we decided to build this site and we thought it might be useful for other authors if we made a record of exactly how we did it. This is in order of how we did it, but some things can be done in any order.
List of all plugins used on the Wittegen Press site - click to expand
- Installed WordPress
- We are hosted at Dreamhost who offer WordPress as one of their one-click installs. Note from Tasha: This is honestly the easiest install I have ever had to to do.
- Choose a Theme
- We looked into using a specialised theme instead of a plugin to do the book pages (see later for details), but we decided to go with the default WordPress theme of Twenty Fourteen.
- We changed how it looked by creating a child theme (click for detailed instructions), although we found out later that a plugin (Jetpack) also gives this option in an easier manner.
- Changed the Header
- You might have noticed at the top of our site, above the top menu, we have a graphical header. We set this up by generating the header graphic (we chose a jpeg, because we wanted a solid colour background, if you want transparent, then png also works) – suggested width is 1260px, and their suggested height was 240px, but we thought this was way too big for out layout, and went with 60px. Then under Appearance>Header, we loaded this up as the header image and deselected, Show Header text with your image.
- Installed two plugins:
- Jetpack, which offers functionality that used to only be available on a WordPress.com hosted site – you will need a wordpress.com account, but setting one up is free.
- WP Super Cache – this makes the site a lot faster (but be aware if you make changes and this is active, the changes won’t show immediately – to do so you need to empty the cache under the plugins setting. I recommend you don’t activate this plugin until you have finished the first version of your site).
- Next we played with the layout of the theme. To do this we used the following methodology:
- Inspected the element using Google Chrome and found where the class/tag we wished to change was.
- Put the new CSS into Appearance>Edit CSS, which is the functionality given by Jetpack (you could use the child theme if you preferred).
- Next we investigated options for creating the book listings we wanted. These are the various ideas we considered:List of options - click to expand
- Literary theme – nice, but not quite enough and book editing was in two parts and one part did not allow short codes properly so couldn’t do lists.
- Book Review plugin – very nice for book reviews, but no pricing info options (integrates with Goodreads API)
- Book Review Library plugin – another good plugin, but once again lacking some of the things we needed.
- MyBookTable – this is the one! It’s brilliant. Has everything we need including pricing and purchase buttons. Only drawback is that to get full functionality you have to buy a key, however, most people could probably use the free version with no problem. The one thing we really need is custom buy buttons, but if you’re only worried about one market like the US you don’t need them. The pro version also offers Amazon and B&N affiliate integration
- In MyBookTable added in the following content (the order is arbitrary except for books which uses the other three, so decide on them first and do books last – you can add the other types of information inside books, but it may lead to mistakes):
- Series
- Genres
- Tags
- Books
- Customised the look of MyBookTable:
- We didn’t like the buy button size so we created our own (it’s very unlikely you will need to do this, but we’re putting this here for completeness):
- Made a copy of the Default image directory (/mybooktable/styles/Default) into the same root directory and named it “Wittegen Press”.
- Created the size of buttons we actually wanted to use and put them in the new directory.
- Uploaded the new directory to the server.
- Switched to that style in MyBookTable>Settings>Display Settings in the WordPress Admin panel.
- Under Appearance>Edit CSS added in the new sizes for the buttons like so:
click to see the css code#mbt-container .mbt-book-archive .mbt-book .mbt-book-buybuttons .mbt-book-buybutton img {
width: 74px;
height: 28px;
}
#mbt-container .mbt-book-archive .mbt-book .mbt-book-buybuttons .mbt-universal-buybutton {
font-size: 11px;
line-height: 8px;
padding: 4px, 8px;
width: 55px;
min-height: 16px;
}
#mbt-container .mbt-book .mbt-book-buybuttons .mbt-book-buybutton img {
width: 74px;
height: 28px;
}
#mbt-container .mbt-book .mbt-book-buybuttons .mbt-universal-buybutton {font-size: 11px;
line-height: 8px;
padding: 4px, 8px;
width: 55px;
min-height: 16px;
}
.mbt-featured-book-widget .mbt-book-buybuttons .mbt-book-buybutton img {width: 69px;
height: 28px;
}
.mbt-featured-book-widget .mbt-book-buybuttons .mbt-universal-buybutton {
font-size: 11px;
line-height: 8px;
padding: 4px, 8px;
width: 51px;
min-height: 16px;
}
.mbt-featured-book-widget .mbt-book-buybuttons .mbt-book-buybutton {
padding: 3px 4px 0 0;
}
- We didn’t like the buy button size so we created our own (it’s very unlikely you will need to do this, but we’re putting this here for completeness):
- Discovered SmartURL thanks to the MyBookTable support forums – this is a great way to create a URL for something like Amazon which will then redirect people to their country’s site. You can create an account with email or Google or Facebook so it is really easy.click to see image of smartURL
- Spent a day adding in all the smartURLs required for the site ( have over thirty books on multiple resellers, which is why this took so long).
- Added all the buy buttons to the books in MyBookTable (if you are using smartURL you need the pro version of MyBookTable, because you need the universal buy button to be able to use the smart URL).
- Added HungryFEED plugin for embedding RSS feeds directly into pages and posts (you can see this in action on the author pages, where we’ve embedded feeds from our personal blogs).
- Added MailChimp plugin for newsletter integration.
- Made a page (we called ours Welcome to Wittegen Press) for the front page and changed it under Settings>Reading so Front page displays is now set to static page and this page is shown when users first enter the site.
- Made a blank page called “blog” and under Settings>Reading set it to “post page” so can now see all blog posts in one place using that link.
- Added Display Widgets plugin to allow individual widgets to only appear on some pages. This is useful if you wish some menus to only appear on some pages etc, this is true of our blog, since only when you view the blog page do you get the ‘Subscribe to blog by email’ menu.
- Added amr shortcode any widget plugin to allow use of widgets in posts and pages with the use of shortcodes. See the plugin’s own documentation for details.
- Added Remove Widget Titles plugin so widgets do not have to display their titles all the time.
- Added Menu Social Icons plugin so we could have the nice social media menu with icons at the top of the page.
- Added Arconix FAQ plugin so we could have a nice FAQ page.
- Added Collapse-O-Matic plugin to allow collapsible content in other pages and posts using shortcodes. This plugin has been used on this page as illustrated here: click the arrow - you know you want toHow can you not love a plugin whose FAQ references not only Star Wars, but Star Trek, Battlestar Galactica and Highlander?
- Migrated static pages from the previous site by creating new pages and inserting the content. Some of these pages are where we used the power of the plugins.
- Created menus for the pages and books using Appearance>Menus (n.b. if you want to be able to see all menu options available then look at your Screen Options at the top of the page – took me ages to find this the second time when setting up a test site)
- Placed the menus in the correct places using Appearance>Widgets n.b. some of the plugins give you automatic widgets which are very useful.
- Installed the Cookie Law Info plugin to add cookie information to comply with EU law.
- Followed all the instructions with the plugin to figure out what cookies and information to add.
- Added iThemes Security plugin following the tutorials on the plugin site because they are very thorough and easy to follow. This plugin helps you to secure your site from possible hacking.
- Added WordPress SEO to help with search engine optimisation for all pages. (N.B. if you get a 404 error when using your sitemap index XML option check this Yoast page for the solution).
- Used the 404 monitor option in iThemes Security to analyse which page addresses from the old site were still being hit and added them to the .htaccess file to point them at something sensible.
If you have any questions about this process, please feel free to leave a comment below.
Thanks for finally writing about > How We Built This Site | Wittegen Press < Loved it!
Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword….wait there’s even more Now what if i told you there was a simple WordPress plugin that does all the On-Page SEO, and automatically for you? That’s right AUTOMATICALLY, just watch this 4minute video for more information at. Seo Plugin