I’m an electrical engineer, programmer, and entrepreneur already so by the time I get to actually updating my website I want to push the “easy” button. You might be saying, “Lee, it’s not that hard to write content, format it in HTML using Atom IDE, and then upload it to your website using FTP!”

 

Yeah, but I’m tired. Even right now, as I’m writing this, I’m tired. I typically write when I’m done with a full day of work already, which oddly enough includes writing and programming. Using a word processor like WordPress’s visual editor makes updating a blog tolerable. For a breif moment I even considered using Medium!

So that’s what this post is all about. I’m going to talk about how I like to use WordPress.

Plugins, Baby!

WordPress’s plugins are arguably one of the best parts about using WordPress, but sometimes they can be a mixed bag. On one hand they’re god’s gift to all people of the world and the people that make them are nothing less than living Saints. On the other hand you have to sift through alot of plugins and themes before you get the correct mix of functionality right for your needs.

 

For me, I want a happy medium between a word processor and a code editor, which is no small task.

1. APH Prism Syntax Highlighter

First off, I love how GeShi looks, but it doesn’t play nicely with TinyMCE, the visual editor that comes with WordPress. Switching between WordPress’s Visual and Text editors will break whatever custom snippet you throw down. For my code snippets I’m using APH Prism Syntax Highlighter, and I’ve found that it works incredibly well.

 

I don’t think it looks as pretty, but it’s a small price to pay for your sanity.

The best part of APH Prism Syntax Highlighter (other than it doesn’t mess up your code) is that it even has its own icon in TinyMCE!

2. TinyMCE Advanced

Speaking of TinyMCE, if you want a full word processor experience (like I do), then this is a must-have. It allows you to customize TinyMCE quickly and easily. Seriously. Drag and drop customization. Super easy. If you plan on staying mostly Visual, then this is a “must have.”

3. Insert Headers and Footers

You wouldn’t think that this is the kind of thing that I geek out about, but it really is. For my personal blog, I use Ubuntu fonts. In order for me to get my website to display Ubuntu fonts correctly on systems that don’t have Ubuntu fonts pre-installed I had to modify headers to include a direction to Google’s font library.

 

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">

With this, I can then modify my CSS to display Ubuntu font as my website’s font.

 

 

CSS Hacks

 

“Hacks” might not be the right word, but it definitely feels hacky. There’s something about CSS’s code repetition that I don’t like, and how !important is even a thing. Oh well, a couple of things I didn’t want to forget.

1. Post Links are Different than Main Page links

I like the theme that I use for my blog (it’s “shop isle” by the way), but the links display as light gray and black. While this looks fine on my main page, the links on my posts don’t stand out as much as I’d like.

 

body.page .entry-content a,
body.single-post .entry-content a {
color: #0081cc;
}

body.page .entry-content a:hover,
body.single-post .entry-content a:hover {
color: #7ad03a;
}

This only changes the hover colors for Posts, so the feel of my general theme isn’t lost.

2. Font Change

I like Ubuntu’s font. Since I’ve been a daily Ubuntu Linux user, it just feels like home.

 

*{ font-family: 'Ubuntu', sans-serif; }

The above will change the entire website to Ubuntu’s font. Just remember that you have to include the header in the previous section if you want it to appear correctly on other systems that may not have Ubuntu’s font.

 

3. Centering in CSS

Nobody knows why centering in CSS is so hard. Luckily, there’s a website out there to help you remember how to do it.

 

Firefox’s Element Inspector

 

1. Inspector and “This Element”

After a while, you might say, “It’d be nice to know how to edit specific things in CSS.” Luckily, your browser will let you inspect elements, highlight them for you, and allow you to tweak these elements live. Once you have your elements looking the way you want, you can add the appropriate CSS to your “Additional CSS” tab.

 

To inspect something you might want to change with CSS, right click on something you would like to change, and select “Inspect Element” from the context menu. You should get something like the following:

You can make tweaks in the “This Element” section and once you’re done bring them over to your additional CSS section to make the changes permanent.

In this case, if I wanted to make my header title bigger I could add the following CSS:

.shop_isle_header_title h1 a, .shop_isle_header_title .site-title a{
	font-size: 36px !important;
}

In the “This Element” window I can copy the text for the CSS element and then make any changes I want. The !important keyword will ensure that your code will be considered even if its order in the CSS hierarchy isn’t at the most root level.

Changing your CSS this way seems to be the preferable way of modifying a theme since you don’t have to worry about your changes being overwritten if you were to update your theme to its latest version.

PHP modifications should be a last resort, but sometimes it is unavoidable. WordPress suggests that if you’re going to permanently modify anything about your theme outside of the provided “Additional CSS” pane, then you should create a “Child” theme so that your changes aren’t overwritten should you accidentally update your theme.

 

1. Comments Hidden

So, I like my blog being one-way. It’s not that I don’t want to hear from people reading my blog, it’s just that I don’t have the time to really answer people, so I’ would like to just prevent people from even posting. Turning off comments is fairly straightforward in WordPress, and doesn’t require PHP modification, but even when you turn off comments I still kept seeing a “No Comments” link appear on my posts.

 

This kind of irked me. Comments are disabled, of course, there are no comments. There will NEVER be comments.

To prevent this from showing I had to go into my theme’s directory, via my web host, and modify

/wp-content/themes/shop-isle/inc/structure/post.php

And change:

$shop_isle_num_comments = get_comments_number();

		if ( $shop_isle_num_comments == 0 ) {
			$shop_isle_comments = __( 'No Comments', 'shop-isle' );
		} elseif ( $shop_isle_num_comments > 1 ) {
			$shop_isle_comments = $shop_isle_num_comments . __( ' Comments', 'shop-isle' );
		} else {
			$shop_isle_comments = __( '1 Comment', 'shop-isle' );
		}

To:

$shop_isle_num_comments = get_comments_number();

		if ( $shop_isle_num_comments == 0 ) {
			$shop_isle_comments = __( '', 'shop-isle' );
		} elseif ( $shop_isle_num_comments > 1 ) {
			$shop_isle_comments = $shop_isle_num_comments . __( ' Comments', 'shop-isle' );
		} else {
			$shop_isle_comments = __( '1 Comment', 'shop-isle' );
		}

Between preventing the actual section from appearing, and disabling comments, I think that should do it.

Again, you shouldn’t need to change PHP except for situations where there are few, if any, alternatives.

 

Conclusion

 

I’ve found that I’m enjoying using WordPress. I’ll update my post with other things I don’t want to forget how to do, but otherwise, WordPress feels like home. It is easy to use, but flexible enough to be modified with a little bit of effort.