Website Reboot: WordPress Themes versus Bootstrap Templates

subject to technical issues

Based on my previous frustrations with Drupal, I decided to use a theme to launch my website. That way I can focus on creating websites and JavaScript projects, and I will redesign my website later when I have more experience. Well, that was the plan, but content management systems decided that I should just go ahead and make my own HTML file. The following describes my journey of reaching this inevitable conclusion. Consider that my trigger warning because this journey contains some potentially distressing material.

Attempt 1: Drupal Themes

My journey didn’t start out bad. In researching about themes, I discovered that customizing a theme or template is a great way to build a portfolio because clients often don’t want to pay for a website built from scratch. Instead, they will ask you to modify or customize a theme or template. Also, it makes more sense to use a content management system for a website that is constantly updating or generating new content or for a project that requires several people to simultaneously work on the code.

With this new information, I was excited about downloaded and installing Drupal 8’s Parallax theme. I even had some success: I added a basic page and menu for all the pages I wanted to create on my website.

But here is where my Drupal story takes a turn. I started having trouble modifying the blocks, which are boxes of content that can be displayed in regions on the page. Some of the blocks would not let me edit them, and others made the changes but it did not look how I wanted it to look. I tried to play around and figure it out, but eventually, I turned to tutorials and I quickly realized that I needed to go in and edit the code for several files within the theme to make this website my own. I’m sure there is an easier way to do it, but I’m not that familiar with Drupal 8 yet. For that reason, I decided to cut my losses and just use WordPress for my freelance writer/developer website. I know I can return to Drupal later when I’m more confident in my front-end development skills.

Attempt 2: Installing Two WordPress Themes

WordPress is easy, right? Yes, it typically is, but I created a special problem (because I’m masochistic). I have a domain (lindseynphillips.com) and subdomain (blog.lindseynphillips.com). The subdomain already has WordPress installed and running. At first, I tried to install WordPress (using the easy one-click install feature) in my public_html folder so I could use it for my main domain as well, but in doing so, I run into trouble logging in to my administrative page.

Then, I tried to manually install WordPress—I mean, I feel like I am an expert in this after manually installing Drupal so many times. This time I ran into trouble because WordPress said that I already had installed it, and I realized that the one-click install created a SQL database, and I manually created another one. I wasn’t sure if that was the issue or which of the several SQL databases I needed to remove.

The last time I tried to remove a SQL database, I accidentally deleted my entire public_html folder. Rookie mistake! I wasn’t willing to take that gamble because I’ve grown attached to my blog, and that folder is inside the public_html one. I proceeded cautiously and contacted tech support from my hosting site, which was also slightly a gamble because I’ve had a 50/50 success rate with them. The woman I chatted with was helpful and told me to click on a link and reinstall WordPress. I’m still not sure what was wrong or how this link and new install magically corrected the previous problems, but I was finally able to log in and see the WordPress dashboard admin page.

Attempt 2.1: All WordPress Themes Are Not Created Equal

WordPress has no shortage of themes. I looked for hours and finally found one I liked: Latte. In downloading this theme, I learned a valuable lesson: free WordPress themes can be dramatically different from the paid versions. Of course, the demos are always the paid versions. But when I downloaded the free version of Latte, it did not have the portfolio section that I loved. That was only available on the “pro” version.

After downloading my third theme where the free “lite” version did not stack up to the “pro” version, I started looking for themes that did not have this distinction, and I found a great one: Illdy. It met my new criteria: No Illdy Lite. Check! Looks like the demo. Check! I was back in business.

I can see why this theme is popular. It is easy to use. You just click on the section you want to modify and type in the new information and voila!

Attempt 2.2: Debugging and Modifying a WordPress Theme

When I was younger, I loved movies about mythology, and often the gods watched and interfered with humans through looking-glass water or a model-sized world. The gods would move the humans around like chess pieces—for their own amusement—to see how the humans would get out of the situation they put them in.

In the middle of the process of modifying themes, I started to feel like the gods were messing with me to see (and laugh at) my reaction. My ease at modifying this WordPress theme ended when I encountered a few problems (or bugs). I removed three widgets in the footer that I didn’t want, but they were still there. I also removed the Address and Contact sections because I don’t want clients showing up at my house, and the section titles were still there. Ghost code is the worst! Obviously, there were some bugs within this theme, which made customizing it difficult.

But this problem was an opportunity to use my coding skills and change the code in the PHP files. Plus, it would help me learn PHP. After a day or two of tinkering, I fix several of the bugs.

