Adding id attributes to H2 tags in WordPress to use as anchor tag

wordpress_h2_tag_anchor

We occasionally receive emails from our visitors with a specific question that we can refer to an article or section of a page on our website. However, with our lengthy articles, often times we find it frustrating to direct the user to a page with few lines of instructions. This is where anchor tags come in for the help. We decided to manipulate the content and add anchor tags to all our H2 tags.

Here is a feature that we thought is missing in WordPress

Add this code in your functions.php file and all your H2 tags will get an id attributes. Here we use WordPress’s built in sanitize_title_with_dashes function that’s used for creating permalinks when you type in your new post title.

// This function adds nice anchor with id attribute to our h2 tags for reference
// @link: http://www.w3.org/TR/html4/struct/links.html#h-12.2.3

function anchor_content_h2($content) {

    // Pattern that we want to match
    $pattern = '/<h2>(.*?)</h2>/';

    // now run the pattern and callback function on content
    $content = preg_replace_callback($pattern,
            // function to replace the title with an id
            function ($matches) {
                $title = $matches[1];
                $slug = sanitize_title_with_dashes($title);
                return '<h2 id="' . $slug . '">' . $title . '</h2>';
            }
            , $content);
    return $content;
}

add_filter('the_content', 'anchor_content_h2');

And there we have our anchor tags. Now we can link to specific sections of our website like How to overwrite a CSS rule. Add some smooth scrolling if you desire, and you will have an impressive and user friendly website.

Why this feature is not a default in WordPress you ask?

Well, according to W3C Recommentatin for anchor tags, you can not have id attributes declare the same name twice in the same document. And since these elements are coming from the content editor generated by the user, there is no way to produce a valid markup if users use the same sub headings in the same post.

Start with an Idea and do the Business Analysis – Web Application Tutorial Series

online_course_webapp

In this tutorial, we will explore business analysis and the essentials to write our first software requirements document. Taking an idea to the next level requires a little bit of planning. This is the planning phase of our web application development, also known as Requirements Engineering phase. If you are an entrepreneur, and would like to bridge the gap to development and software engineering world, this is that bridge. In this and next tutorial we will create a requirements document based on IEEE Recommended Practice for Software Requirements Specifications. We will start a basic requirements document for an online education and training app to be used as an employee training application for our imaginary client or prospects that we might be interested to sell this application to later on. We will build more on these requirements as we proceed with later versions of our application.

We started these web application tutorial series with an introduction to web apps and a very basic AJAX CRUD tutorial based on Zend Framework 2. However, our goal is to start developing complex web applications that could do more than just a simple create, read, update, and delete functions. Therefore, let’s start exploring what our application should do, and let’s start developing our initial requirements document. Continue Reading Start with an Idea and do the Business Analysis – Web Application Tutorial Series

Stop Using PHP 5.2!

elePHPant

As a contributor to the open-source community I often get email from users about errors they get from their server. Most often, a close scrutiny of their server’s configuration leads to finding out they are using PHP 5.2 or earlier. Which would have been fine if we lived in a time period between November 2, 2006 to January 6, 2011. I can give you exact dates because the company that creates and maintains the language gives you guidelines on when to update and migrate to a new release. Continue Reading Stop Using PHP 5.2!

Zend Framework 2 Pagination & Sorting Tutorial

Zend_framework_pagination_tutorial

The purpose of this tutorial is to demonstrate pagination features of the Zend Framework . As an added bonus I will show you how to combine pagination and data sorting to display sorted tables in your ZF2 web projects. For the purpose of this tutorial we will extend Rob Allen’s famous Album Inventory Tutorial. You can download the complete source code from Github and view the completed project’s live demo.

Continue Reading Zend Framework 2 Pagination & Sorting Tutorial

Zend Framework 2 – Simple Web Application – CRUD using Ajax Tutorial

zend_framework_sticky_notes_application

In this tutorial we will create a complete Zend Framework 2 application and explore some of the features it provides. We will create a sticky note application based on the styling provide by Codepen. This tutorial is similar to the brilliant inventory tutorial provided by Rob Allen. The major difference is that we will spend more time on styling and we will handle the Create, Read, Update, and Delete (CRUD) operations dynamically using jQuery Ajax. You can download the complete source code from Github and view the completed project’s live demo.

