JeannelMah.Rocks

JeannelMah.Rocks

A blog about the adventures of Jeannel Mah

Custom WordPress Templates

So, if you’ve noticed (or maybe you didn’t since its predominantly white), my blog has sort of a custom template. And to do this, I initially thought it involved changing the index.php files in the blog directory.. turns out I did some Googling and this is not the case. I honestly spent an embarrassing amount of time figuring out how to change the default wordpress templates before I became smart enough to Google it =.=”.

So, it turns out that WordPress Templates are controlled by… that folder in the wp-content folder called themes.

I am going to link another tutorial from the same awesome person that created the tutorial I linked previously on bootstrap templates.

In other news, I’ve now got a favicon for my tabs!

The favicon is what this thing is:

The code for this is just, in the <head> part of the code for the header template:

<link rel="icon" href="http://jeannelmah.com/images/JM Logo.png"> 

Simple enough, and it looks cooler.

Getting the blog aligned

My website and my blog have been looking very different for a while. But the main thing I wanted was to get the header and footer of the website aligned with the blog.

So I’ve been playing with this bit of code for a long time, which basically just puts the Header and Footer into the blog template.  It worked sometimes, sometimes it didn’t.

<base href=”http://jeannelmah.com/” />
<?php include(“template/Header.php”); ?>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
<?php include(“template/Header.php”);
?>

<?php get_header(); ?>

<div class=”row”>
<div class=”container”>
<div class=”col-sm-8 blog-main”>

<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();

get_template_part( ‘content’, get_post_format() );

endwhile; endif;
?>

</div> <!– /.blog-main –>

<?php get_sidebar(); ?>
</div>
</div> <!– /.row –>

<?php get_footer(); ?>

The main reason is because the blog template and contents are in different directories from the website one (as it should be). Anyway, there may be some way to automate this, but I’ve just created different template folders in the respective directories and do an rsync every time I update one of them.

rsync -r dir1/ dir2

But well, it works. So my website and my blog look similar now!

Blog:

 

Website:

Also you might have noticed, I drew up a logo for myself.

Its not as symmetrical as I’d like it, but it was the best I could do with a mouse at the point of time. I’m open to anyone helping me recreate it.

Anyway I inserted this into my header file. So in the same directory as the directory that has the template folder, I’ve got another folder called “images” which has two versions of this logo (black and white), inside it in png format. The Header file in “template” folder has a line which looks like this:

<a class=”navbar-brand” href=”http://jeannelmah.com”><p><img src=”http://jeannelmah.com/images/JM Logo white.png” style = “width:21px;height:21px;”>JeannelMah.com</p></a>

The part in bold italics is what inserts my logo image into the header where it does.

Slowly but surely, my website is taking shape.

What is Bootstrap?

If you’re like me, and have a background in Computing, or are just interested in website development, you may have come across the term “Bootstrap” a few times before. And if you’re also like me, slightly dim-witted, you may be thinking: “What the hell is Bootstrap and how do you use it?”

The best way I can describe it is probably, “its a thing that helps you create a mobile responsive design for your website when you have no clue how to go about doing so.” This is important because majority of people look through websites on their mobile nowadays while they are travelling, in bed, at a particularly boring event, etc, and if your site is not mobile responsive, it’s gonna look pretty darn ugly when viewed from a mobile device.

Well, you won’t be getting a tutorial on it from me, because I’m going to link you to one that is better than anything I could write for you. It’s fantastic and goes through Bootstrap step by step, from downloading the Bootstrap framework to customisation.

The tutorial is easy enough to follow, I didn’t have any problems when I followed it step by step (of course, I’m only partially through the tutorial).

But without further ado, here’s what my website looks like now on a web browser:

And how it looks like on mobile:

And for what it is, I am really happy with the result.

Setting up Google Suite

So. Vanity took the best of me and I decided to get an email which ends with @jeannelmah.com.

In my search on how exactly to do something like this, I went to Google for options on how to get it set up. What I found were a couple of options:

  1. I could set up my own mail server, which would be a royal pain in the ass for a scrub like me, I’m already having enough trouble getting my website up.
  2. I could use some free options for host providers just to receive emails. But most of these require some form of configuration with my server, have limited functionality and limited assistance if I needed to.
  3. I could sign up for Google Suites and pay USD5 a month and have access to a bunch of other GSuite apps like Calendar, Drive, etc.

