First off, thanks for visiting my brand new blog. That’s what I think of it. The design is different, plugins have made it a better experience for you. And I am really happy for the blog and the future of it.
So what have I done to it?
1. Theme
I changed from the theme called Max Magazine by Sami Ch. It’s probably a good theme, but my modifications in the past made it look ugly and not good. I didn’t like it anymore, in addition to that I haven’t worked for the past few months, CSS didn’t load and the images on the front page didn’t show up.
Back to basics. What’s new with the Twenty Twelve theme from the WordPress team? It looks good, had to update the theme to get it to the latest version, no hassle just plain and simple update.
But I didn’t like it the standard way. I wanted to put in a new header, change the placement of the menu and some appearance.
2. Header
Made a new logo as you can see on the top, name of the blog and some icons to represent what I want to write about. Did it with a logo creation software I use and modified it further in Photoshop to get the whole header good looking. Not 100% satisfied with it, but maybe time will tell me what to do with it.
Had to crop it to 960 x 250 pixels in Photoshop before I uploaded it. After I saw it on the blog, it didn’t look good. Lots of whitespace around it, and far away from the top. It was also placed under the menu. Not good.
MENU
To move the menu beneath the header you have to change a theme file.
You need to find this part of code in the Twenty Twelve theme file header.php:
<?php $header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”><img src=”<?php echo esc_url( $header_image ); ?>” class=”header-image” width=”<?php echo get_custom_header()->width; ?>” height=”<?php echo get_custom_header()->height; ?>” alt=”” /></a>
<?php endif; ?>
And move it right above the part “<nav id=”site-navigation” class=”main-navigation” role=”navigation”>”
Then the menu and header switched places. All good, but what about all that whitespace around it?
In some themes you have a special CSS field under Appearance in WordPress. Here you can put custom CSS settings, that override the theme settings, since it is loaded after everything else.
My custom CSS settings look like this now:
img.header-image {
margin-left: -40px;
margin-top: -24px;
width: 1040px;
max-width: none;
}
h1 {
color: #ff8b02;
font-weight: bold;
}
a {
color: #ff8b02;
}
body {
font-family: “Calibri”, Verdana, serif;
}
The img.header-image is for the header. Set a margin left to -40 pixels, margin to the top by -24 pixels and a width of 1040 pixels. Making it fit perfectly in the content area. But then the image was blurry, because of the 960 pixels it recommended. So I had to go back to Photoshop and get a new one like the header is today. So it’s now 1040 x 114 pixels. Perfect match.
Then I added a new color to h1 tags and links, to go away from the standard blue to more of an orange color, just to stand out of the crowd.
But still there was a gap between the content area and browsers top. I found out that in the style.css file of the theme there was a setting I could change.
This part here:
body .site {
padding: 0 40px;
padding: 0 2.857142857rem;
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
I changed margin top to ZERO pixels and the same for the margin top rem to zero. Then the gap was gone.
The design of the blog is starting to be as I wanted it in the first place.
3. Picture of me
Lots of bloggers like to post pictures of themselves. It’s not because they like themselves so much, but more that you can relate to them and see who is behind all these words and pictures.
I found a normal looking picture of myself from a holiday in Christmas. Used Photoshop to crop it, make a black line around it, stronger colors and added some friendly text on it. Doesn’t it look nice on the sidebar?
You can add images to the sidebar by going into the Widgets part in WordPress admin, and there should be a widget to add images in the sidebar.
4. More sidebar
My sidebar had an outdated Twitter plugin to collect my tweets and that was almost it. So I added some stuff to make the site more alive and interesting to your readers. Like adding my top posts, a search field, recent comments and my own little tag cloud so you can see what I write most about. I hope it will be useful to you.
5. Updates – damn those updates
I will recommend everyone to check on their blogs to see if there is some updates to WordPress, themes and plugins. Most of them are updated regularly and will prevent your site from crashing or be hacked. So do it today, go update. I had about 17 plugins to be updated, along with my themes and WordPress. But it went smooth, but in case something go wrong when you do it, remember to backup everything before you start. I once had to manually put in every post after a crash in the early days of WordPress, which is not fun.
6. Plugins
I missed some parts of the blog that I have on my Norwegian blogs. So I compared the plugins, and found some I had forgotten.
WordPress RelatedPosts – to get some related posts showing under the post you are reading
WPtouch – to get your blog to look good on mobile devices
ShareThis – To add sharing buttons to social media under your posts, and on the right side of the browser.
Google XML Sitemap – more about this in the nest section.
As you can see, these plugins make the site overall a much better experience to visitors, like you.
7. Sitemap
Since I found out that I had forgotten to add Google XML Sitemap, I wondered if posts even got added to the search engines. I published a post earlier today, which was in Google about 30 seconds later, which is pretty good. So no worries about that.
I made the correct changes to the plugin, so my sitemaps for pages, posts and categories was created.
Then I headed over to Bing Webmaster tools and Google Webmaster tools. I had to add my site to both places, since I hadn’t done it before. Verified my pages, so they know I own them. Then started to add all my sitemaps to them to get indexed.
I also created a Sitemap link in the footer of the page to notify other search engines about it if they want it. You can do this in the Appearance -> Editor and find the file footer.php. In the file find the part in the theme Twenty Twelve where it says “</div><!– .site-info –>” and add this text right above it “ | <a href=”http://matsholmvikcom.wpengine.com/sitemapindex.xml”>Sitemap</a>“. But remember to change the href link to your sites Sitemap.
Done for today
I hope you got some insights in what can be done with your site. If there is some parts that lacks explaining, just hit me up with a comment and I will try to help you. Have a great day!