4elements, Amsterdam, Holland

  1. 100% relevance worth $2,780,060?

    The other day I was registering several extra domain names for my current business.

    Something to attract new business, so ending up with 4elements.amsterdam, 4elements.consulting, 4elements.design and 4elements.today for special offers….

    Than it hit me what if, what if I could register “of.today”… A 2 letter domain? This is quite unique.... so I got it!!!!

    Millions and millions of people search on “news of today” every day, well I got it, news.of.today. 100% relevance between phrase and url.

    Weather of today, tweet of today, deal of today and many other possibilities have a 100% relevance between search phrase and url, I got curious and googled on websites that could tell me anything about how much a domain name could be worth.

    www.of.today is worth $2,780,060

    I have setup a website, www.of.today, and several subdomains like, news.of.today, now see what 100% relevance will do….
    To be continued….



    Leave a comment › Posted in: Projects

    1. How to Develop a Membership Site With WordPress: Part 3

      Final product image
      What You'll Be Creating

      Earlier on in the series we covered how to customise the WordPress login and registration forms. We then added some custom fields to our registration form. Today, in the third and final part of this series, we will be covering how to develop a “my account” section for your site’s users whereby users can edit their profile information.

      Page Setup

      The first thing we want to do is create a Page Template to house our content. I like to prefix my page templates with the word “template”. So my file is called template-user-profile.php and the opening PHP looks like this:

      I’ve saved this in the root of my theme directory. If you are unfamiliar with WordPress Page Templates I suggest you read the link above. They are extremely handy.

      Now let’s head to the WordPress back end and make a page named “profile”, and in the Page Attributes meta box assign it our newly created page template. Once you have published this page, you should have a blank page on the front end: http://yourdomain/profile.

      User Profile

      Now to inject some content into our page. We want the structure to be page content (i.e. whatever is written in the WordPress WYSIWYG) and then our profile form to follow.

      It’s often helpful to get the code from page.php and use that as a starting point for your Page Templates. This code differs a bit depending on your theme, but it will most likely contain a loop that spits out some page content. The content part is normally fetched using the WordPress function get_template_part(). Right underneath where the content has been retrieved, let’s insert our form HTML. So to recap:

      1. Copy and paste the code from page.php into our Page Template.
      2. Find where the content is being output.
      3. Right under that, insert the following code and then we’ll walk through it:

      There's nothing crazy going on here: the form is using Bootstrap markup as our theme is built on Bootstrap. Other things to note are that the form is being sent using the POST method and we have included a wp_nonce_field—this is a type of security token that helps prevent malicious attacks. If you are unfamiliar with WordPress's Nonces, I'd suggest having a read of this article.

      Retrieving the Data

      With that in place, you should have a form on the front of the site, but it's not doing much. We want it to display the data we have for the logged-in user. You may have noticed the value attributes in our form are echoing out some PHP.

      value="<?php echo $user_info->first_name; ?>"

      Right now that $user_info object does not exist as we have not written the code yet, so let's start there. Paste the following code before our form in template-user-profile.php.

      Using some WordPress native functions, it gets the current user's ID, and with that we are able to get the user's data. This is stored in an object called $user_info, and as demonstrated above we can retrieve user data quite easily. To see all the data stored in that object, you can run a var_dump like so: <?php var_dump($user_info); ?>. This can be useful for debugging or just to see what you can access.

      Processing the Data

      There is one final piece to the puzzle, and that's to process the data, thus allowing users to edit their profiles. In order to keep things organised, I have put the membership code into a file aptly named membership.php. This is in the lib directory and has been included in our functions.php file. Once you have done this, open your newly created membership.php file in a code editor, and let's make the function that will process the users' data.

      First, let's quickly run through the logic. When the submit button is hit, we want to check that our nonce field has been sent—this checks that the data is coming from the right place.

      If that condition is met, we want to get the current user's ID as we will need this to store the data against. Then we want to arrange our data into a structure WordPress likes—in this case it's an array with specific keys. Before saving the data, we also want to validate and sanitize it. And lastly we want to display messages to our user, either of success or errors.

      And the code for all that looks something like this:

      Now you might notice that the data is being saved using three different WordPress functions:

      • update_user_meta() for the Twitter name
      • wp_set_password() for the password
      • wp_update_user() for the remaining data

      And you are right to question this. Basically the custom meta data (the Twitter name) needs to be processed using the relative function and not the general update user function. As for the password, while it can work with wp_update_user(), I have had issues with it and prefer to use this method. Remember this is only a guide, and often the code is aimed at demonstrating different methods for achieving your requirements.

      Okay, so now we have our function to process the data, but it's not being called anywhere. At the end of our function you can see there is an action associated with it. So to call that function we just need to use the WordPress provided: do_action();. So paste this line above your form in the User profile page template we created earlier:

      <?php do_action( 'tutsplus_process_user_profile' ); ?>

      With that in place, when we submit our form it should run through our function and process the data.

      Error and Success Messages

      Error and Success Messages

      Our profile form should save or reject the data now. Perhaps the two passwords were not the same and did not save. There are no messages to provide user feedback. Let's save our users some grief and give them some messages.

      In our tutsplus_process_user_profile() function you may have noticed it appends different query strings to the URL depending on the result of the processing. So if everything is saved and successful then our URL will be appended with ?profile-updated=true, and these vary based on the results. What we need to do is trigger a message based on these responses.

      Below I have used a filter to grab onto the content, and through the magic of $_GET we can check the parameters and spit out what we need to.

      Okay, not quite there—we are using a function called tutsplus_get_message_markup() above, but we have not yet defined it. It takes in two parameters:

      • a string: the message to display
      • a string: the severity of alert to show based on Bootstrap 

      So let's define our tutsplus_get_message_markup() function:

      Great. Now our members can see if their data is being saved or not.

      Extra Credit

      So now we have a working prototype for a membership site. Much of this functionality ships with WordPress, but we've styled and tweaked it to make it a better experience for our users. So now let's just dot our 'I's and cross our 'T's to improve the experience just that little bit more.

      Firstly, we want to keep non-logged-in users from being able to access the profile page. A simple redirect to the home page will do. I've made a function that does just that, and I call it on pages I want to be accessed exclusively by logged-in users.

      Here's the function, which is placed in membership.php:

      Now we can simply call the function at the top of our User Profile page template.

      Next up we want to keep users—well, subscribers—out of the admin area. And on top of that, let's remove the admin bar for logged-in users. Again let's put this in our membership.php.

      And finally, it's not very easy to navigate the login/logout screens. Let's add some user-specific navigation. What I've done is create a function that outputs the relevant code, and this is then called in our templates/header.php where the main navigation is rendered.


      WordPress is an amazing foundation for a membership application. It already has so much of the functionality associated with this type of application. On top of that, the folks at WordPress have made it pretty easy to hook onto events and filter content so we can extend what is already there.

      I hope this has provided you with the methods, ideas and knowledge to develop your own membership sites. This is by no means a full guide on this topic, but rather it serves as a foundation.

      Any feedback is welcome, and I shall do my best to answer any questions in the comments.

      Things to Note

      Please note: if you are downloading the code from the GitHub repository, it includes all the files to get your theme up and running. The idea is that you can grab the repo and just run the necessary Gulp and Bower commands and you'll be away! If you just want the files that contain code specific to this series, the files are listed below:



      Leave a comment › Posted in: Daily

    1. Create a React Class in 60 Seconds

      React is a JavaScript library built and maintained by Facebook that aims to make it easy to build user interfaces using, you guess it, JavaScript.

      In this video, we're going to take a quick look at how easy to is to get started using React. We'll be learning a little bit more about React, as a library, and we'll see how we can begin implementing it in our projects.

      As mentioned in the video:

      React is a JavaScript framework for building user interfaces. Unlike other front-end JavaScript frameworks, it doesn't provide everything you will need to build a web application. Instead, it focuses only on the view layer. You use React by creating "chunks" of the overall view; these "chunks" are properly called components.

      This is arguably one of the most important takeaways. The library doesn't aim to be full stack. Instead, it focuses on the front-end, unlike many of the tools that we see today.

      Don't hesitate to leave your comments and feedback in the comments as we'd love to feature more content like this based on what you, as the audience and our readers, are seeking to learn!

      In the meantime, don't hesitate to take a look at the React documentation.

      Want More React?

      If you're interested in seeing an application of React in the wild, then perhaps check out Quotes on CodeCanyon. It's an iOS application built using React. Its goal is to provide an example application for how you can get started with using React to build iOS-specific applications. 

      You may also be interested in the following courses:



      Leave a comment › Posted in: Daily

    1. A Beginners Guide to Titan Framework: Creating an Admin Panel With Titan

      The WordPress admin panel is pretty open for modifications and web developers have made the most out of it. These modifications are more common in themes due to the extended level of functionality, but you can find a complete set of option frameworks in some prominent plugins as well. Let's review what can we do inside the admin panel when it comes to creating options with Titan Framework.

      Titan, being an options framework, helps add admin panels for your development project by writing only a few lines of code. Today, I will explain how you can create admin panels in Titan Framework. Not only this, I will also retrieve the saved values at the front-end. So, let's begin!   

      At this point, I assume that you have set up the following:

      • a demo WordPress installed on a local machine for testing
      • Titan Framework plugin installed and activated or embedded in your theme
      • titan-framework-checker.php file included in your project, be it a plugin or a theme

      Creating an Admin Panel

      First of all I am going create a simple admin panel, add options to it and get their values at the front end. Here is the code for it.

      Lines 3–9

      This is the basic setup of Titan which I have already covered in my previous articles, so you should definitely read them. Here in the code I have added my function as an action to a hook called tf_create_options. Then I've registered an instance via the getInstance() function which initializes a unique Titan instance with your theme/plugin/package name. In my case I am giving it a unique parameter 'neat'. A unique instance in the start of our function is needed to create a context of where the options are going to be created.

      Lines 15–17

      This code adds a new admin panel in the WordPress dashboard. The createAdminPanel() function creates a new panel in Titan Framework. So, I created an admin panel, i.e. $aa_panel. It will appear against the name 'Neat Options' in the dashboard.

      The WordPress Dashboard

      The above screenshot displays the result of this code.

      Lines 23–28

      Now I added options within the admin panel $aa_panel. Line 23 has the createOption() function which is used to create options within the admin panel $aa_panel. For now, I'm adding only a single option which is a text field named 'My Text Option'. The createOption() function is an array and carries several parameters like name, ID, type, etc.

      The most import parameter is the 'id' , which is basically the name of our option and our only way to reference it when we need to use it. Make sure all the ids you add are unique since no two IDs can be same, which can lead to a PHP Fatal Error.

      Text Options

      The screenshot above displays the 'My Text Option' field which I have created. That's easy—a few lines of code, so no messing around with HMTL.

      Lines 34–36

      Now it is within this text field that I am going to enter my value. So, I will need a "Save" button here since there is no other way for me to save the options. Hence, these lines of code will add a Save and a Reset button in my admin panel options.

      Saving Text Options

      This is the final look of my development so far, where you can find an admin panel Neat Options and My Text Option in it.

      Getting Saved Values From the Neat Options Panel

      I have discussed this process of getting the saved option values previously in detail. Make sure you read the series. Hence, I am directly writing the lines of code which will retrieve the values. You can add these lines in any file of your web development project.

      I will recommend that you create a new page template and add the code within it, so that you can see for a fact if everything is working as it should.

      First of all, we get a specific instance of Titan. Then I've used the getOption() function which will get the saved value from the aa_txt, where aa_txt is the ID of the option which I created within my admin panel.

      Note again that you need to give a unique ID for every option because it is not the 'name' but the 'id' which distinguishes one option from another. In the end I used the echo command to print the saved value in the aa_txt option.

      Displaying the text option value

      For example, I entered AA-Text-Option and saved the result. Let's find out what appears on the front-end.

      The text option on the front-end

      The above screenshot displays the result. You can find AA-Text-Option being displayed in the red highlighted area.

      Creating an Admin Panel

      Now, what about a more complex case? In this section, I will create a new admin panel within which there will be admin tabs and options. Excited? Let's start!

      First of all I created an admin panel. Previously, I created a panel named 'Neat Options', so I'm naming this new panel 'Neat Options 2'. Here's its code:

      First of all, I registered a unique instance of Titan and then I created an admin panel $aa_panel2 via the createAdminPanel() function. It will appear against the name Neat Options 2 in the WordPress dashboard.

      Neat Options 2 in the WordPress dashboard

      The screenshot above displays the result. It also shows the first admin panel (i.e. Neat Options) which I created in the previous article.

      When you click Neat Options 2, it will be empty. Now there are two approaches: either you create options directly in it, or you create admin tabs for extended functionality and then create options inside the tabs. The former has been already discussed. So, let's look at the latter case.

      Creating Admin Tabs

      Tabs are one of the best ways to organize your admin panel settings or options. For WordPress themes which contain a lot of options, tabs greatly facilitate to ease the user experience. Therefore, Titan being an options framework helps to create tabbed settings in WordPress. Let's find out how.

      I made use of the createTab() function in Titan Framework for creating admin tabs. In the above-mentioned code, I created an admin tab named $aa_tab1. If you look at line 1 of this code, you can see that a new tab is being created inside the $aa_panel2 panel. This tab is named 'Tab 1'. When you are creating a tab via createTab(), it is very important to point out in which panel you are creating it. You can see Tab 1 in the screenshot below.

      Tab 1 in the Neat Options

      Creating Options Within 'Tab 1'

      Let's now create an option within Tab 1.

      The createOption() function adds a new option inside $aa_tab1. Again keep in mind that the IDs should always be unique. The ID will be used to get the value of this option. In this case the ID of the option we created is $aa_txt_in_tab1_panel2. The last few lines of the code create a Save button (we have seen that before).

      Add a Save Button to the Neat Options

      The screenshot displays a text field, i.e. 'My Text Option', which is added inside Tab 1. You can also find the Save and the Reset button.

      I'm sure that the things explained so far are quite clear. How about creating another tab?

      Within the same admin panel, I am creating yet another tab named 'Tab 2' in the same manner. But this time I will add a text area option in it.

      In lines 1-12 of the code written above, I've created a new tab, i.e. Tab 2, which is saved in the variable $aa_tab2 inside the admin panel $aa_panel2 using the same createTab() function. Then I created a textarea type option within Tab 2 with ID aa_txtarea_in_tab2_panel2 (lines 12-17). And finally a Save and a Reset button in the end.

      Here is the result:

      Adding a Textarea

      To sum up, I created a new admin panel Neat Options 2, and then added two tabs in them called Tab 1 and Tab 2. Then I placed type text options in Tab 1 and a type textarea option in Tab 2.

      Adding a second tab

      The above image displays the results so far. Now let's jump to the actual thing, i.e. getting the saved options' values.

      Getting the Saved Options' Values

      The following lines of code will be used to retrieve the saved values from the two options we created. The getOption() function is used on lines 11 and 14, which is retrieving the values for $aa_txt_in_tab1_panel2 and $aa_txt_in_tab2_panel2 options in the new admin panel. I saved the values in two variables, i.e. $aa_txt_in_tab1_panel2_val and $aa_txt_in_tab2_panel2_val.

      Then I created two paragraphs (lines 23 and 24), one for each tab, and then by using the echo command I'll print the output at the front-end.

      All this code goes in a new custom page template (for the detailed procedure of getting saved values, refer to my previous articles).

      Now let's suppose I entered AA-Text-Option in the text field of Tab 1 and some dummy text in the text area of Tab 2.  

      Adding Dummy Text

      I saved the final settings and previewed the result after publishing a page with my custom page template.

      Displaying Dummy Text

      The output of the saved values can be clearly observed.


      That's all there is about creating admin panels with Titan Framework. I'm sure you find the entire process quite simple, and now you can make admin panels with tabs pretty easily.

      I want you to try it out since in the articles about options I'll be assuming the fact that you know how to create admin panels. A vital step for you to understand what's next.

      In the next article, I will discuss how to create a meta box with Titan Framework. Till then in case of any queries, comment below or reach out to me at Twitter.



      Leave a comment › Posted in: Daily

    1. Developing a Membership Site With WordPress: Part 2

      Final product image
      What You'll Be Creating

      In the first part of this series, we covered customizing the registration and login forms. Today we’ll be covering how to add custom fields to the registration form. We’ll be adding a text input for a Twitter handle and a checkbox where users will need to agree to terms before registering. The work required can be divided into three parts:

      • Adding the fields themselves
      • Validation on the fields
      • Processing the data

      We will also very briefly discuss the best ways to style your outgoing emails. This means users will receive nice branded emails when they register. 

      Quickly before we start, make sure Anyone can register is ticked in your WordPress settings (Settings > General). 

      General Settings

      There’s Lots to Do; Let’s Get Started

      One of the greatest things about WordPress is the way it supplies you with actions and filters. These allow us to hook onto events or filter content, which gives us the opportunity to extend WordPress gracefully.  

      So using the register_form action, let’s hook into the registration form and add our fields. Copy the following function to our admin.php that we created in part one of this series.

      Basically we are injecting some new fields into our registration form. The markup used is mimicking that of the native fields. We also want to retain the values if the page is reloaded, so we will check if they exist in the $_POST super global. You might be wondering why our Twitter label is wrapped in a function: <?php _e( 'Twitter name', 'tutsplus' ) ?>.

      The _e function allows translation to occur—you can read more about it in the WordPress Codex.

      This is great, but how about some validation? As it stands, users can put whatever they want in there or just leave it blank. Let’s make our fields required and make sure the text field only takes in regular characters to prevent malicious attacks. This time we will be using a WordPress filter: registration_errors.

      The above filter is passed three parameters:

      1. The errors that have been processed
      2. The user's email
      3. The user's sanitized user name

      The function is triggered after the form is submitted but before the data hits the database. In our case we are checking if the fields are empty and if there are any bizarre characters in our Twitter name input. If any of these are true we pass an error message to the $error object that is returned.  

      Note: if you are getting an empty error box, don't worry. The security plugin we installed in part one has a default setting that hides the messages. Under the WordPress Tweaks section, uncheck the option Disable login error messages

      Login page showing four error messages

      Now the final piece of our puzzle: processing the data so it’s saved in our database against that user. Again we will be using a WordPress defined action (user_register) to hook into this process. It takes one parameter, the user_id—that way it knows who to save the data against. Assuming the $_POST superglobal contains our data, we can save it using update_user_meta.

      Custom Fields in the Admin

      Right now we have collected the users' data - including our custom fields - but we can not edit those values in the WordPress admin. Let's hook that up. In our admin.php add the following function:

      Using some WordPress actions we are easily able to add custom fields.

      Now to process the custom user meta.

      Redirect on Login

      Finally we want to redirect our users to a specific page when they are logged in. The default sends them to the WordPress back end. Forget that. Let's send them to a "my account" page. So firstly you'll need to create this page in the back end. Don't worry about content for now, because we'll get into that in the next part of the series.

      Now that we have our page, paste the code below into ____.php and give it a test drive. Assuming your "my account" page has the slug my-account it should work. Yet again we have used a WordPress filter to achieve this sorcery.

      In a nutshell, the code checks for a user, and if they are an admin user they are directed to the default place, else they are redirect to the my-account page. All this is triggered when the user logs in using the filter login_redirect.

      A Quick Note on Outgoing Emails

      When users register on your site they will be receiving confirmation emails. Also if a user forgets their password they have the ability to retrieve it over email. So it's important we give these emails some love and attention if we want our membership site to be all that.

      Now there are a few ways to do this. For all the purists out there you can use WordPress filters to change the email content type and style your emails—see the WordPress Codex. Alternatively there's a host of plugins out there designed for this purpose.

      Personally I like to use MailChimp's Mandrill to send emails out of my WordPress sites. It's not too tricky to set up and it's full of features, one of which is being able to apply templates/styles to your outgoing emails.

      What’s Next?

      In the next and final part of the series we will be making a basic account section whereby the logged-in users will be able to edit their details. We also want administrators to be able to edit these details from the WP admin area, so we will be adding some custom fields in there too.

      If you have any suggestions or questions please leave a comment. I'll do my best to reply in a timely fashion.

      Things to Note

      Please note: if you are downloading the code from the GitHub repository it includes all the files to get your theme up and running. The idea is that you can grab the repo and just run the necessary Gulp and Bower commands and you'll be away!  If you just want the files that contain code specific to this series the files are listed below.



      Leave a comment › Posted in: Daily

  • Page 1 of 113 pages  1 2 3 >  Last ›
  • Browse the Blog