Welcome to my new custom WordPress blog.
Or a recounting of all headaches required to make this process a success.
Posted by on March 12, 2017

For those of you who made it this far into my website, I would like to say, “Welcome to my new blog addition!” It has been a good three months from the point that I decided that I would maybe like to add a blog to my website, to building out a custom WordPress theme to make that idea a reality. I had previously followed a tutorial that turned a very basic website into a WordPress theme, but my site was a little more complicated, and I just didn’t want the accompanying headaches that would ensue trying to iron out all of the issues on my own. I had looked at various ad-hoc blog solutions available, or basically just tacking on a functioning blog to my existing site. It seemed that I wouldn’t be able to avoid a database-driven solution of some sort, however, plus I also wanted a seamless design that didn’t look like I cobbled together two different websites. The solution to my problem just kept coming back to WordPress.

Well… here we are three months later. There were plenty of  headaches to be sure, though not half as many as I had anticipated. If you would like to know more about how I got here, read on.

Bootstrap to WordPress

My website is built using the Bootstrap 3 framework, so I was wondering how a transfer to WordPress would go (if you are not familiar with Bootstrap, it’s a great responsive framework for building responsive websites quickly, check it out). I didn’t want to lose the responsive nature of the website, and I didn’t want to bog down the site with needless database queries for pages that didn’t utilize the blog structure inherent to WordPress blog sites. Surprisingly to me, this was a fairly straightforward process, that only elicited a few hiccups along the way. I would like to give a big shout out to Adam Burkenpas. He has some great tutorials over on YouTube for transitioning a Bootstrap website into a WordPress theme. He really got me on the right path to figuring out what I needed to do to get my WordPress theme up and running. You probably won’t find an exact solution to your particular project by following along, but he can definitely get you in the ballpark.

Navigational Issues

My first big hurdle was figuring out how to develop the navigation. My initial website was a single page portfolio that used easing animation to scroll smoothly from one section to the next. This configuration wouldn’t fly, though, when adding additional pages. I was trying use the navigation one way on a certain page, but another on the “blog” pages. This runs counter to how navigation works in WordPress (without the help of a lot of javascript) and isn’t great user design, either. As a result, my first theme attempt went down in flames. I was forced to go back to my initial site design and rework the navigation, and “Viola!” I was back on track. What started out as a single page site, became three main pages, plus the individual post pages.

Dealing with Plugins

The next issue I had was figuring out why some plugins worked and others didn’t. As it turned out this resulted from a number of issues. One problem was that some plugins didn’t work with the default version of JQuery that WordPress calls. I needed to deregister the default version of JQuery and then register and enqueue an earlier version of to make sure all my plugins worked correctly.

Registering and Enqueuing earlier version of JQuery in WordPress

*Deregistering the default version of JQuery and registering and enqueuing an earlier version.

The other part of the problem I was running into was that some plugins were being called when not used, throwing an error, and then causing other plugins not to fire as a result. To fix this issue, I needed to write in a conditional statement to enqueue certain plugins only on specific pages (i.e. the plugin to make the comments section operate correctly only needs to be fired on the pages with blog posts or the Google Maps API is only called when viewing the Home Page). This problem ultimately helped me gain some understanding about creating the functions.php page, and ideally, the less plugins being loaded on a page the faster said page should load.

Conditionally enqueuing the comments plugin.

*Conditionally enqueuing comments plugin if on a post page, if comments are
allowed, and then if nested comments are allowed.

Template Confusion

Visually chart of the WordPress template heirarchy.

*WordPress template hierarchy, courtesy of WordPress.org.

One of the problems I dealt with that took a while to sink in was the template heirarchy of a WordPress site. This is a little confusing as a newcomer. In static web design, your index page is your home page. In WordPress the index page is the fallback page that is loaded when all other pages can’t be found. The Admin area under Settings > Reading helps you out with this somewhat by allowing you to designate whether you have a static homepage or if the blog is also on the homepage. I think the takeaway for me that would have made it easier to understand is that you can name your pages whatever you want in the Admin, but when building out your templates, if you have a static homepage (home page without a blog) you call that template front-page.php, and you call your blog template home.php. So my static Home page calls the front-page.php template and my Blog page calls the home.php template, but if my home page also contained my blog, then I would omit the front-page.php template all together and just use the home.php template. No chance for confusion, right! By the by, you can read all about the template hierarchy, as well as find the image above by going to WordPress.org, or just clicking here.

After having said all that, it should be noted that when you are not dealing with a static front page or a blog page, you can name your templates in a PHP statement in the template and then assign that specific template via drop down in the Admin area when you are creating your pages.

Adding a name to a WordPress template.

*Naming the template to be called later in the Admin when creating pages.

For instance, my website has a Portfolio page. While I named the template for the Portfolio page portfolio.php, I also set a name “Portfolio” in a statement in the template. Once I created the Portfolio page in my WordPress admin, I then selected “Portfolio” from the template drop down menu to assign that specific template.

Page Attributes section of the Pages section of the WordPress Admin area.

*Selecting Portfolio template in Admin when creating Portfolio page.

Understanding the template hierarchy also helped when building out the pages for the blog. Your home.php template deals with the collection of blog posts, but the template for each individual post is named single.php. If you have a clickable name for the author of the article you can set up an author.php template, and if you plan on allowing commenting for your posts then you need to create a comments.php template to handle that.

Making Comments

The last real issue that I had was dealing with the comments section. It wasn’t so much a problem, as figuring out how to implement it and figure out why the comments plugin that comes with WordPress wasn’t working. The plugin, as it turned out was broken for the reason I mentioned above, where another plugin was being called on a page that it wasn’t being used on and throwing an error that caused the comments plugin not to fire. That was an easy fix. For the rest, I want to thank Austin Gregory at AwfulMedia. I just needed help with the comments section, but he provides an easy to follow set of videos on Youtube that walked you through the whole process of setting up a responsive WordPress site. With his help I was able to generate my own custom comments section and style them the way that I wanted.

All in all, this process has been very rewarding. I have been wanting to write some articles about my experiences for others that are getting into Web Design/Development. This required that I step out of my comfort zone a bit to achieve my goals. It was three months of battling through issues that I didn’t have a whole lot of experience with, but it ended up being a three-fold win for me. One, I have my seamless blog. Two, I have opened up a whole new level of skills and understanding about creating custom WordPress themes that I can now provide for my clients. Three, I can write about my experiences on my blog in the hopes that I might be able to help other folks with their projects. Circle of life!

See you in the next post.

Post a Comment

Your email address will not be published. Required fields are marked *