[Link] Anatomy of a WordPress Theme

Great refresher on the anatomy of a WordPress theme. Joost de Valk wrote a detailed breakdown of what each section does and included images as well.

A Realignment

Photo by Skuds

I’ve started to follow Matt Mullenweg’s blog (yes, the WordPress founder) and he does a great job of blogging things he cares about in his personal life as well as his professional life. The tone of the blog is very positive, interesting, and entertaining even for people that aren’t WordPress fans like myself. You get a great sense of the man  behind the site that I think some blogs are missing. I saw a link that he posted that went into depth about the idea of “owning our digital homes”. To go along with the idea of a “digital home”, I’m realigning my own blog. I want this blog to be useful to people and interesting, but also to serve as an archive and a record of my own data . This blog holds my data and it will retain my data for as long as I keep it running. I won’t be posting personal things that should be on something like Facebook, but I will be posting more links I find interesting like Martin Wolf does on his blog and that other people do as well.

As always, I enjoy interacting with other people, so please leave a comment if you would like to talk or you can email me via the contact form.

Complete HTML and PHP Form Walk-Through

I recently coded a landing/splash page for a client of mine that has a form the user fills out and then submits via email to the client. I have coded forms before, but had never learned how the actual submission of data happens via PHP on the server-side. I wanted to share how my simple form works and the code behind it.

Coding the form in HTML is relatively simple. Below is the code used on the client’s live site at nuanced.com/domains.

<div id="form">
  <form id="offer" action="process.php" method="post">
    <div id="inner-form">
      
      <div class="single-field">
        <label for="fullname">Full Name</label>
        <input type="text" name="fullname" />
      </div>

      <div class="single-field">
        <label for="email">Email</label>
        <input type="text" name="email" />
      </div>

      <div class="single-field">
        <label for="domain">Domain</label>
        <input type="text" name="domain" />
      </div>

      <div id="comments" class="single-field">
        <label for="comments">Comments (Optional)</label>
        <textarea name="comments"></textarea>
      </div>
    </div><!-- end #inner-form -->

    <div id="submit-form">
      <input class="button" type="submit" name="Submit" value="Submit" />
    </div>
  </form>
</div><!-- end #form -->

And here’s basically what the above code looks like without CSS being applied:

So far, it’s all pretty simple and straightforward HTML. However, to get the data being entered on the form from the website to the client, we’ll need PHP. The PHP file gets called in the line:

<form id="offer" action="process.php" method="post">

. The “process.php” file is a separate file that lives in the root directory on the web server that contains our PHP code. Here’s the file below:

<?php 
$errors = '';
$myemail = '#';//<-----Input your email address here.
if(empty($_POST['fullname'])  || 
   empty($_POST['email']) || 
   empty($_POST['domain']))
{
    $errors .= "\n Error: Fullname, email, and domain fields are required"; //<-----Error message is displayed if inputs are missing
}

$fullname = $_POST['fullname']; 
$email = $_POST['email']; 
$domain = $_POST['domain']; 
$comments = $_POST['comments']; 

if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", 
$email))
{
    $errors .= "\n Error: Invalid email address";//<-----Verifies email address syntax
}

if( empty($errors))
{
	$to = $myemail; 
	$email_subject = "Contact form submission: $name";
	$email_body = "You have received a new message. ".
	" Here are the details:\n Fullname: $fullname \n Email: $email \n Domain: \n $domain Comments: \n $comments"; 
	
	$headers = "From: $myemail\n"; 
	$headers .= "Reply-To: $email";
	
	mail($to,$email_subject,$email_body,$headers);//<-----parses and sends data via email
	//redirects user back to main page or to a "thank you" page
	header('Location: index.html');
} 
?>

As you can see, the form accepts the data being entered after it validates that the inputs are filled out and then parses that data into an email. I added a few comments in the code to explain what some of the lines are doing.

If you’d like to use the above code in your project, just switch out the field names (like fullname, email, etc… ) with your own.

I hope this tutorial helps and if you have a better/more semantic way to do it, let everyone know in the comments.

*Syntax highlighting in this post is done by the excellent SyntaxHighlighter Evolved plugin.

GitHub

Really, really excited about this news: GitHub for Windows is finally here. I’m anxious to get started learning Git and the GitHub way. I’ll be posting soon on how it’s going.

Done With Themes

I found the perfect solution for my theme-ing issues. No more using someone else’s code when I can write it myself and use my own, simpler design. I’m now using the Toolbox theme which is semantic, HTML5 code and then a very minimal amount of CSS leaving plenty of room for styling but still giving you a baseline to get started. Perfection.

Now, on to making more content.