Frank Schulte-Ladbeck

The art of writing comes with its own rules that you need to know, once you begin to write a post for any webpage.

I was asked how do I develop titles for blog posts, and I thought that I might write a post on that topic, but writing for the web is different from other styles. I have been working on a couple of anchor/pillar posts, when I wrote a piece that fits into my overall scheme, and kept my blog post schedule. While writing this post, I became self conscious of the techniques involved. This feeling was enhanced when an editor worked on a post that I submitted for another site. With these thoughts in my head, I felt that a post about writing a post would be better suited here.
Read the rest of this entry »

When you consider innovative websites, you may realize that they take the forms of existing media or functions, which make them easier to use.

Read the rest of this entry »

A two columned theme with a dark background and red accents meant to be an energy efficient for monitors.

Read the rest of this entry »

When I was doing some research for some content, I decided to see if other blogs had written on the topic. This led me to several blogs, and an unexpected discovery.

Read the rest of this entry »

New websites are popping up every minute; however, this does not mean that quality content is being produced. How would you set yourself up to be the source of information in your field?

I have been doing research on why users come to my site. This involved finding how they came to the site, what content did they examine, and what content was actually read. That last one was important to me. You have a short time to attract a visitor to stay on your site, so I may want to improve content where people arrive on the site, but I need to understand which posts caused people to stay and why. Those posts (not the ones that have the most visitors- which may or may not be read) will show you what your readers truly want. For example, users of my home inspection site fall into different categories. Two main categories are people looking for my service and people who want to understand how a repair to their home is made. The first group will find my phone number, and they leave the site. The second group will spend seven minutes on average reading an article. Obviously, this second group can become important to me in marketing, so I do want to cater to them. Read the rest of this entry »

Two restaurants opened up near my home, and they may provide insight into how you should see your website.

You never will know what a customer will want until engage them. You may think that with a website that you may not be speaking directly (as in face to face). This would be a poor choice to follow. Whether they speak to you or not, website visitors are engaging you. I thought about these two restaurants recently opened, and about my experiences with them. It occurred to me that they are good examples of might be going through the thoughts of our site’s visitors.
Read the rest of this entry »

Creating local content needs
to fit in with your business to make the site relevant.

I read recently that you should consider whose website you are developing. Does it belong to you or to your customers? I found this statement as a good guiding principle to keep in mind when working on a site. I may have a vision for the site, but the users (my customers) will have their own reasons for coming to my site, and if I want them to come back, I need to meet their needs, not my desires. This thought came as I was going over my top landing pages to see how I can improve my bounce rate. Moreover, I had been reading some advice on creating local content to focus your audience to a group who may be my potential clients. It caused me to examine some business sites which I felt were missing the mark, making a mistake that I have made myself.

Read the rest of this entry »

A look into the evolution of a home page. Thoughts behind a design change, and how it was done.

I have joked with a friend that websites are never done. We constantly tweak them in an attempt to find the optimal solution, which may never happen. When I had a static site, I saw that other home inspectors had main pages packed with information, and I kept changing my page to have various pieces appealing to users or to meet the latest data on what works for marketing. When I set up a landing page on my blog, I did the same. Packing content on that page in the hopes of a sale.

Read the rest of this entry »

An out of the box free theme will not have all of the elements that you may want, or set up for your business’ needs. Adding elements is quite simple, and the sidebar may be your first stop.

Before I understood the code, I was able to change the order of widgets and elements in my sidebar. You can look at the code to see patterns, and by keeping those patterns, you can make your changes. The simplest change involves the order of the items in a sidebar, or eliminating an element, like a blogroll. Understanding some basics of code will make this process faster, and you may find that your sidebars can become effective in your marketing.

The Basics

In your WordPress theme, you will find a file called “sidebar.php”. You can edit this file in WordPress through the Editor found under the Appearance section. Feeling more adventurous? Use Notepad or Notepad++ to edit these files when not logged onto the internet. If you have more than one sidebar, you will see sidebar1.php, sidebar2.php, and so on.

When you open this file, you will be greeted with <div id=”sidebar”>. This bit of code sets up everything following as part of the sidebar. The code <div> and </div> create a section (division) of your site- one opens the section and the next one closes it. Anything that you put into those tags will go into the sidebar.