The theme uses periods as dividers, and I guess the grammar is still in me even though I’ve stopped editing because the period-shaped dividers in the jumbotron did not work for me.
website with words writer developer blogger with only two periods as dividers
Yes, something is missing! I loved the yellow periods dividing the white words, but I wanted the third one to have it as well, but the theme did not allow you to add one. Of course, that wasn’t going to stop me. I went into the code and found <span class="spot-dot”> for the yellow period, so I added this to the third word in the jumbotron section, and it was fixed. I’m using my coding skills to fix grammatically style problems. You can call me the virtual “Banksy of punctuation.”

Changing the URL of the blog was also problematic. Even though the theme contained a button for the blog, it did not have a place to change the URL for it, so I added the following code.

$blog_page_id = get_option( 'page_for_posts' );
$button_url = 'blog.lindseynphillips.com';

It worked. It didn’t open in a new window, but apparently in PHP, that is a more difficult task than inserting target=”_blank”.

As I mentioned, the theme contained several footer widgets that remained on the website even after I removed them. So many bugs, so little time! I found the section in the PHP code, and I commented out the entire PHP document using the comment tag that starts with /* and ends with */.

That worked, but it also deleted my WordPress dashboard and some other section footers on the website. Back to the drawing board! I called in reinforcements, and Arturo helped me read the PHP code to figure out what needed to go and what needed to stay. I found the specific sections I did not want and commented them out. In doing this, I discovered that to delete partial code in PHP, I have to start a comment with <!– and end with –>.

The Contact section had a place to change the title from “Contact Us,” but it also didn’t work. I’m a solo operator, so I needed to find a way to change this. I found the contact section of the code and changed “us” to “me” in two places:

$general_title = get_theme_mod('illdy_contact_me_general_title', __( 'Contact me', 'illdy' ) );

I thought I would only need to change the string, but I had to change both the string and the variable name, which I found strange. I’m still learning PHP so this may be common or not confusing to those who understand it better. Either way, changing it in the two places worked. I also commented out part of the Contact Me section to avoid having two category titles (Address and Contact Info).

I wanted to increase the size of the social media icons and add a LinkedIn icon. To do this, I added my own HTML in the text box.

 

<a href="https://twitter.com/lnphillips3" target="_blank"><img class="alignnone wp-image-62 align:center" src="http://blog.lindseynphillips.com/wp-content/uploads/2017/01/social-1834013_640-300x300.png" alt="Twitter logo" width="70" height="70" /></a> 
<a href="https://github.com/lnphillips" target="_blank"><img class="wp-image-61 align:center" src="http://blog.lindseynphillips.com/wp-content/uploads/2017/01/github-154769_640-300x300.png" alt="GitHub logo" width="70" height="70" /></a>
<a href="https://www.linkedin.com/in/lindseynphillips/" target="_blank"><img class="alignnone wp-image-47 align:center" src="http://lindseynphillips.com/wp-content/uploads/2017/03/social-1834011_1280-300x300.png" alt="LinkedIn logo" width="70" height="70" /></a>

 

This code worked, but I had a gray shadow box in the middle of the icons, which wasn’t on purpose, but at least it was even. At first, I had no idea how to get rid of this box, and I thought about just leaving it. Maybe people would think it is stylish? Maybe people would message me asking how I got that box there? Then, I stopped being lazy and discovered that the gray box was there because I added the <code></code> tags around my HTML. (Adding code to blog entries has made this a habit when adding code in a text box.) I removed that tag and the problem was fixed.

Finally, I needed to make my menu jump to the corresponding section within the single page, which it currently was not doing. I achieved this goal by adding custom menu links with the URL lindseynphillips/#about, lindseynphillips/#services, and so on. How did I know what phrase to use? Well, I read through the code and found the anchors for each section by looking for <section id="“about”">,<section id="“services”">, etc.

Attempt 2.3: The Blank Slate or The Hard Lesson of Automatic Updates

I was feeling good about debugging the theme with my few code hacks. A few days later, I wanted to make the last few changes before I unleashed my website to the world. However, I discovered that all my changes to the code were gone. No more third yellow period. The unwanted footers were back, laughing at me. At first, I doubted my coding ability. Did I really fix it? Was it a dream? Then, I realized that WordPress does automatic updates to themes as well, and the update had taken away all my code. (Maybe Drupal—with its manual updates—isn’t so bad after all!)

The good news is that most of the bugs I fixed manually had been corrected in the update, so I was just ahead of the game.

Attempt 2.4: Adding JavaScript to a WordPress Theme

