WordPress News: How to use GIT for WordPress Development

Do you like Time Travel? Do you also like saving your work files? Well now you can do both at the same time by using Git to save your files while keeping track of each change, to each file along the way. Once you’ve saved (committed) a file in the project, the old version is saved forever allowing you to travel back through time to make changes or revert back to old files when needed.

Imagine your just uploaded your beautiful new custom theme to your WordPress site and you realize that you forgot to save your old CSS file and you’ve just overwritten the old one on your web server. You now have no way to revert back to your latest version of the old layout in case you have problems with browser compatibility in the new layout.

Git is a very powerful version control system that allows you to keep track of all your files during a project so losing file version along the way will never happen. This requires a few extra steps during your saving process, but it has saved the skins of many programmers from all over the world every day. Now, we should all try to save backups of our projects and files to protect from data loss and keeping old versions. Git takes that idea but saves each version of that file since it was created. It also protects someone from editing a file at the same time someone else is, preventing overwriting of each others new version.

Let’s take a look at the Git structure to get a clear picture of how the system checks out and references each file.

Git file reference structure

This table shows us how Git associates each file to the master project. Each time a change is made, a “snapshot” of the entire file structure is made. This allows us to see our project in front of us, while old versions are saved and hidden from view unless we physically use our time travel capability to revert. Additionally, if no changes were made to a file in a new commit, the old version will automatically be referenced instead of uploading the unchanged file into the project commit. These basic features are why Git is so powerful and efficient, that might explain why 42.9% of professional software developers reporting that they use Git as their primary content version control system.

To learn more about Git the features and the benefits, please refer to these links from which this article was sourced.

• Beginner Tutorial: How to use GIT for WordPress Development
• Git Basics
• Git: Community Information Article
• Eclipse Community Survey 2014 Results

Forms: The Real Connection to the User

A form allows a user to enter data that is sent to a server for processing.
Wikipedia

Forms on WordPress have the same limitations that an HTML form has. Granted, WordPress comes with a built-in form-making tool to make a contact form, and a tutorial for how to use that can be found in the “More Information” section below, but that’s not what I’ll be talking about.

WordPress also has numerous Plugins that allow you to utilize a tool for creating custom forms, or you could create your own with some HTML. If you just install a Plugin, the creation process is dictated by that specific Plugin, so in this tutorial I’ll be talking about making forms with raw HTML.

What Can a Form do?

A form consists of a number of varying input types, that you supply to the user, in hopes of receiving feedback. There are 23 different input types, along with the “select” element for creating a drop-down list. The full list of input types can be found on an HTML input tutorial page.

Since forms have so many input types, the applications for their use are almost endless. You could create an embedded calculator to determine a person’s BMI (Body Mass Index), or you could use a form to have users complete a survey. You could even use a form to allow users to alter program variables for software that you are running.

How do I Make an HTML form?

Technical Cafe actually has a great video that goes over the basics of creating an HTML form. Just watch the video below, and you can apply the basic input types they talk about with other input types to fully utilize the form creation possibilities of HTML.

More Information

• Contact Form – WordPress
• Ninja Forms Plugin
• Form Maker Plugin

WordPress Words: HTML Element

An HTML Element is an individual component of an HTML document or web page. HTML is composed of a tree of HTML elements and other nodes, such as text nodes. Each element can have HTML attributes specified. Elements can also have content, including other elements and text. Many HTML elements represent semantics, or meaning.
Wikipedia.org.

Example: The paragraph element <p></p> is made up of the opening <p> and the closing </p> tags.

About HTML Elements

HTML is a markup language which means that it is written with codes that can be read by a person, without needing to be compiled.

An HTML element is the opening tag that kicks off and tells the browser that everything between that and the closing tag in an HTML document.

For the full list of HTML elements use this index.

For More Information

• HTML Elements and Attributes – Elizabeth Castro
• HTML Tag Chart and Codes – Boogiejack
• Eight Cheap and Easy Ways to Learn HTML – Abouttech

Web Accessibility: Lists

Why should we use lists? Why are lists important to web accessibility? How do are lists need to be structured in compliance with web accessibility laws?

Using ul, ol, and dl elements for defining list content ensures users with disabilities can easily distinguish a list from the rest of the content and move between items of a list and between lists themselves. You should write link text that clearly communicates the target of the link making navigation easier for all users. Using link lists also makes it easier to find and update links on web resources.

According to the Web Accessibility Guidelines (WAC), website designers and developers are required to:

WordPress Words: Template Tags

Template Tags: A template tag is PHP code that dynamically creates and displays design choices on a WordPress Site. Template tags are found within Templates and Plugins.
WPBeginner

Example Usage: We’ve updated the post title template tag in the single post template file to be in an h1 heading not h2.

About the Word

WordPress Themes set the design for a WordPress site. Themes include template files for different aspects of a WordPress Theme, i.e., the text colors and fonts for a heading. Inside of each template file are WordPress code blocks represented by template tags, PHP code that specify the parameters of those design decisions.

Domain Name Services: Postman of the Internet

Domain Name Services (DNS) is a service which exist to help us humanize the addresses of networked resources. Humans remember words as a whole easier than numbers representing octal based Internet Protocol addresses of those same networked resources be them across the Wide World Web or just an arms length away on our local network.

That was a mouth full. Essentially through DNS you can type in a URL into your favorite web browser and through the process of name resolution your system contacts a server acting in your behalf to find the correct IP address that matches the human oriented address you type in.