Here is where you need to pay attention. Let me give two examples that define the same element in two different themes.

Example 1

<li id=”links”>

<ul>

<?php wp_list_bookmarks(‘title_before=<h3>&title_after=</h3>&category_before=&category_after=’); ?>

</ul>

</li>

Example 2

<div>

<div class=”Block-tl”></div>

<div class=”Block-tr”><div></div></div>

<div class=”Block-bl”><div></div></div>

<div class=”Block-br”><div></div></div>

<div class=”Block-tc”><div></div></div>

<div class=”Block-bc”><div></div></div>

<div class=”Block-cl”><div></div></div>

<div class=”Block-cr”><div></div></div>

<div class=”Block-cc”></div>

<div class=”Block-body”>

<div class=”BlockHeader”>

<div class=”header-tag-icon”>

<div class=”BlockHeader-text”>

<?php _e(‘Links:’, ‘kubrick’); ?>

</div>

</div>

<div class=”l”></div>

<div class=”r”><div></div></div>

</div>

<div class=”BlockContent”>

<div class=”BlockContent-body”>

<ul>

<?php wp_list_bookmarks(‘title_li=&categorize=0′); ?>

</ul>

</div>

</div>

</div>

</div>

Both pieces of code do the same thing, list the sites listed in your blogroll. They both tell the browser how these bookmarks will be displayed. Obviously, one bit of code is much shorter.

Let us take example 1 apart. The first tag that opens this element is <li>. Think of this as setting up a section within the larger section established by the <div> tag. Inside the <li> tag, you see attributes that define what this section includes. In this case, we find that the section is for the links. We then find a tag <ul>. This indicates that what comes next is an unordered list. If it was an ordered list, the tag would be <ol>. Your list is unordered, because you will be adding to it from your WordPress administration panel. All of these bits of code were HTML. Now we come to our first bit of code in php. Within the parentheses that start with ?php, we see a command that asks the server to find the list of blogroll links. Then within another set of parentheses, we see a command that tells the browser that these links will be placed under a header with the a title “Links” inside a tag <h3>. The <h3> tag tells the browser that this is a header of size 3. Size 1 being the largest header, down to size 6, the smallest. We then find the closing tags for this section. A closing tag uses the / mark inside the <> before the type of tag, li or ul.

Why is example 2 so complex? Well, the code was generated to create a specific look for a box surrounding the blogroll, and the elements inside that box. It has a lot of <div> tags. Just because we set up the sidebar with a <div> tag does not mean we cannot use them again. If you look inside all of these tags, you will recognize that the command telling the server to list the bookmarks is in the middle, and it is place within a unordered list. However, the code inside this command does not tell the server to create a header. It does tell the sever how they will be presented in that list. If you look, you will find the header mentioned in this command <?php _e(‘Links:’, ‘kubrick’); ?>. You will see that there are no <h3> tags, or any other <h> tags. In this case, the header is placed into a header image defined in the stylesheet. Getting back to this command; it simply tells the server to tell the browser that the title of this section is Links.

When looking at your own theme, look for those basic elements to find what is included to make one of your sidebar elements. You will be looking for <li> and <ul> tags, and you may need to look for <div> tags, but check for the repeating pattern.

Switching the Order

To move the order of the elements, you can open your editor to cut and paste theme in the order that you want. You have to save the file to implement those changes. Why would you want to switch elements? Maybe you would want to emphasize your links, but you want search to be down on the bottom of the sidebar. If the links are to your other business sites, you may want a visitor to go to those sites, so by bringing them up, a visitor is more likely to see them. Maybe they would only need to search, after they looked at those sites.

Adding an Element

What is important to you? Most WordPress themes have a blogroll. These are great ways to share your links with readers, but if you are a business, maybe you do not want to send your visitors to other sites, or you do not have other sites that you want to link. On my home inspection blog, I came to the conclusion that the blogroll was ineffective. On my site, visitors were quite likely to click on a link inside a post, but very rarely clicked on a link in the blogroll, even when I suggested that they do so. In fact, the only links visitors typically clicked on in my blogroll was to my other sites, and not to the other businesses that I was linking. I also so no reason for the Archives, because I found other ways for the user to navigate my site. There were other elements that I wanted. Here is a list of common elements found in a sidebar, but not necessarily in all free themes.

