If you’re like me, one of the things that seems odd about the WordPress Twenty Eleven theme is the comment bubble in the upper right of each post on the front page of the blog. If you don’t know what I’m talking about, here’s a picture:
In the upper right, the comment bubble (highlighted blue) clutters up the front page
Before we can remove the comment bubble, we first need to figure what this element is called within WordPress. Luckily, this is quite easy using a tool that is included in all modern browsers.
To find out what any HTML element is called on a page, all you need to do is to point to the element, then Right-Click on it and choose “Inspect Element”. I’m using a Mac with the Firefox browser, so it looks like the following on my computer:
'Inspect Element' is one of the most useful tools in web development
Once you click “Inspect Element”, you’ll see that the comment bubble is located inside the
comment-link section of our WordPress template code:
We need to look for "comment-link" in our WordPress template
content.php to our WordPress child theme
Now that we’ve found what the comment bubble element is called, we need to find it in our WordPress child theme. If you’ve been following along with the posts on this blog, we’ve already developed a custom CSS file and a custom header file. To save you the agony, the WordPress file we need to modify is called
content.php. Copy the
content.php file from the base Twenty Eleven theme into your child theme directory.
Once you’ve copied this file to your directory, open it up in your favorite text editor. What we’re looking for is “comment-link”…using Command-F, we can see that it is contained in this file twice. We want to modify the first one, as it controls the element at the top right of the post; the second “comment-link” refers to the link at the bottom of each post.
Any time you are making changes in code, it’s good practice to first ‘comment out’ the code you are modifying, so that you can ‘uncomment-out’ the code if the change isn’t what you intended. If you delete the code outright, before knowing what it does, you’ll be scrambling when you delete the wrong line!
Using the HTML comment tag of “Left arrow, exclamation point, two dashes”, we can start commenting out at the first line of the code snippet (to the left of the <? symbol). Use the “Two dashes, Right arrow” HTML comment tag to the right of the “php endif” statement. When you are done, your code will look like the following:
Hit save and you’re done! No more comment bubble on your theme. Of course, once you verify that the code is working correctly on your theme, you can delete these lines of code. It’s really up to you and your needs…if you think you might want to re-instate the comment bubble at a later date, leave the code. If you’re like me and don’t like the comment bubble, then delete!
To understand the success of your blog content and site design, you need actionable data on your visitors and how they are interacting with your site. Whether to use WordPress Stats or Google Analytics (or both) to obtain this data depends on your goals.
WordPress Stats plugin
WordPress Stats dashboard
If your goals are relatively basic in terms of understanding your blog’s success, then there’s no better place to get started than installing the WordPress Stats plugin. This plugin is part of the default “Jetpack” plugins installed with every version of WordPress…to activate it, go to the left-navigation menu under “Jetpack” and follow the instructions for activation. You’ll need an API key from WordPress.com, but they are free and easy to obtain.
Once installed, this plugin will let you know how many page views your content has generated on a daily/weekly/monthly basis. It will also allow you to view which blog posts specifically are the most popular, which is great for understanding what your readers are interested in reading.
This plugin will also tell you what search terms readers are using to find your site in search engines, and any other blogs or websites that are linking to your site (known as “referrers”). Like page views, knowing these search terms and referring sites will let you know the type of content visitors to your site are most interested in reading, because either a visitor was interested in learning more about a topic (search terms) or read an article on your site and wanted to share it with others (referring link).
As a casual blogger, you can do much worse than just monitoring these simple data points. But if you want to really analyze what’s happening when visitors come to your site, you’re going to need a bit more data collection.
Have you ever thought, “I wonder where my readers are located geographically” or “Is my blog design compatible with different browsers, including mobile devices”? If so, then stepping up to Google Analytics might be worth your while. While the amount of data provided by Google Analytics can be overwhelming in the beginning, once you start using the reporting interface for a few weeks, you’ll gain a ton of insights.
Google Analytics dashboard from The Fuqua Experience
For example, in a prior post I posted the geographical distribution of visitors to this blog after only 3 days. By tagging my blog post link with Google campaign tracking, then posting that link to Twitter, I got amazing insight into how geographically diverse the contributors to the #measure hashtag are. There were visitors from 17 countries that read my first blog post, something that would not have been possible to know without the extra horsepower that Google Analytics provides. Sure, there’s not a whole lot of intent I can ascertain from the geographic distribution after 3 days, but the geographical distribution is something I can monitor over time to see what trends might be present.
WordPress Stats or Google Analytics? Yes!
Up to this point, I haven’t been very precise about what constitutes a “simple” metric such as page views, or how to know when you need the extra “horsepower” that installing Google Analytics provides. The reason for my imprecision is that the decision to install either tracking code shouldn’t be an “either/or” decision, but rather an “and”. If you’re running a self-hosted WordPress blog, in my opinion you should be running both WordPress Stats and Google Analytics!
Yes, the data provided by Google Analytics is a superset of the information provided by WordPress Stats; thus, you don’t gain any additional insight from having WordPress Stats installed. What you do gain by having both installed is convenience, and as far as I can tell there is no performance degrade to a site having both running at the same time.
So when you need a quick snapshot of what your blog has done in the past several weeks, or you want to get an idea of your most popular content while in your WordPress admin panel, the WordPress Stats plugin will do just that. When you want to get a deeper insight of how several factors are interacting to create your successful blog, sign in to Google Analytics.
But above all else, remember: the data doesn’t do anything because it’s being recorded. You need to study it to unlock the value!
In a previous post about creating a child theme for Twenty-Eleven, we created a custom CSS file using the @import CSS rule. Technically, the new CSS file is all that is needed to create a child theme in WordPress, but just changing the colors and font styles isn’t that much fun. If it’s worth making your own WordPress child theme, it’s worth changing _everything…_starting with creating a custom header file.
Creating a custom header file in WordPress is even simpler than creating a custom style sheet, because this time we’ll just copy the file directly from the base Twenty-Eleven theme directly into our child theme.
- Go to your
/wp-content/themes/twentyeleven directory and locate the file
- Paste the
header.php file to your
That’s it! Not very exciting…so let’s do some additional code modification while we’re in the new file.
Changing header image and size
Of all of the great things about the WordPress Twenty-Eleven theme, the one thing I can’t understand is why WordPress decided to make the header image so damn big! There is the option to change the image you display to any number of provided images, or upload your own as part of the Appearance > Header menu. But you can’t change the size…if your upload is too short, the theme will stretch it for you, distorting the image. If your upload is too large, you’ll have to crop it. Luckily, with a minor modification we can change that.
First, go your newly created header.php file and find the following code:
What we’re going to do is use the commenting tag in HTML to “comment out” the portions of our header code that we no longer want to be active (i.e. the re-sizing feature in the Twenty-Eleven theme). We can do this by adding the following tag (a left arrow, and exclamation point, and two dashes):
You’re not required to put in the “Comment out WordPress header checking” text as I did, but it is good practice to notate why changes have been made to your code. A little documentation now goes a long way a year from now, when you can’t remember why you changed something! Now that we’ve got the opening tag for commenting, we need to find the end of the code we want to comment out, and put the closing tag. Once we do this, all of the code between the commenting tags will not get executed by our browser.
The closing tag above is the two dashes, then the right arrow. Again, you don’t have to write “End of RZ commenting out”, but it’s good for documentation. Save your header.php file to make the completed changes.
Hey, now I don’t have ANY banner!
If you refreshed your blog at this point, you’ll realize that not only did we get rid of the massive size of the banner, we got rid of the banner overall! That’s not the goal of this tutorial…so let’s add the banner back, except now we’ll control the sizing.
First thing you need to do is make sure you have the banner you want uploaded to your server, and that it is the size you want. This blog is 1000 pixels wide at the body (white space), and I decided to make my banner 225 pixels tall, because that’s where the picture looked good.
Once you have your banner location, we need to add the HTML link to our image, using the image tag. For the “alt” section, you should put a description of what your banner represents, as this will be displayed if the users browser can’t download the image. In the “src” section, add the location of your banner file.
Once you hit save, that’s it! You now have control over your banner image. Yes, modifying the code in this manner disables the Appearance > Header functionality in the theme, but that’s a small price to pay to get flexibility. If you want to change your banner in the future to show a different image, you’ll need to do so in the header.php file. But since you’ve documented this change in your code, you’ll know where to look and what to change when that time comes…
Before - 1000px by 288px image
After: 1000px by 225 px