Continue Reading Zend Framework 2 – Simple Web Application – CRUD using Ajax Tutorial

How to build your first web application – Tutorial series

Web App Tutorial Series

So you want to start developing your very first web application? You want to know how you can start quickly and develop your first web application? Well here is the good news, you are at the right place. With these web app development tutorial series we are here to guide you through the development of your first web application and more. But, there are few points before we start. First, we have to mention that these tutorial series are meant for more technical audience with prior web design and development experience. Second, there are different approaches to even developing a simple application. You can copy and paste some code together and call it a success, or take a stricter engineering approach and build a code base that would have test cases, easily extendable, or even scalable for future versions, should you decide to build more features on your existing architecture. In this tutorial series we are going to develop a very simple web application, and build more and more on the same code. Because in real life that’s how software evolves. We will also cover some methodologies and software engineering concepts such as Rapid Application Development (RAD), and Continuous Integration (CI), and many more techniques and best practices that would help you with developing more complex systems. We tried to keep these methodologies separate from the coding tutorial sections, so people familiar with the methodologies could jump straight to the code.
So let’s get started with the concept first, and what you should know before starting your very first and simple web application.
Continue Reading How to build your first web application – Tutorial series

4 simple techniques to quickly debug and fix your CSS code in almost any browser

Food Web Application

You have designed the perfect layout for your new and upcoming website. But now converting all that beautiful Photoshop PSD layered file into a pixel perfect code is the challenging part. It is not challenging because you don’t know how to code, but more challenging because different browsers render your code differently, even when you are using a completely valid CSS code to display that awesome semantic HTML5 code you have written. This is even more frustrating when fixing a bug in one browser now becomes a new bug in another browser. Even if that’s not challenging, now imagine you are assigned to fix someone else’s code that’s all over the place. Often time this last case is the one that makes you pull your hair and say numerous WTFs before you completely understand what is going on in their code, because you probably know your entire style sheet by heart and this new code is no where close to any coding convention. However, moment of getting down and dirty with debugging that CSS code is much simpler and less frustrating than before, thanks to these very simple tools and techniques.

Continue Reading 4 simple techniques to quickly debug and fix your CSS code in almost any browser

301 Redirect, 302 Redirect, 303 See Other, 410 Gone. Do you know how to use them?

You have had your site for sometime and now it is time to make some changes to it to keep it on par with the ever fast moving technology. Thus, you decided to upgrade your site or moved it to an entire new domain. Maybe, just started using Search Engine friendly URLs or just decided to move one document to a new location. Bottom line a document or a directory that was at location “Old-URL” has been moved to “New-URL” and therefore not accessible at the “Old-URL.” This can greatly effect your Page Rank and undo all the hard work you have put into Search Engine Optimization (SEO). Moreover, all the URLs linking in to your site from external sources, such as emails you sent, links you shared on social media websites, and any place you published those link are now broken.

Continue Reading 301 Redirect, 302 Redirect, 303 See Other, 410 Gone. Do you know how to use them?

Somebody told you to use WordPress for your website, but do you know why?

You wanted to start a website. You asked your more tech savvy friend for help, or just searched on Google and found some articles that all talk about using WordPress as a starting point for creating your website. But…

Do you know why they tell you to use WordPress?

Or even if this was your choice and you would like to know if you have made the right choice to build your website on WordPress read on.

Continue Reading Somebody told you to use WordPress for your website, but do you know why?

Hello World! We do Web Engineering

Hello World!

In programing world, Hello World is the most basic example piece of code to see if the programing environment is working or not. And here we start our first blog post. We are live, finally.

YES! It Works.

I am very excited to announce that starting today, this website will be a place for us to share and collaborate many interesting projects and articles with all our Web Engineering fans, and those who want to learn more about Web Engineering, development of Web applications, mobile apps, website design, user interfaces (UI), user experience (UX), patterns in Web Engineering, and anything above, under, and in between those.

What is Web Engineering?

You might ask, what is Web Engineering? is it different than Web Development? How about Web Design? Is it different than Web ____?

or even Software Engineering?