While I was deciding, I went to consult with my confidant and tech-wiz Yong Jie.

 

And he basically told me all that I already knew.

I also asked others…

But after half an hour, I was basically just finding an excuse to fork out USD5 a month for GSuites

 

 

In the end, I succumbed. I took out my credit card and signed up for Google Suites, they had a 1 year plan which is marginally cheaper than their monthly plan ($50 a year as opposed to $5 a month).

I’m not going to write down the whole process of signing up for an account and getting it set up, because it is so easy and they have a tutorial on how to get it set up with your domain.

But! I am going to tell you how to set up catch-all, because I was confused at first, so I think someone else might be too.

Alright, so I couldn’t decide what email address I wanted. reachme@jeannelmah.com sounded nice. connect@jeannelmah.com sounded professional. me@jeannelmah.com is easy as hell to type. worshipme@jeannelmah.com would be amazing. Well, when I was asking around about it I found out that you can actually setup a catchall address, so that anything invalid sent to jeannelmah.com would actually reach me.

So when you log in to the GSuites admin console it looks like this:

 And this is the path that you should go through:

Once you’re at the page, look for this topic:

There is a topic called “Default Routing” above this which talks about catchall, ignore that and just scroll all the way down to find “Advanced Settings”, then scroll all the way down General Setting and look for Routing:

Edit the settings for this, select (unrecognised/catch-all) for account types to set, and set the email that it will be sent to.

Voila, now you’ll receive emails sent to your domain no matter what comes before the @___.com!

Two sites, 1 droplet

So I’ve now got two websites. Finally I’m doing something with my other domain name, jeannelmah.com, which I bought almost a year ago. (Yes, I spent ~$11* on it and left it sitting there for almost an entire year, sue me.)

*Prices on this blog are in SGD cause I’m Singaporean and living in Singapore

So here is the breakdown of my two sites:

jeannelmah.rocks  – Basically my blog. This blog that you’re reading now. The TLD is for vanity, cause hey, I rock.

jeannelmah.com – This is going to be my website. I’ve not decided what I want to do with it yet. I might make it similar-ish to Yong Jie’s website, with a link to the blog and my resume. Probably not with the big background image of *me*, I don’t like to see my face very much.

Alright. So lets get talking about how I set up the two sites on my single, $7/mth  Droplet.

First, I followed this tutorial, and also changed the IP where my domain jeannelmah.com was pointing to (which took a few hours to propagate. So if you change your IP, don’t fret if its not going exactly where you want immediately.

2016-09-21-17_50_17-chrome-err-connection-refused-google-search

If you see something like this after changing your IP, don’t worry too much. Wait a few hours (up to 24), DNS needs time to propogate

After that, I had another problem. The domain was pointing to the correct server… but not to the correct page. It was showing my blog instead of the blank white page that says “TEST Jeannel” on it.

2016-09-21-17_58_19-jeannel-mah-just-another-wordpress-site

Yes, this is how my .com website looks like now, and in the foreseeable future.

And so, I journey back into /etc/apache2/sites-available to see what’s wrong. And there was nothing wrong with how it was configured (I even sent screenshots to Yong Jie to double check). The fix…. all I had to do was restart my apache and it was fine. Damnit.

“Did you try turning it off and on again?”

~sudo service apache2 restart, 2016

So all would be well once everything is nicely configured right? Not quite. Turns out, while I could get to my blog, I couldn’t get to my wordpress admin login page.

Oh no! I won't be able to blog anymore!

Oh no! I won’t be able to blog anymore!

Why did this happen? Well, when I initially set up my wordpress, I hadn’t assigned the .rocks domain name and it was using my IP address as the wordpress URL (so the admin page was at “(My IP Address/wp-admin). Since now the default settings (where my IP address points to, and where typing my IP address in the browser will bring you) was pointing to a different Document Root, it can’t find (Default Document Root/wp-admin). This can be fixed by pointing the 000-default.conf file to the right document root. I also subsequently changed my wordpress settings such that jeannelmah.rocks is the wordpress URL.

Next Steps: DO SOMETHING WITH JEANNELMAH.COM