Riding on my coding high, I was ready to add JavaScript and make my website interactive. I started off trying to add a progress circle. I found code for a progress circle I like, so I opened my text editor and pasted the code I found. I modified it to match my color scheme, uploaded the file to my public_html folder, and added the corresponding CSS to my theme. But then I ran into the problem of not having a function to call in the HTML I added in the text box, and WordPress seems to like having you call a JavaScript function.

To test out the use of JavaScript, I quickly added an alert in the text box, and the it worked. Unfortunately, the progress circle was not as straightforward.

I think one way around this problem would be to add a JavaScript plugin. But, to be honest, I’m tired of the plugins and the workaround. I started this project to learn code, and I feel like I’m just learning how to avoid it.

Attempt 3: Templates, the Clear Winner

My frustration with the themes made questioned if I should throw in the towel and quit learning web development because I wasn’t enjoying the process of making my website. I started coding because it was fun, and I had lost that feeling trying to customize the WordPress theme.

I vented to Arturo. I couldn’t imagine people being masochistic enough to enjoy trying to modify WordPress themes. I had already lost enough sleep making a few cosmetic changes to WordPress.

I don’t want much—just total and full control. That isn’t too much to ask, right? I just want to make my own HTML file, but I’m not quite ready to make it from scratch. I wondered if there a template or something I could use to modify and make my own HTML, CSS, and JavaScript files, and I was in luck because they do exist—not rigid themes but templates with the HTML, CSS, JavaScript, and Bootstrap files ready for me to modify! This was music to my ears.

I downloaded a free template that was similar to the design I had in my head. Although it is designed for restaurants, I’m going to use it as a base for my freelance writing and development webpage.

Two days into the process and I was already making more progress (with a lot less yelling and cursing) than when I was using WordPress. I changed the color scheme and section titles, and I started learning Bootstrap, which is making my life easier!

I learned about Bootstrap grids and modified existing code to change it from four columns to two: <div class="col-xs-12 col-md-8">. I also wanted to include a Skills row, so I added a new row <div class="col-xs-12 col-md-12">. It worked, but the text wasn’t center, so I tried to insert <center> and quickly discovered that HTML5 doesn’t allow in-line tags; it wants CSS and HTML to work together! So I had to modify the CSS, not add a line to my HTML code. I made a new id in CSS for #aboutskills and added the following in my HTML:

<div id="aboutskills">Skills + Tools</div>

 

I also discovered font-awesome, which is a suite of pictographic icons. For my blog, I found free images of Twitter and GitHub on Pixabay and uploaded them to the media library and included <a href> in the text box to link the image to my social media page. For my website, all I had to do was insert the following code:

<ul>
    <li><a href="https://twitter.com/LaconicLindsey" target="_blank"><i class="fa
       fa-twitter"></i></a></li>
    <li><a href="https://www.linkedin.com/in/lindseynphillips/" 
       target="_blank"><i class="fa fa-linkedin"></i></a></li>
    <li><a href="https://github.com/lnphillips" target="_blank"><i class="fa fa-
       github"></i></a></li>
</ul>

 

Fast forward a week later and I am enjoying web development again. When I’m not working on it, I find myself thinking of ways to improve the content, animate certain parts, or modify color schemes and images.

I took a risk leaving the safety net of WordPress themes because the idea of merging HTML, CSS, and JavaScript still seemed abstract to me in many ways. After all, creating a web page and taking online tutorials are different. But the risk paid off in the end because I have learned a lot in such a short time. I now know how to use Bootstrap, font-awesome, class and id tags and how to incorporate JavaScript into my HTML file.

I finally feel like I’m making progress. I’m not relying on Arturo as much to help me find answers to my problems. Now, when I yell his name, it is to show him what I’ve done (well, me and the Stack Overflow community)! Of course, it’s not all forward progress. I write some new code and my website crashes. I make sure all my <div> tags are closed. I read through Stack Overflow. I try something else until I figure it out. I take two steps forward and one step back. But through this dance, I’m learning.

2 Replies to “Website Reboot: WordPress Themes versus Bootstrap Templates”

  1. You should install something like Wamp that allows you to run your own server on your computer. This way you can develop any number of sites, WordPress installations or anything else and have any number of databases. Wamp on your computer will be your local environment. This environment is not on the internet and you can start and stop this server whenever you want. You can also take a backup of your current site and duplicate it here and work from that and the reverse is the same as well.

    1. DrDeveloper says: Reply

      Thanks, Kishore! I am going to try using Wamp. I’ll let you know how it goes!

Leave a Reply