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
		}
	 }

	}