<?php wp_dropdown_pages(); ?> this lists the pages of your site in a drop down list. For example, if you have special pages attached to your About page, the About page would show up on the browser, while the special pages show up when it si clicked.

<?php wp_list_bookmarks(); ?> the links or blogroll

<?php wp_dropdown_categories(); ?> these are the categories for the articles on your site, listed by main categories, and subcategories when come in a dropdown list.

<?php wp_get_archives(); ?> This lists the archives, so posts can be accessed by date published.

<?php get_calendar(); ?> places a calendar in your sidebar

<?php wp_tag_cloud(”); ?> You will probably write down keywords as tags for your posts to help with SEO, but tags also help related pages plug ins find common topic posts, and tags are a great way for a user to search your site. This command produces a tag cloud (a list of tags) used on your site.

<?php wp_dropdown_users(); ?> This lets your site become a little more social by listing the users of the site.

<?php wp_list_comments(); ?> Want visitors to see the latest comments, then use this command. If you do not have many comments, you may not want this one.

Note: for any command that uses a dropdown in it, you will need to follow the following form in your sidebar to make it work:

<li id=”users”>

<h2>Users:</h2>

<form action=”<?php bloginfo(‘url’); ?>” method=”get”>

<?php wp_dropdown_users(); ?>

<input type=”submit” name=”submit” value=”view” />

</form>

</li>

I am going to deal with advertising and adding social media elements in your sidebars in different posts. I do want to mention one element that does not call upon the server or produce some standard blog/site feature. If you go to my home inspection site, you will see that the first element is a mission statement with my phone number. On this site, the mission statement with phone number are in the header. This statement is a good marketing tool. By having a mission statement, I let my readers know at a glance what my site is concerning. By including my phone number, I give a way for people to contact me quickly. You will find that not all users will go to your form or send you an email, so make your phone number easy to find on any page. Here is how to set up this element:

<li>

<h2>Title if you want one</h2>

<p> Mission statement or other info</p>

</li>

Here we have a title tag <h2> which stands out. You may not want it, or you may want to make it smaller with <h3>. We then have a tag that defines a paragraph of text, <p>. We then close these tags.

Alright, this post is becoming to long, but I hope this gives you a good overview of how to start changing your theme.

A three columned theme in brown tones

With the Voyager series, I was experimenting with using variations of some basic colors: red, green, and blue. My own tastes tend towards earth tones. I find that when used in web design, earth tones produce more elegant looking themes. There are many websites with white backgrounds for small businesses, but as the web matures, I believe we may see more sites focusing on other tones, which will create more individuality. This theme begins a series where I want to explore earth tones in a site.

About the theme name, I am following my habit of naming the themes after songs. In this case, I was listening to Charles Mingus’ recordings on the Candid label. Great work if you like jazz. “melody of the Drums” was one of the pieces recorded by Mingus for that label.

I did not have a specific business in mind when working on this theme, but I did discover that a few Realtors who had sites in similar tones. I began to think that the theme could be good for a clothing shop. Images are framed in a lighter hue to make them stand out, so it may be nice if used in that field.

Features:

Header: I like the navigation on the top for this theme, because I imagined that an image could be placed on the black background of the header. I left the header large for that reason. A light colored logo would fit well over this subtly textured dark header. I am sticking with the multi-level navigational elements. With this theme, I think that this adds a cleaner, elegant feel.

Sidebars: I have two sidebars that are thin. My thoughts were that widgets could be added, and they would be seen quickly by a visitor. Having one sidebar will have widgets or other sidebar elements pushed down well below the fold. Not all users will scroll down your site, so I would have your important elements towards the top of the sidebars.

Article body: Again, the hues are meant to have elements subdued. The meta data under the post title is de-emphasized, while the meta-data in the footer is highlighted by a box. The images have a lighter colored border to help them standout. The fonts used are more typically used for blogs, but I felt that they made reading easier on the eye.

Footer: I put in links for pages that will be better for small businesses, so if you are using this theme for a personal blog, you will want to edit the Footer.php to remove those page names. I left the rss feed icon in the footer, but I would make a social media box in the sidebar above the search box. The footer is not the place for this element, so think about where you may feel works better.

Other features: the theme has a print stylesheet to make printing a post easier. Also, several languages were added to make the theme available useful in various countries.

Download Melody of the Drums.