Posts in Website Development

Office Work Space

Create just about anything with this one plugin

June 20th, 2016 Posted by Website Development 0 comments on “Create just about anything with this one plugin”

Just as there is an app for everything, the same is true about web development. In this case the same is true about web plugins, CMS plugins to be exact. With the versatility and easy to use of a CMS (content management system), the ability to make your website do whatever you need has never been easier. With such a powerful CMS as WordPress, the potential of your site is endless. Due to the vast amount of helpful plugins and widgets, a WordPress website can . There are many plugins that are out in the market that are easier than others. Some which include features that you’ll never use, and other whose plugins are very broad and allow you to manipulate it however you want. My go to is a neat little plugin called Ultimate Posts Widget. This is one of my favorite plugins to use because it gives you the ability to use the post functionalities that already come featured in WordPress.

So what exactly does the plugin do? Well it displays posts from a specific category in a format which you define through the “Ultimate Posts Widget” settings. It also allows you to manipulate the way that it visual display of the post. While some plugins are great because of the specific case in which you may use the plugin, Ultimate Posts Widget is just the opposite. Since the plugin doesn’t have a specific purpose but to give you way more “post” options. These options include the ability to:


  • Filter by categories
  • Filter by current category
  • Filter by tags
  • Filter by current tag
  • Filter by custom post types
  • Filter by sticky posts
  • Select number of posts to display
  • Display title
  • Display publish date/time with custom format options
  • Display post author and link
  • Display post comment count
  • Display excerpt or full content
  • Display read more link with custom label
  • Display featured image and at any size
  • Display post categories
  • Display post tags
  • Display custom fields
  • Add text or HTML before and after posts list
  • Add CSS class to widget
  • Add widget title link
  • Change excerpt length (in words)
  • Order by date, title, number of comments, random or a custom field


Using The Ultimate Plugin

Difficulty – Easy


Step 1: Widgetize

Before we even begin and install the plugin, we must first setup the environment in which our posts will be displayed. This is achieved through the use of widgets, which are located under the “Appearance” section in the WordPress panel. In order to create a new widget area, we must add the following code to functions.php in your WordPress install:

Screen Shot 2016-06-20 at 2.19.34 PM


This will register the the widget inside of WordPress.
Now we must add the “sidebar” or widget area to our page template file. I highly recommend that you create your own page templates, in order to give you maximum control of your WordPress visuals and functionalities. (Find out how to create your own WordPress page templates here). Inside your WordPress page template file, you will this snippet of code to wherever you wish to display your future custom posts.

Screen Shot 2016-06-20 at 2.51.11 PM

Step 2: Install UPW (ultimate posts widget)

The plugin is called Ultimate Posts Widget, by Boston Dell-Vandenberg.

Screen Shot 2016-06-20 at 2.55.55 PM
Once installed you can head over to the widget’s section in your WordPress panel. You can now drag and drop the “Ultimate Posts” widget over to your widget box, which you named earlier. By clicking on the “Ultimate Posts” widget now inside your widget box, you can edit your widget to display or not display certain data.

Screen Shot 2016-06-20 at 3.05.43 PM

Step 3: Create Custom UPW template

The Ultimate Posts plugin allows you to create custom templates for displaying your posts. This is particularly great when using the plugin for multiple uses within your website, such as an event calendar, or for the entry of testimonials.


Learn how to make your own “Ultimate Posts” template pages, to display your posts as you wish here.

Note: Don’t forget that under “Template” in the Widget, you must select “Custom” in order to enter your own template file name.


Step 4: Create Post and Publish

Through the Ultimate Posts widget, you can specify which posts you want to display based on category. This makes the multi-use of the plugin possible.
Once all of the steps above have been completed, you may now go to your Posts and begin to write entries for the custom use of your choosing. Just hit under which category specific you want the post to be under, and hit “Publish”.


Adding even more functionality

(Completely Optional)

To further extend the power of the UPW plugin, you can download two great plugins called “Advanced Custom Fields” by Elliot Condon and “Advanced Custom Fields: Date and Time Picker” by Per Soderlind. These two plugins allow you to add additional fields in your “Posts”, which eventually means the ability to display these added values through the use of the UPW plugin.
Step 1: Download and install the Plugins.

  • First Plugin: “Advanced Custom Fields” by Elliot Condon
  • Second Plugin: “Advanced Custom Fields: Date and Time Picker” by Per Soderlind


Step 2: Create a “Field Group”

  • Click on “Custom Fields” found at the left hand side of your website’s WordPress panel.

{add screenshot of wordpress panel, showing this step}

  • Click “Add New” to begin adding your custom fields.
  • You can choose “Conditional Statements” to display in certain category types, which is a

great way to keep your post input data simple.

  • You can add any of the following field types:
    • Text (type text, api returns text)
    • Textarea (type text, api returns text)
    • Number (type number, api returns integer)
    • Email (type email, api returns text)
    • Password (type password, api returns text)
    • WYSIWYG (a wordpress wysiwyg editor, api returns html)
    • Image (upload an image, api returns the url)
    • File (upload a file, api returns the url)
    • Select (drop down list of choices, api returns chosen item)
    • Checkbox (tickbox list of choices, api returns array of choices)
    • Radio Buttons ( radio button list of choices, api returns chosen item)
    • True / False (tick box with message, api returns true or false)
    • Page Link (select 1 or more page, post or custom post types, api returns the selected url)
    • Post Object (select 1 or more page, post or custom post types, api returns the selected post objects)
    • Relationship (search, select and order post objects with a tidy interface, api returns the selected post objects)
    • Taxonomy (select taxonomy terms with options to load, display and save, api returns the selected term objects)
    • User (select 1 or more WP users, api returns the selected user objects)
    • Google Maps (interactive map, api returns lat,lng,address data)
    • Date Picker (jquery date picker, options for format, api returns string) <- This field is enhanced due to the addition of the second plugin mentioned in the beginning.
    • Color Picker (WP color swatch picker)
    • Tab (Group fields into tabs)
    • Message (Render custom messages into the fields)
    • Custom (Create your own field type!)