No, it is not that different. These are all relative terms, except the approach in Web Engineering is slightly different. In fact in Web Engineering, most of the approaches are systematic and similar to Software Engineering, but with more emphasis on development of products that rely on Web. Some may call it Software Engineering for the Web and the person that performs the task as Software Engineer in Web. We call it Web Engineering, and the person that performs the tasks as Web Engineer.

Here is a more concrete definition from a book with the same title “Web Engineering.”

Since its original inception back in 1989 the Web has changed into an environment where Web applications range from small-scale information dissemination applications, often developed by non-IT professionals, to large-scale, commercial, enterprise-planning and scheduling applications, developed by multidisciplinary teams of people with diverse skills and backgrounds and using cutting-edge, diverse technologies. As an engineering discipline, Web engineering must provide principles, methodologies and frameworks to help Web professionals and researchers develop applications and manage projects effectively.

And another one from a different book called “Web Engineering: The Discipline of Systematic Development of Web Applications”

Modern Web applications are fully-fledged, complex software systems, and in order to be successful their development must be thorough and systematic.

This book presents a new discipline called Web Engineering taking a rigorous interdisciplinary approach to the development of Web applications, covering Web development concepts, methods, tools and techniques. It highlights the need to examine and re-use the body of knowledge found within software engineering and demonstrates how to use that knowledge within the Web environment, putting emphasize on current practices, experiences and pitfalls.

There might be 100 other definitions out there, but at the core, it all boils down to the principles and the systematic approach to how a Web Engineer approaches solving a Web product, being a Web app, mobile Web app, a framework, a complex website, a simple website, or even a Web page. The list does not end there. Web Engineering approaches even extend to the components that work within Web pages, such as a piece of JavaScript plugin, or an Object Oriented approach to CSS. The list does not even end there either. It even extends to practices that have nothing to do with the actual code itself, such as project management, requirements engineering, test plans, code refactoring and documentation, risk analysis and disaster recovery of Web systems, and many many more practices mostly inherited from Software Engineering.

We do Web Engineering

After graduating with Software Engineering degrees from University of California, Irvine, our passion to develop websites led us to start our own company, Big Employee. Based on experience working on different projects and clients from variety of industries, we noticed that happy clients are often the ones that their projects complete on a timely basis and fast. (Well, not a huge discovery in an information age, where attention spans are the shortest in the mankind history.) Working collaboratively and simultaneously on the same project was the main reason for us to adapt this approach. It was out of necessity, but the gain in productivity and quality of the final product was very noticeable to the time when we were freelance web developers few years ago. Implying programming standards and best practices in our Web Engineering approach is the reason that professionals that have to maintain our code are glad for working with us.

At Big Employee, we love to challenge extends of our knowledge, or what has been done previously on the web. Thus, we face challenges that makes us search Google if any one had the same problem before, and if they have found a solution to that particular problem. Sadly there are times that we find no solution on the Web, and have to go back to the problem and craft our own solution. On the other hand, in most cases a forum link from Stack Overflow or some other forum, or a blog post related to that topic leads to the anticipated answer. Usually there are many people facing the same problem, however the proposed solution in that blog post is often not the best way of solving that problem. For example, we have seen solutions that suggest modifying core of the platform or framework, which might cause major problems with an automatic or even manual update to the framework. Although, this sometimes might be a good enough solution for many hobbyists and freelance developers out there, it may cause more problems later. What if some one has to pickup the code and continue working on it, or manipulate the results of that code and write another algorithm on top of a now slow algorithm found and implied from that blog post.

The reason we started this blog, we thought it will be a good resource to share some of our works, open source projects, and our expertise with other developers and whoever visits this website. We wanted to write about challenges we face during development of our project and how we solved it, so if someone else has the same problem will find our solution, as we often find solutions to some of the problems we face on other websites. Also, teaching is other passion of ours. We will post articles on how to create web applications, plugins, themes, interfaces, tips, tricks, or even business aspects of being a Web Engineering company, and may other related topics. I hope we learn something new from this journey, make new friends on the World Wild Web, and hope our articles be educational and amusing for our readers.

We are Open for Business

Lastly, we are open for business. If you have a project and would like to discuss, share an idea, request a tutorial, have a cup of coffee and get to know us, or just simply want to say hi , send us an email, or a tweet to @BigEmployee. We are looking forward to hear from you.

 

- Big Employee Team