Arc and Angle To me programming is more than an important practical art. It is also a gigantic undertaking in the foundations of knowledge. – Grace Hopper

How To Get The Sidebar on Pages in WordPress TwentyEleven Theme

I've used WordPress software as a CMS for a bunch of websites, and I'd typically just customize the default theme, which for most of my sites was the TwentyTen theme. When the default theme became TwentyEleven, it threw me for a slight curve when the sidebar was not automatically present on pages. That seemed like an odd change.

At my last job, we simply hard-coded the sidebar and then recopied that code every time we started a new project. Well, I just realized that all of that is totally unnecessary and I really should've looked into the issue further. All you have to do is go to Pages, select all, click edit, and change the template to "sidebar template" as a bulk action. It couldn't be easier. Lesson learned.

Find A Website’s IP Address

I started this blog when my whole focus was about learning and sharing, and since I've had a job, I've neglected the poor thing. Noo! I'll try to be better. I tend to make too big of a deal out of blog ideas and then put them off, instead of just regularly and spontaneously sitting down and just sharing random thoughts/tidbits. I tend to wait until I have a great big lesson, as though I'm planning a web design course or something. I think I'm going to attempt to simply share a thing or two a week. They don't need to be major.

So, for today's small little tidbit, I'm going to share something that I knew, but forgot about and was reminded only a few minutes ago while watching a Youtube clip. Sometimes, one needs to find the IP address of a website. Maybe you're really interested in the numbers that represent your own website, but most likely, you need it for some sort of functional purpose.

A recent example of this has happened at my job when we had built a new website for a client on our own server. We had simply pointed their domain name from their previous hosting account to their new hosting account with us. It turned out that some of the company's employees had saved some bookmarks to certain pages of their previous website on their desktops, and when we pointed the domain name to new servers, they couldn't access their page anymore...even though they hadn't yet canceled their old hosting account. The files were still on it, but the domain name wasn't pointing to that server anymore.

So we told them that as long as they still had access to their hosting account, we could probably get the specific directory moved to the new server. We had the proper FTP username and password, but the domain name wasn't going to work. We needed their IP address in order to connect to that server. They didn't know what their IP address was.

When I need a client's IP address and they don't know it off the top of their head, which is rather normal and probably healthy, I was sending them to http://whatismyipaddress.com/, which is fine, but it's much faster and much more responsible to simply get the IP myself...and I forgot that I could use command prompt to do just that.

So, to all dorks, web designers and others, this is a really really simple way of getting a websites IP address:

How To Ping A Website for it's IP Address

Step 1: Open your command prompt. On my current computer using Windows XP, you just go to the Start menu, then click run. Type "cmd" (without the quotes) to open command prompt and click OK.