Step 3: Output your new fields in your “Posts”

  • Now that you have the fields that you want to display, you will add it to your UPW Template.
  • You can do this by using this function, with the name of your field inside of it: get_field(“your_field”’);

Call us now to talk over your project and

get an expert’s opinion

Post It Notes at the Office

How to Write Efficient Code (by example) Part 1: Databases and Loops

October 26th, 2015 Posted by Website Development 0 comments on “How to Write Efficient Code (by example) Part 1: Databases and Loops”

TL;DR – How to write efficient code when using loops

Bring as much code outside the loop as possible, especially lines that are computationally expensive (such as querying the database) because loops are O(n) “big-oh of n” and need to be run once for every input item, whereas code outside a loop is O(c) “constant time” and take the same amount of time regardless of input size.


One of the most beneficial classes I took in college was Analysis of Algorithms. In essence the class taught us what inefficient code was and how to write code that was not inefficient – this is a super valuable skill I’ve found that freelancers without college degrees seem to be lacking. But it’s not as complex as you might think. In this article, I will attempt to explain the core concepts I retained from the class, and show you how you can use them to avoid spending hundreds of hours rewriting your own code.

Some points before we begin:

  • This applies to all programming languages, because it has to do with algorithms, not programming
  • All code examples are written in PHP because I know the language
  • We will use the variable N to mean the number of items in our dataset. For example if N = 100, we have 100 teams in our database table below.

Example: Displaying Data from a Database

Problem: You have a database with a list of teams, and you want to print the names of the teams to the screen.[/vc_column_text][/vc_column][/vc_row]

Example 1: Inefficient Solution

One way to solve this problem is to simply loop over the table and display information as we go until we reach the end.

// prepare the statement
$statement = $db->prepare("SELECT name FROM teams WHERE id = ?");
$statement->bind_param("i", $id);

//set initial variables
$id = 1;
$success = TRUE;

//execute, fetch & print until no more results
while($success == TRUE){
  $success = $statement->fetch();

  echo $result . "\n";


Click here if you don’t know about using SQL prepared statements

This code will get the job done. However, when we look at the time it takes to run, the time and resources it takes to execute this algorithm grows proportionally to the input at unsustainable rates! In other words, if the number of rows in the database table (n) doubles, this algorithm will roughly double in the amount of time, memory, or processing power it will take to run, and after n > 10,000 or so, this algorithm is taking over 1300 milliseconds to perform, which is far slower than today’s standards. When tested at 100,000 records, this algorithm took a whopping 20 seconds to perform! It helps to make a graph of how the numbers increase (see below)


Running Times  for the Inefficient Solution

The execution time doubles when the number of rows in the database table (n) double. At n = 10,000 it takes 1.5 seconds to execute the script, and at n = 100,000 it takes over 20 seconds to execute!

n time (ms)
100 47
1000 230
2000 417
3000 538
4000 772
5000 883
6000 991
7000 1124
8000 1188
9000 1338
10000 1515
100000 20261

Why is this algorithm so inefficient? The $statement->execute()  line is inside the while() loop, causing the script to query the database (very high cost) every single time it needs to access a new record. This is fixed below to show a mega improvement.

Example 1: Efficient Solution

Here is a much better way to solve the problem! Instead of querying the database each time for every data point, now we are querying the database once and the only thing we have in our while loop is the fetch and print commands (much lower cost).

// prepare the statement
$statement = $db->prepare("SELECT name FROM teams");
$statement->execute(); //<-- Now this statement only executes once

//set initial variables
$success = TRUE;

//fetch & print until no more results
while($success == TRUE){
 $success = $statement->fetch(); //<-- loads data into a variable 
 echo $result . "\n";

Now that the execute line is taken out of the while loop, we are querying the database only once. We can see that there is about a 5x increase in performance from this one change in approach! That could mean the difference between your users waiting five seconds to refresh a page and waiting only one. This could mean the difference between a website that “feels” quick, responsive, innovative, and efficient and one that feels like it’s 10 years old.

Running Times  for the Efficient Solution

Instead of 1.5 seconds to display 10,000 records we now take 350ms. This will be noticeable (users tend to notice anything over 150ms) but it is a vast improvement over a 1.5 second hang time.

n time (ms)
100 47
1000 57
2000 99
3000 151
4000 161
5000 186
6000 275
7000 279
8000 298
9000 321
10000 351
100000 2080



Delving a little deeper: Analysis of Algorithms


As you may have noticed, both of these graphs look exactly the same. The only difference is the numbers on the scale on the left. There is one important conclusion to make from this:

As the input grows, both solutions will still steadily increase in the amount of time it takes to run the script. At 1 million records in a database, both of these solutions will take longer than a user is willing to wait. Both of these solutions are inefficient because they grow linearly.

This is because both of these solutions are classified as O(n) – pronounced “big-oh of n” – algorithms. This means that the cost increases at a linear function of n. To put that in perspective, code run outside a loop is O(c) “constant time” and take the same amount of time regardless of input size. Code that is in a nested loop is O(n²) “big-oh of n squared” and take geometrically more time as the input expands. This classification is extremely important to understand and is at the core of writing efficient code.

Stay tuned to the rest of the How to Write Efficient Code (by example) series to learn more about efficient code, how to analyze it, and why it is important.


Call us now to talk over your project and

get an expert’s opinion