EDIT – With the newest version of WP a lot of this doesn’t apply anymore. The newest version of WP comes with some of this functionality right out of the box.
I love me some WordPress.
Initially, I started with a WYSIWYG editor and pure HTML because I didn’t want to spend that much time working on web development. After some tinkering I discovered Bootstrap and I thought it made web development incredibly easy. It didn’t take very long to get rolling with Bootstrap (several days to develop a decent looking site), but it was exhausting to maintain. I couldn’t keep up with operating a full site. As soon as I finally got it looking right on my desktop, something would break on the mobile version and vice versa. I think for companies that want to have a very responsive site and can also afford to hire a web developer Bootstrap is still probably the way to go.
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!
For me, I want a happy medium between a word processor and a code editor, which is no small task.
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
3. Insert Headers and Footers
<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.
Ninja also has a pretty good drag and drop forms creator, and allows for customization. It’s not as user friendly, but it’s not difficult either.
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; }
*{ 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.
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.
1. Comments Hidden
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.
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.