Tag Archives: wordpress

Improving my blog – 7 Insights you can use NOW

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.

Untitled-4.jpg

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

matsofmatsholmvik.com

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://www.matsholmvik.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!

568474_e-sign

6 Best Blog Sites

Part 1 of 6 best blog sites:

WordPress

Holy grail of blog sites. You got two options, wordpress.com which they host for you or the other one wordpress.org which you download and install on your own hosting and domain. I recommend the last one since you can play a bit more and can’t get kicked out, unless you stop paying for hosting or domain. You have all the options you can think of and a big community to help you,  even professionals if you are willing to pay for it. But it’s a harder learning curve than the others. Check it out!

Twitter

I don’t know if we should call it a blog, but blog is short for web log, so it’s kind of that. You only get 160 characters to play within each “post” so you learn to compress your message into few words and people today have little time so it’s a perfect match. Check it out!

Blogger

The big G (Google) owns this one. It’s easy to start out with, but has some limitations, but if you start out with this one you will see if you have the blogger inside you. Check it out!

Part 2 of 6 best blog sites:

Weebly

This is a cool site, allows you to make 1 site for free. Has a lot of templates readymade for you to use. I used them to be a satellite site for one of my Norwegian blog sites, and it has steadily given me a lot of visitors, it is indexed well by Google. The blog feature is easy to use to a beginner and you can own your own domain, making it look more professional. Check it out!

Tumblr

The tumble log as it is known for is a different type of blog environment with some features that social media have. Good options on importing blog posts from other sources if you are converting to it. Plus for having a great community within and is ability to photo blog if you are more into that. Check it out!

Posterous

Also good importing options here. And you can post much of the same content as the above blog sites. What’s good about it is you just have to send an email to post@posterous.com to start your blog, or post a new one. Check it out!

1and1.com webhosting + wordpress and no auto update / themes / plugins upgrade

Welcome to my blog updating period!

I wanted to share how you can easily get rid of the problem with 1and1.com hosting and wordpress auto update on things like wordpress itself, plugins install, themes install. I have spent the last 3 hours trying to get wordpress to upgrade itself, but always got the page “Downloading update from http://wordpress.org/wordpress-3.1.3.zip…” …. and nothing more. Just a blank page after that. After trying ftp methods and other crappy things to put in the wp config file , I finally found Adam Youngs blog. He have experienced the same, and have the solution to it on the link below. Just 2 simple operations and you and wordpress are playing together again!

I want to thank Adam for sharing this, it made my day!

http://www.adam-young.co.uk/2011/06/02/updating-wordpress-hosted-by-11/

Sincerely Mats Holmvik