Step 2: Once your command prompt is open, type: ping websitename.com (don't actually type websitename.com. Type in the name of the website that you want to retrieve the IP address from.) So for example, you could type: ping arcandangle.com and it was display a few bits of information including the IP address.

That's it. I should mention that in the example I started with, I wouldn't be able to ping that client by their domain name and get their old IP address. It would have given me the current IP address that their domain name was pointing to, which would have been our own server. BUT, the lesson here is that before transferring a domain name, I could have pinged and recorded their IP address just in case I needed it in the future.

Dynamic Select Menu With Javascript

OK, so I promised I'd write something about how to dynamically change parts of a web form using javascript. As an example, I'm going to change the options on an HTML select menu based on which radio button a user selects. Do to the fact that it is spring and I'm anxious to plan a vacation, I decided that my example should be travel-related. So what I'm going to do is show you how to present two radio button options to your user asking them if they'd prefer a domestic vacation or a vacation abroad. Then, depending on which radio button they select, the options of destinations which change.

First I'll show you the code that goes in your header and then I'll show you the code that goes in the body section of your page. After both code blocks, I'll explain what's happening.

This code goes in the header of the page:

This code goes in the body of the page:

What type of travel destination would you prefer?
Abroad

Domestic


Australia
South America
Europe

Explanation

The code in the body section of the page is an HTML form with two radio buttons and one selection menu. When either radio button is clicked, it calls the function that is written in the header and passes the function its value (in this case, it's either passing the function a value of '1' if the abroad button is clicked or '2' if the domestic button is clicked.) The statements in the function then set the values and text of the options list depending on which value it receives.

So, starting with the form. The first line is the opening form tag containing three form attributes: action, method and name. The action is the address of where to send the form-data when a form is submitted. Since this is just an example, I just put a generic web page down. Usually it would be sent to a form processing page. The method is how the form is sent, either by "post" or "get" method. The name is the name of the form. So this form is submitting its data to a page on my site called dynamic-option-list.html via the post method and the name of the form is "travel".

The next few lines create the two radio buttons. They are part of the same set, so they have the same name attribute: type. The first one has an initial value of 1. It is set to be initially checked when the page first opens. It also uses the "onclick" event, which performs whatever action is in the quotes when a mouse is clicked on that object. In this case, when the mouse clicks either radio button, the onclick event calls the function named ChangeOptions() and passes it its value. So if a user clicks the second button, the onclick event calls the ChangeOptions function and passes it a value of "2".

What type of travel destination would you prefer?
Abroad
Domestic

The function is declared in the header inside of script tags. The function is named "ChangeOptions" and receives the value from the element that called the function. In this case, let's pretend a user clicked the second radio button. That button has a value of 2, so when it is clicked, the onclick event calls the ChangeOptions function, which receives the button's value of 2.

function ChangeOptions(ElementValue)

The statements inside of the function's brackets then check to see if the value is 1 or 2 and sets the values and text of the selection menu's options accordingly. It uses the javascript "with" statement, which basically allows you to write less code. We could write code for each option that basically says, "If the value is 1, then set the text on the element named "optionList" of the form named "travel". Instead, we're using the "with" statement to say, "In all instances contained within these brackets, we're referring to the form named travel....so please don't make me repeat it each time." Document refers to the web page itself.

The "if" statement grabs the value received by the function (in this example 2) and says, if the value is equal to 2, then do these following statements. optionList [0] refers to the first option (originally "Australia") and sets its text to "California" and changes its value to 0. The options are basically an array that can be identified by an index number starting with 0. So the first option has an index of 0, the next option has an index of 1, etc.

{
	with (document.forms.travel)
	 {
		if (ElementValue == 1)
		{
			optionList [0].text = "Australia"
			optionList [0].value = 1
			optionList [1].text = "South America"
			optionList [1].value = 2
			optionList [2].text = "Europe"
			optionList [2].value = 3
		}
		if (ElementValue == 2)
		{
		optionList [0].text = "California"
		optionList [0].value = 0
		optionList [1].text = "Florida"
		optionList [1].value = 1
		optionList [2].text = "New York"
		optionList [2].value = 2
		}
	 }

	}

Dynamic Contact Form for WordPress

I wanted to write a little bit about some challenges encountered while creating dynamic contact forms using WordPress. There are many wonderful plugins that are suitable for the majority of user's requirements.  However, every now and then, there comes a scenario where a user-friendly plug-in just isn't going to do the trick (or, if there is a suitable plug-in out there, we may not want to spend several hours installing several different ones trying to see if they work for our specific needs).

Today at work I encountered one of those situations that falls outside of the typical contact form protocol and I thought it might be useful to walk through the problem and how we solve it.

Real-Life WordPress Contact Form Scenario

We are developing a website using WordPress as a platform for a client who wants to be able to add and edit their own pages down the road by themselves without calling us for every little edit & update that comes there way. Wonderful, we love building sites out on WordPress. We do this quite a bit, partly because WordPress is quite flexible. It's open source and has a huge community of developers creating plug-ins and widgets for all sorts of purposes and if we ever have a question, we're hardly ever the first WordPress users to encounter it and the answer is nearly always found online after a bit of searching.

Our aforementioned client sent us about 40 pages of content which included a Word Document (.doc) where they created a contact form as best as one can reasonably expect in a Word document. Obviously, instead of text boxes, check boxes, buttons and so on they simply utilized underscores and brackets with descriptions of what they wanted:

For example: [SUBMIT BUTTON]

Usually, when we're working on a WordPress site, we install a plug-in called Contact Form 7. It generally strikes an appropriate balance of simplicity making it easy to quickly create a nice looking form with a nice behind-the-scenes complexity that creates a processing page without us even needing to look at it. It's flexible so that we can easily control the layout/wording of both the form and corresponding email and it's quick. It is almost always good enough for any form that is simply meant to send data as an email instead of being stored in a database.

This client does not need any data stored in a database, just an email that gets sent to their main email address containing the content filled out in the form. The problem is that they want a form that is rather complex and more dynamic than a typical contact form. This is no fault of theirs; they're not web developers and don't know what they're asking.

The client wants visitors to be able to select one option from a series of "status" descriptions and then, for some of the options, they want additional information if it is selected.

For example:

( ) I am a friend / relative of a former client....IF SELECTED....enter client’s name: ______
( ) I would like to become a client...IF SELECTED.... click here to be redirected to appropriate form

This is a bit more of an involved effort because it has a select box with 15-20 options, several of which include follow-up questions if selected. If we had known what they'd be needing, we probably would have accounted for additional time building out the contact form in our estimate. As is sometimes the case, we did not know specifically what they'd want and they did not know that it was beyond the typical realm of contact form creation. So, we have a situation that requires a bit more coding and we want to accomplish it as quickly as possible because we've only allotted a certain amount of time to dedicate towards form development.

This is a bit beyond the scope of our usual handy dandy contact form plugin. So, what we do then is create the form in a php document using Dreamweaver. We then use some software called "Forms To Go" that we upload our form to and it helps us quickly create a corresponding PHP processing page. We then upload the php processing page to the server, copy the HTML form that we created in Dreamweaver and paste it into a WordPress post or page and voilá , we have a great form.

Forms To Go won't be sufficient for this particular form either (although we can still use it to create a processing page), but this form will ALSO require client-side Javascript so that it responds to user choices as they fill out the form instead of only responding when the submit button is clicked and sends that data to a server. We need a dynamic form that, when a specific option is clicked from a selection menu, reveals a related text field requesting further information or redirecting the user to another page/form.

I wrote a similar post on how to create a dynamic menu using Javascript.

WordPress Upgrade “Cannot Copy” FTP Permission Issue In Layman Terms

Solution: Contact your webhost and ask them to change your ftp server to ProFTPd.

Oh my goodness, WordPress upgrades have been giving me such a headache! As previously posted in "Automatic Update Fail" I was only able to upgrade my accounts either manually or after deleting the "upgrade" folder myself. I had hoped that this would solve future problems, but with the release of WordPress 3.0.1, all my blogs were failing to upgrade (including plugin updates) giving me a variety of changing error messages saying some variation of "cannot copy /public_html/..." and it would give me a path to different files, usually ending in dev.css. After countless hours of messing around with file permissions through Filezilla and/or through the file manager in CPanel, after deactivating my plugins, after manually deleting the upgrade folder and the .maintenance.html file...I was extremely frustrated and nothing was solving the problem.

The repeated "solution" posted on several forums was to simply manually upgrade when things don't automatically upgrade...which works, but I'm a "why" person. It bugs me to not know why something is occurring and it's a pain to have to repeatedly manually upload & upgrade when you have several different WordPress blogs & plugins, as is my case.

The solution has been found and is resolved (knock on wood).  I had read a few forums where people had mentioned a thing or two about ftp user permissions and how sometimes there are permissions problems with your ftp server. I honestly didn't understand it all (and still don't entirely) as I'm not a server person by any means, but my understanding was that it wasn't a permission issue that I was going to be able to manually change through Filezilla or the CPanel file manager  and it had something to do with dhappache user or Nobody User permissions.

On a whim, I decided to check out my web host's forum to see if other folks were have similar issues. I found out they were, but there were no posted solutions besides the usual manual upgrade. Argh. I then checked out their twitter account and they had posted a link to a WordPress forum thread that explained this:

"From what I'm able to tell by looking at the logs during an upgrade or plugin installation, the script attempts to write to an invalid path (usually /public_html/somefile rather than /home/username/public_html/somefile) before using the correct path. It does this for each and every file, so during a major operation like an upgrade where a lot of files are involved it takes a very long time. Eventually the script freaks out and tries to access more memory than is allowed by our suhosin php security module. In most cases it attempts to access 256MB while our default limit is 32M. Suhosin blocks the script and the installation fails."

This made sense to me because I had used an .htaccess file to increase the amount that PHP memory could use and it helped for a plugin I was trying to upgrade, but it didn't solve my overall upgrading problems.

Long story short, I needed to contact my web host to change my ftp server so that instead of using pureFTPd, it uses proFTP. For now, whenever I want to upgrade, I have to send them a ticket (thankfully they respond quickly) and have them change it. When that is done, I do my upgrades and then let them know when I'm done so that they can change it back. Hopefully this will be fixed in the future, but for now, it's nice to know what the problem is and how to go about easy upgrades.

WordPress Automatic Update Fail

I host two WordPress blogs on my hosting plan and the past few upgrades have been a pain in the arse to put it mildly. In simple terms, the "automatic upgrade" failed giving a variety of error messages. One time I was simply having permissions issues; that was a while ago and wasn't a difficult one to fix.

The previous automatic update didn't work, so I did it manually and that worked fine for a little bit, until I got an error message about duplicate header information. After a bit of research I found out that Dreamweaver had inserted a space after one of my php files and it was causing all sorts of havoc.

Now, the most recent update to WordPress 3.0 failed, but I wasn't getting any error message whatsoever, just a frozen screen that said something along the lines of "unpacking core updates...". Finally, I solved the problem...sort of.

I had to delete my wp-content/upgrade folder. I don't know why this happens and would love it if someone does know and can explain it to me, but sometimes WordPress fails to delete the temporary files in your upgrade folder from a previous upgrade. This causes problems. So, all you have to do is go delete that entire folder and try running your update.

I was having some trouble using the automatic update for several plug-ins and that solved those problems as well. Unfortunately, I still have to go delete the upgrade folder myself before doing any automatic updates, but at least that's easy to do and blog life moves forward.

Side Note: It's amazing how much disk space is freed up after deleting the upgrade folder. I did it for both blogs and checked the disk space in CPanel, wow. I highly recommend you do this occasionally.