Category Archives: Wordpress

Using the Clutterless WordPress Theme

UPDATE: Obviously I am no longer using the Clutterless WordPress theme, I have gone back to the simple TwentyTwelve. I agree that this theme is not as cool or beautiful as Clutterless, but I think it better serves my purpose as a technical coding blog.

Clutterless Blog Theme
Having been using a plain WordPress theme so far this year, I had been encouraged by my friend who runs the beautiful blog Fresh Squeaks to look at a more visually pleasing design.

I liked my friends blog design, but my blog is mostly comprised of longer text posts, so I wasn’t sure the same design was suitable for me. I needed a blog design which wouldn’t rely on lots of images.

Unfortunately, most of the more modern and original blog designs do rely on you to have beautiful photos or illustrations to post, but there was one theme I came across which seemed just right. I downloaded the free version of the clean, modern, Clutterless design, a beautiful blog theme that focusses on text content. The paid version is only $9 so I thought that if it works out for me, it would be very affordable to upgrade (hmm, Question: if you upgrade, do you lose any hacks you made on it so far?).

Although I didn’t want a ‘traditional’ blog look, I did want a lot of normal blog functionality, and navigation is very important to me. So in my sidebar I have used the normal ‘categories’ menu (which I think I need to clean up) as well as links to my static pages (About and Resources), and also Twitter and LinkedIn.

I had a few initial problems with the theme which had me reconsidering it, but after trying again to find a beautiful text-suitable design,  I couldn’t find anything nicer than Clutterless, and decided to stick with it and try and hack away my concerns.

Firstly, I was surprised that the theme I downloaded would not allow me to click on the blog post headings (maybe I did something wrong when uploading?). Completely strange – but I just went into the theme templates to find where the headings were, and changed the php to make them clickable.

The second problem I found was that the URLs were a bit crazy – for example if you tried to navigate to a blog post, instead of going to

http://www.tracecode.com.au/blog/forking-and-cloning-on-github/

It would go to

http://www.tracecode.com.au/blog/#/blog/forking-and-cloning-on-github/

This is probably because Clutterless was designed as a one page theme. There were a couple of problems with having the URLs doing this.

1. That the URLs would be harder for people to copy and paste. Well, not really harder, but weird looking, and I didn’t like it.

2. That it might not be as good for search engines (I mean, it probably would be ok, but just not ideal)

3. In my Analytics it wouldn’t show the actual posts people were looking at, since the root URL would stay the same no matter where a visitor navigated.

To fix this problem we looked at the source of the page to see what JavaScript files were being executed. There were 5, and without a whole lot of JavaScript knowledge, it seemed a good idea to just go and change the name of those files one by one, (rather than remove them, just in case), and see when the problem was fixed. Luckily for us it was the first one – Ajax.js! We just went in and changed the name of it, and the problem stopped straight away.

Yes, this is just a hack – but that’s all I need at the moment. So if you have this problem – you can try that solution too!

Other issues I have with the theme right now, but which I am sure I can change when I have time;

  • Will people be savvy enough to click on that little blue tab on the left? I can’t easily change it to say something like ‘Pull Me’ because currently it just takes the name of the blog – but I’m sure this can be changed in the templates
  • This is a H1

    This is a H2

    This isn’t exactly how H tags usually go

  • I would quite like for the body of this text to be a bit wider
  • I have seen in some of my older posts that some of the text is randomly given a slightly different style
  • Although I have chosen in my reading settings to show only a summary, it seems to be showing the whole post in the home page feed. I prefer to make it easier for people to browse by having only summaries – so I will need to investigate this.
  • It doesn’t by default allow comments (it is a ‘clean’ design after all), so I am going to have to go and do something with Disqus or something.

Having said all that, I still love, love, love this blog theme, and will keep playing around with it.

4 Replies

Understanding WordPress Part 1

So, here I am, going along with all my coding training, thinking I am pretty hot sh!t, because I have this streak going, all these points and badges, and I decide – you know what? This streak needs to be recorded for posterity, maybe I will just start a blog to talk about everything I am learning, and use the site to practice and build heaps of awesome things.