Sounds simple but a lot of chatter between various servers near and far may happen just to pull up that favorite site that you wish to view. First your own system will see if it has the particular IP/URL pairing locally in it’s own tables. On your computer this information will be kept in a host.txt file and depending on the operating system the location varies.

The SEO of the HTML Anchor Text

You finally finished your website and uploaded it to the Internet. Maybe it is a blog, a personal website, or an e-commerce website that sells products. In all of these cases, you now wait to see how many visitors come to the website or read your blog article.

How to Create and Use Abbreviations in HTML

Our friend the <acronym> tag has been deprecated with the release of HTML5, so how does this affect the use of acronyms generated with HTML? Well, we have a new friend! The <abbr> tag joins the HTML element list with HTML5.

Interview with Troy Uyan: Developer in the Making

Browsing ClarkWP Magazine you have surely ran across a good few articles by Troy Uyan, but do you know Troy past his profile pic and awesome articles? A student here at Clark Collage, he is studying web development, but leaves in his wake much more than required assignments.

A primary example of Troy’s contributions to the web is his work helping develop Shulnak Village, a project that supports education and literacy in rural Tibet. Though his is contributions alone make a grand statement, you would be amazed to discover that this site boasts many hidden features supplied by Troy. These features include not only a fully responsive layout but also use of WordPress as a CMS. He accomplished all of his work for Shulnak Village before even finishing his classes on responsive design or WordPress.

Troy finished those classes on responsive design and WordPress and put his new found skills to work immediately. He created his own personal site, Troy Uyan, and had this to say about the process:

Why “Post by Email”

This is the first time a core feature has been removed from a WordPress and replaced by a Plugin. There are some concerns about removing a core feature and what will actually occur with the code that is currently on websites. The new “Post by Email” plugin created by Kat Hagan is scheduled to replace the core feature.

WordPress Tavern reached out to WordPress core developer Andrew Nacin and

Andrew Nacin Indicated that “There were some nagging concerns that outright removing the feature from core could inconvenience users who still rely on it. That doesn’t detract from Kat’s work at all. Her plugin is fantastic and it’s definitely a huge improvement over what’s in core now. It was never designed to be pulled into core, but rather to provide us an opportunity to remove what’s in core now.”

For more information on the changes to the “Post by Email” function go to WordPress Codex “Post By Email”

Extending Your WordPress Plugin

Ian Dunn discusses different ways to customize WordPress plugins without losing your changes after upgrades. The main takeaway is to use the functionality and Code Snippets plugins to create and manage changes. Additionally users are encouraged to get in touch with the plugin creator.

For more information checkout Ian Dunn’s article, “The Right Way to Customize a WordPress Plugin” and WordPress Tavern’s article, “How To Extend A WordPress Plugin Without Losing Your Changes.”

WordPress Improves Human Time Difference

WordPress has improved the “Human Time Difference” feature that displays on posts. Up to 60 days the posts will say “Posted 33 days ago” as before, but on posts older then 60 days instead of “Posted 3 months ago” the line will now display the exact date it was posted on, rather then an arbitrary month count. Themes had individually done this before, but this has now become a WordPress standard.

An Abstract (and brief) Look Into WP Theme Development

Introduction

This article is first and foremost written to give insight on what comprises a WordPress Theme. Though I will be touching on many things needed this is not intended to be a how to on theme development. It is more so an insider look at the processes involved and the code needed to achieve various functionalities within the themes themselves.

What We Will Be Covering

For this article, we will be using a theme I am currently developing as a case study. We will be covering the basics of the theme as well as some of the more advanced features such as custom shortcodes, custom post types and various functions used throughout the theme.

Theme Basics

First off, if you don’t want a primer into themes, please skip to the next section.

The following are the basic constants when developing WordPress Themes, the core items and methods to turn what otherwise would be plain static HTML into a dynamic template file in a WordPress Theme.

The most important thing to understand about WordPress Themes is that they are modular. When talking WordPress, that means that parts of the templates are broken down into modules that are called in template files rather than hard coding them into every file. So, what does that look like? Lets take this extremely basic example static HTML5 page and break it down into WordPress modules.

Inline CSS Styling in WordPress

WordPress by default strips out any code in posts and Pages that may be considered “code” or malicious. Yet, there are ways to add color, splash, and fun to a WordPress post or Page without WordPress Plugins to overwrite the default functionality of WordPress. Here’s a quick how-to of what you can do to jazz up your posts and Pages (and when not to) on WordPress.com or WordPress.org without using a Plugin or going into the CSS file.

How to Code POUR-ly

Web accessibility is huge; especially with such a large percentage of the world’s population being considered “disabled” it is important to make your website as accessible as possible. Lack of patience for a few extra lines of code is quite lazy, when the end result is so critical. Here’s a few tips on how to code POUR-ly and make your website accessible!

Let’s look at few things you can do specifically in the code of your site.

1. Properly formed HTML links: All links and URLs should be wrapped in anchor tags and have a title.
2. Proper Image Formatting: All images should have an alternative text for screen readers to describe the image. They should also have width and height parameters in the IMG HTML tag so that the page loads accordingly even if the image cannot be displayed.
3. Emails are Mail-to Links: Your email addresses listed on your site should be mailto: hyperlinks, not just plain text.
4. Proper Text Formatting: Bold text should be made so with the “strong” tag and italic text should be made so with the “em” tag. If you want text to be bold or italic but not be read different by screen readers you can use a “span” tag with the “text-decoration: bold” attribute as an example.