So I toddle off to Zuver and get my domain and hosting ($20 all in! Trace loves a bargain) – and download WordPress into a blog folder. My confidence is still sky-high because I have been using WordPress for a long time for work, and think that soon I am going to have the most super-beautiful blog the world has ever seen.

Well. I have given up on that dream for now. Yes I know how to post and make pages and change settings – but understanding how to customise this thing is doing my head in.

After messing around for a while trying to figure out how to make the theme I really wanted suit what I need it for, I have gone back and decided to use a free, very simple WordPress theme – TwentyTwelve (insinuating that it is soon to be usurped). I’m not even going to put on background images yet. 

The fact that there are tens of thousands of people who are using this thing efficiently and clever-ly is making me feel dumb. So I am going back to basics to try and get a better understanding of what WordPress is. I got this infographic from Yoast - WordPress expert.

Understanding wordpress

Courtesy of Yoast – the WordPress SEO experts. I have been reading Joost de Valk’s blogs for years (don’t let my non-expertness be a bad reflection on his site).

Ok, so let’s have a look-see here:

The Template Files – Header, Footer, Sidebar and Loop

Yep, ok, header, footer and sidebar are the template files which show how your site is displayed. I think I have these under control and know where to change them if I need to. But what is this thing called ‘The Loop’, for the body?

The display of contents of the main area of your site are controlled by individual template files using what’s called ‘the loop’. 

I need a bit more help on this explanation, (ahaha, it is the most basic concept of WordPress and I had never even heard the term used in relation to WordPress before! Confidence!).

Further down in their infographic, they have a deeper explanation, but I am still finding it confusing, so instead I head over to WordPress.org. After having a little read, this is how I think the loop works (for anyone else, I am sure the Yoast explanation is better!)

The Loop is PHP code used by WordPress to display posts.

So,it is another php file, which determines the template for how each post looks.

 For example, The Loop displays the following information by default for each post:

It is called the Loop, because it is an if/while loop, and its structure looks something like this.The Loop

First it checks if there are any posts with the have_posts function. If there are posts, then a while loop is executed.

The function the_post takes the current item in the collection of posts to make it available for use inside the iteration of this loop.  Then the template can start showing data for that post (e.g. heading, author, time of post, etc).

The next function, the_content, fetches the content of the post and displays it.

I think that is enough for me to try and digest right now – the main meat of the WordPress template – the header, footer, sidebar and loop (body). If you want more information, the wordpress.org site was very helpful or you might want to read this article from Net Magazine.

Other php Files

Index.php

The default home page php file shows a loop of your most recent posts, but can be changed in settings->read to have a separate static page as a home page (e.g. ‘Welcome’), and simply link to your blog posts from a menu.

Single.php

This is the php file used for displaying a single post.

Page.php

This decides how pages are displayed. So you can make unique elements for pages vs posts. You don’t need to have all your pages look the same, you can have various page templates. So, when making a wordpress site, you could have a template for ‘services pages’ another template for ‘about us’ pages, etc.

Functions.php

This is the file where you can put your own custom code – so if you want to change the theme around a bit more majorly – e.g. extra sidebars or changes to the wp-admin interface.

Other php files to change the look and feel of parts of your WordPress site are archive.php, tag.php, comments.php and category.php.

Style.css

The stylesheets for your WordPress site-  yep, I get this.

Extras

Plugins

Free plugins made by the WordPress community can enhance your site – e.g. ecommerce plugins or social media plugins.

Custom fields

These are extra fields included in your post/page interface within WP-Admin – in my role I have often seen them used for SEO plugins or javascript includes.

Widgets

Widgets are the things in your sidebars, and while there are many already included, you can use php or plugins to add more.

The end

Ok, so that’s the end of the Yoast infographic. It’s been helpful, but apart form understanding the idea of ‘The Loop’, I think I had known most of this. What I want to know more about is how to learn how to change and customise it.

I named this post Part 1 without immediate ideas of my next post, just knowing that there will be another.

Maybe I will dive into WordPress.org for lessons or this other site for WP beginners.

 

Leave a reply