4elements, Amsterdam, Holland

  1. A Guide to Overriding Parent Theme Functions in Your Child Theme

    If you've had any experience working with parent and child themes in WordPress, you'll know that the template files in your child theme override those in your parent theme. So for example if your parent theme has a page.php file and you create a new one in your child theme, WordPress will use the one in the child theme when displaying pages.

    You might think that functions would work in the same way: create a new function in your child theme's functions.php file with the same name as one in the parent theme, and it'll take precedence. Unfortunately it isn't as simple as this.

    In this tutorial I'll show you three methods you can use to override functions from the parent theme in your child theme:

    • pluggable functions
    • function priority
    • removing functions from the hook they're attached to

    How Functions in Parent and Child Themes Work

    Before examining the methods for overriding functions in your child themes, it helps to understand how functions work in parent and child themes.

    Firstly, you need to know that all of the functions in your parent theme will be run when you're using a child theme. You don't have to add anything to your child theme's functions file to make this happen. This is different from CSS, where you have to manually include the parent theme's stylesheet in the child theme's stylesheet.

    The functions in your child theme will be loaded before the functions in the parent theme. This means that if your parent and child themes both have functions called my_function() which do a similar job, the one in the parent theme will load last, meaning it will override the one in the child theme.

    However you can change the order in which functions are fired, and you can prevent functions from being fired altogether, as we'll see shortly.

    Pluggable Functions

    Pluggable functions are something you code into your parent theme, so they won't be any use to you if you're working with an existing parent theme that doesn't have them.

    But if you're writing your own parent theme, maybe as a starting point for future projects, or if you're creating your own theme framework, it's good practice to make your functions pluggable so that you can easily override them in child themes. It's also a good idea to look through the functions that are written into the parent theme you're using, as many of them, including the WordPress default theme, will have pluggable functions.

    To write a pluggable function, you simply enclose it in a conditional tag to check if a function with that name has already been run:

    So if you enclose the functions in your parent theme in a conditional tag like this, WordPress will check if there is a function with the same name in your child theme that's already been run, and if that's the case it won't run the function from the parent theme.

    Then when you come to write a function in your child theme which you want to override the one in the parent theme, you just give it the same name as the one in the parent theme:

    WordPress will run the function in the child theme first, and when it comes to the one in the parent theme, it'll check if it already exists and because it does, it won't run it.

    Function Priority

    If you're not using your own parent theme, or you're using a third party one without pluggable functions, you'll need another method.

    When you write functions you can assign them a priority, which tells WordPress when to run them. You do this when adding your function to an action or filter hook. WordPress will then run the functions attached to a given hook in ascending order of priority, so those with higher numbers will run last.

    Let's imagine the function in the parent theme isn't pluggable, and looks like this:

    This function is attached to the init hook and hasn't been given a priority. By default WordPress assigns a priority of 10 to functions which haven't had a priority added, so to fire your function after it you use a number larger than 10. I tend to use 15 so I've got some breathing room in case I want to add another function between the two later on.

    This means the function in your child theme would look like this:

    Alternatively, the function in your parent theme may have had a priority assigned to it:

    So you just need to make sure the priority you give the function in your child theme is higher:

    Removing Functions From Hooks

    Sometimes running another function after the first one isn't enough to override it—you need to make sure the function in the parent theme doesn't run at all. In this case, you can remove the parent theme function from the hook it's attached to, using the remove_action() or remove_filter() functions. The one you use will depend on whether the function is attached to an action hook or filter hook in the parent theme.

    So let's return to our previous function in the parent theme:

    To remove this function from its action hook and therefore prevent it from firing, you create a function in your child theme to remove it using remove_action():

    However, this won't work on its own—you need to attach this function to a hook which will fire after the hook which the parent theme function is attached to. This is because you can't remove the action before it's been fired. You can find details of the order in which actions are fired in the Codex.

    Once you've done this, you can simply write an alternative function to replace the parent theme function in your child theme's functions file, or you can do nothing if all you wanted to do was remove the functionality from the parent theme.

    A Note on Priorities

    Note that if you're trying to remove a function using remove_action() or remove_filter() and the function has had a priority assigned to it, you must include the priority when removing it, or it won't work.

    So if the function in the parent theme looks like this:

    ... you'll need to include the same priority value when removing it:

    Summary

    Overriding functions in a parent theme is more complicated than overriding template files or styling, but it can be done. Here I've shown you three methods for doing this:

    • If you're writing your own parent theme, or using one which has them, use pluggable functions so that a function in the child theme with the same name as one in the parent theme will replace it.
    • Assign higher priorities to functions in your child themes to ensure they're run after those in your parent theme.
    • Use remove_action() or remove_filter() to remove functions in the parent theme altogether.

    Which method you use will depend on the way your parent theme is coded and whether you need to remove the parent theme function altogether or just run another function after it to override it.

     

    0 Comments

    Leave a comment › Posted in: Daily

    1. Simple User Reviews With Gravity Forms and a Custom Post Type

      Final product image
      What You'll Be Creating

      My client sells a few products and wanted a way for site visitors to be able to submit a review or testimonial about a particular product, and to display those reviews on their respective product pages in his WordPress site.

      I worked on this task all afternoon yesterday to my great frustration, and just now got it working. I figured out I was making it much harder than it really is. Gravity Forms to the rescue!

      There are a few steps in this process:

      • Create a custom post type.
      • Create a form in Gravity Forms to let users submit draft posts using your custom post type.
      • Add the form to a page.
      • Display the posts on your site.

      Let's get started.

      1. Create a Custom Post Type

      This is a perfect situation for a custom post type—like a blog post, only special. Custom post types are separate from regular blog posts; they can help you turn your site into a movie database or a recipe site, with their own custom taxonomies (instead of blog categories, think Movie Directors, Actors and Genres).

      While you can manually create a custom post type (CPT) using coding, let's do this the easy way. Install Custom Post Type UI and activate it. This is a very useful and stable plugin that's been around for many years.

      In Custom Post Type UI you'll set up a new post type. Here's a screenshot of mine. Name it whatever you like; in this case mine is Reviews.

      Creating a custom post type in Custom Post Type UI

      You can leave the Labels section alone. But in Settings, you will want to make a few changes.

      I've left most of the defaults under Settings alone, but have ticked the box for Exclude from Search as I don't want review posts in search results. And in the section Supports, I've only ticked the checkboxes for the elements I need to show in my review post editing page: Title, Editor, and Custom Fields.

      If you mouse over the red question marks in the Settings panel, you'll see what each item does; you can always come back and make changes.

      2. Create a Form in Gravity Forms

      Gravity Forms is a great plugin, but it won't handle custom posts on its own. For that you'll need to install and activate another plugin, Gravity Forms + Custom Post Types. Go ahead and do that, and we'll get started on the form.

      In Gravity Forms, create a new form; let's call it Submit a Review. Save it, and then open up the Post Fields in the right column. Using these fields instead of the usual form fields will create a new post when the user submits the form.

      First, click on Post Title to add that field. In this case, I want the title of my post to be the name of the person submitting the review—see the screenshot below.

      Info for the Post Title in Gravity Forms

      Name your field (here it's Your Name, so this is the label the user will see). For Post Status, you probably want Draft; this means the new post will be in Draft format and won't be published on your site until you approve it.

      Default Post Author is set to you and that's fine—it won't matter here—and neither will Post Category since we're using a custom post type. Make this field Required by ticking the bottom checkbox.

      Then go to the Advanced tab. Tick the box for Save as Post Type and choose the custom post type you created at the beginning of this tutorial.

      Choosing the custom post type for your Post Title

      Then click Update to save your changes.

      Then we'll add an email field (from the Advanced Fields section) like with any form, making it Required.

      Next we'll add another Post Field, Body. This works just like the Paragraph Text field in a normal form. You shouldn't need to change any settings for this field other than the Field Label and ticking the Required checkbox.

      Almost done! Now because my client has several products, we want to ask the user which product they bought. To do this we're going to add a Custom Field from the Post Fields area (drag it up so it appears before the Body field so that the flow makes sense).

      For our purposes we want this custom field to be radio buttons, so choose that from Field Type. Then we need to give our custom field a name. Choose the New button since we're making it here, and then type a name into the text box. In this case it's product_name.

      Entering product choices as a custom field in Gravity Forms

      Then fill in the radio button choices as usual, making sure you enter both a label (what the user sees) and a value (which you can use to separate the reviews by product name).

      Make this field Required (and don't forget to add your own Field Label at the top, for the user) and update the form. We're all done with part 2.

      3. Adding the Form to a Page

      I hope you already know how to do this, but if not, it’s very simple. Go to the page where you want to put your form and edit the page.

      Put the cursor where you want to add the form. Click Add Form at the top, choose your new form, untick the Title and Description checkboxes, and click Insert Form. It will add a shortcode to the page.

      That’s it. And this is how the form looks on the page.

      The Submit Feedback form on a page

      Go ahead and try the form, adding a couple of reviews in. I’d suggest adding reviews for at least two or three products, so that we’ll have something to work with in the next part of this tutorial. You can always delete your test reviews later.

      4. Display the Posts on Your Site

      Now we get to the part that has a lot of possibilities. If you look in the Admin menu on the left side, you’ll now have a new menu item—in my case it’s called Reviews. If you look at that, you’ll see the test reviews you submitted (if there aren’t any, you skipped the last part of Step 3—go to your form and submit test reviews, at least for a few products, as we need some material to work with for this step).

      These are blog posts but they have their own menu item because of your custom post type. This helps you keep things separated on your site; you can have a regular blog, and then any number of custom post types to handle more specialized information. Pretty cool, yes?

      Open up one of these posts and you’ll see only the items you ticked under Supports back in Step 1 when you set up your custom post type. In this case, it’s the title, the editor, and custom fields. We like to keep it as simple as possible. Look at the custom field and you’ll see it has both a name (the Label you entered) and a value (which you also entered). That value can be used to control which reviews are displayed in a custom template.

      Showing posts on your site can be done with coding in your theme files or with plugins; there are many, many ways to do this. For this tutorial, we’re going to add the reviews to a sidebar widget. I’ll show you two ways to do this with a plugin: an easy one, and a better one.

      Displaying Custom Posts in a Widget: The Easy Way

      For this example we’ll use the Special Recent Posts plugin. Install and activate it and then go to Settings > Widgets. Drag the widget into a sidebar.

      When you open it you’ll see lots of options. For this example these are the settings I used to get the posts list shown here, but you can use whatever works with your site.

      1. I changed the Widget Title to Recent Reviews and the Post Limit to 2.
      2. No thumbnails, since there aren’t any associated with reviews.
      3. Under Post Options I chose to use full length for the Post Content Length. Tick the box by Enable WordPress Filters, because we’ll use that later.
      4. No changes under Advanced Post Options 1 or 2.
      5. Under Filtering Options, type in your custom post name in the last box (if it doesn’t work, try the singular version—review or reviews).
      6. Save the widget.

      Here's how it looks in my sidebar:

      Reviews widget using the Special Recent Posts plugin

      It works pretty well right out of the box, but you can customize the display if you know some CSS. However, you don’t have much control over what gets displayed; you can’t choose to display reviews for one product and hide them for another. But I’ll show you how to do that in the next part.

      Displaying Custom Posts in a Widget: With Total Control

      Custom Content Shortcode is an amazingly useful plugin that will let you display any type of content anywhere on your site, including widgets. It does have a bit of a learning curve, but it also has great documentation that is included in a Reference section right in your Admin dashboard. It provides a lot of control over what’s displayed, and will not disappoint if you take a little time to learn how to use it. It’s a tool you can use again and again in your website or blog.

      You will need to be a little bit comfortable with HTML and CSS to style the display of this widget—just letting you know. It doesn’t look like much right out of the box. You can add the styles to your theme’s style.css file.

      Let’s use Custom Content Shortcode to create another widget, but this time we’ll limit what gets displayed so we can show only reviews for a certain product.

      In Settings > Widgets, drag a text widget into a sidebar and add your title.

      I’ll show you how to set up the shortcode for this example, but I highly recommend you take a look through the Reference section for the plugin, which you get to in the Plugins page (you’ll see a link for it under the plugin name). It’s a very powerful tool!

      Here is the shortcode I’m using. I’ll go through it line by line.

      For loop type, enter the name of your custom field, probably singular (if that doesn’t work, try plural).

      Field is the custom field name you used in Gravity Forms. Value is the value associated with the radio button in Gravity Forms.

      These elements control the loop, which means that it will go through each ‘review’ post one by one displaying the ones with the value ‘boulder_case’ until it’s looked at them all.

      So inside your loop, it’s going to display three things: the content of the post (from the Body field in Gravity Forms), the title (the user’s name), and the date published.

      Does that make sense? Type or copy this into your text widget, replacing the items in the section with your own names, save it, and take a look at what it generates.

      It probably looks like a mess—but the content is all there, and you'll notice that only the posts with the particular value you typed in are shown. This is powerful; it means you can create a review widget for each product instead of having all the reviews jumbled together.

      So now you'll need to do some formatting to make things look better—a little bit of HTML is needed.

      This makes things a lot easier to read, but now some CSS is needed to style it. I'll add some classes to this code for styling.

      And here is the finished product all styled and ready for more content.

      Reviews widget using the Custom Content shortcode plugin

      Wrapping Up

      So now you know:

      • how and when to create a custom post type
      • how to create a form to collect user content for your custom post type
      • how to display that form on a page or post
      • how to display your custom posts in a widget using a simple plugin
      • how to display your custom posts with more control

      In a followup to this post, I'll show you how to display your new custom content in a page using a custom template and loop. It's a bit more difficult, but will give you the power to really control your user-submitted content. And then you can think about other ways to use user content—submitting photos to a gallery, for example. Getting visitors involved is a great way to promote your business site.

       

      0 Comments

      Leave a comment › Posted in: Daily

    1. Create a Simple CRM in WordPress: Adding Columns to WP_List_Table

      We’ve been looking at how to create a simple CRM system in WordPress. In the last part of this series, we used Advanced Custom Fields to add custom fields to our Contacts custom post type. We learned how to use Advanced Custom Fields and configure it to work programmatically.

      Today, we’ll cover how to display the data stored in our custom fields right within our contacts table.

      All About WP_List_Table

      Each post type that has a dashboard uses the WP_List_Table class to render the familiar table and its associated actions:

      By default, WordPress will display the following columns:

      • checkbox (used to select/deselect posts, which can then have actions applied to them)
      • title
      • author
      • comments
      • date

      For our Contact custom post type, this isn’t very useful if we want to quickly see key details at a glance, such as the contact’s phone number or photo.

      WordPress provides a filter and an action that can be used to add new columns to the WP_List_Table and determine its output for each post.

      Let’s start by adding the manage_edit-{POST_TYPE}_columns filter to our plugin class’ construct. {POST_TYPE} will be the name of our Post Type, which in this case is contact:

      We also need to define our add_table_columns() function, which tells WordPress the names of our additional columns that we’d like to display on our Contacts table. This function accepts an array of existing columns, which we can extend by adding our custom table columns.

      We make sure that the array keys match ACF’s custom field names. If you have different fields, be sure that your column key names match your fields’ field name setting.

      View your Contacts table by clicking on Contacts in the WordPress dashboard menu, and you’ll see our new columns:

      However, there’s no data being displayed for each Contact in the table. We need to add the manage_{POST_TYPE}_posts_custom_column action to our plugin class’ constructor. {POST_TYPE} will again be the name of our post Type, which in this case is contact:

      We also need to define our output_table_columns_data() function, which tells WordPress what to display for each Contact and column combination. Because we made sure our column key names match our ACF Field Names, this makes our coding easier. Advanced Custom Fields has a get_field() function, which accepts both Field Name and Post ID parameters to retrieve the value stored:

      Reload your Contacts table, and you’ll see your custom fields:

      Depending on your PHP configuration, the Photo column will either be blank, or output a PHP notice:

      The image field in Advanced Custom Fields returns an array when using get_field(), comprising of the image details and each registered image size’s URL, width and height (a registered image size is typically based on your installed Themes and Plugins).

      Let’s modify our function to output the right array data to display an image:

      Reload your Contacts Table, and you should see each Contact’s photo:

      Sortable Columns

      What if we need to quickly sort our Contacts by name, phone number or email address? We can already sort on the name (or, rather, the title) column, but right now there’s no functionality to tell WordPress how to sort on our phone number and email address columns.

      Back to our plugin’s constructor. We need to add the manage_{POST_TYPE}_posts_custom_column filter to our plugin class’ construct, to tell WordPress that we want to enable certain columns to be sortable. {POST_TYPE} will again be the name of our Post Type, which in this case is contact:

      As with our previous actions and filters, we also need to define our define_sortable_table_columns() function, which tells WordPress which columns can be sortable:

      Hover the mouse cursor over the Email Address and Phone Number columns, and you’ll see an arrow appear, showing us that we can sort by the data in the relevant column:

      Right now, clicking on the column header to sort by its data won’t do anything, as the orderby parameter that’s set in the URL isn’t one that WordPress will recognize.

      In our plugin’s constructor, let’s add a filter on the request method, and then define our function to check if we’re trying to sort by a custom column (and if so, amend the posts query so WordPress can understand it):

      Because the request filter runs on every page load of WordPress (whether the frontend web site or WordPress dashboard interface), we want to minimize how often it’s called. We do this by only adding the filter if we are in the WordPress Administration (is_admin()).

      Next, let’s define our orderby_sortable_table_columns() function:

      This function checks that we are viewing our Contacts Custom Post Type, and if so that an orderby parameter has been set matching either email_address or phone_number. These are set if the user has clicked a column in the Contacts Table to order by Phone Number or Email Address.

      Let’s click on the Email Address column, and we’ll see the results are ordered correctly:

      Clicking it again will reverse the order of results:

      Up Next…

      In the next article, we’re going to extend the filter and search functionality, allowing us to search the data stored within our Advanced Custom Fields.

       

      0 Comments

      Leave a comment › Posted in: Daily

    1. Programming With Yii2: Integrating User Registration

      Final product image
      What You'll Be Creating

      If you're asking, "What's Yii?", check out my earlier tutorial: Introduction to the Yii Framework, which reviews the benefits of Yii and includes an overview of what's new in Yii 2.0, released October 12th, 2014.

      This is part four of a series on Yii2. In Programming With Yii2: Getting Started, we set up Yii2 locally, built a Hello World application, set up a remote server, and used Github to deploy our code. In part two, we learned about Yii's implementation of its Model View Controller architecture and how to build web pages and forms that collect and validate data. In part three, we learned about working with databases and ActiveRecord. In this tutorial, we'll walk you through integrating a popular user registration plugin.

      For these examples, we'll continue building on our hello app available in the Tuts+ repository so that you can follow along.

      User Registration for Your Web Application

      Almost any web application of any usefulness requires some form of user registration. Yii provides a couple of ways to approach user registration, both relatively straightforward. This is one of the things I like about using Yii over vanilla PHP—in moments, I can have a fully featured web application framework ready to build cool stuff on.

      There are few reasons to rebuild the wheel and code user authentication and its many requirements and corollary features from scratch, e.g. sending emails and authentication for registration verification, password recovery, third party social authentication, et al.

      The Yii2 Advanced Application Template provides built-in user registration; we're using this approach in my Building Your Startup series. However, in this series, we've been building on Yii2's basic application template. The default basic application template includes hard coded user login, which isn't very useful.

      Yii2 Basic Application Template Static Login

      Another approach to user registration is to use third party extensions. For this tutorial, I'll walk you through using Dmitry Erofeev's Yii2-User extension. Documentation for Yii2-User is available here. Erofeev's building other plugins for Yii2 as well.

      Dektriums Yii2-User Documentation

      Installation of Yii2-User

      Let's get started installing the Yii2-User extension. We'll follow the installation instructions.

      Installing Yii2-User With Composer

      First, we need to add Yii2-User to composer's required extensions. Edit the /composer.json file to include Yii2-User:

      Then, when we update composer, you'll see something like this:

      Update the Database

      Next, we run the database migration for Yii2-User. This creates the database tables that the extension requires. These will manage user accounts and credentials.

      Update the Configuration File

      Next, we need to tell Yii to use the Yii2-User component. In /config/web.php, we replace the default User component...

      ... with the Yii2-User component:

      Activate the SwiftMailer

      Since Yii2-User uses email to send out registration confirmations and forgotten passwords, it's time to activate our SwiftMailer configuration. In config/web.php, replace the default Mailer configuration here...

      ... with this—you'll need to include your own SMTP credentials:

      Integration of Yii2-User

      Now, we need to link our navigation bar to the Yii2-User controller paths. In /views/layouts/main.php, we update the navigation bar array definition for the Bootstrap menu. Replace the current navigation bar...

      ... with the following array definition:

      Reload the application and click the Sign Up link in the navigation bar. You should see something like this:

      Yii2-User Sign Up Page

      When you click Sign Up, you'll see the confirmation notification. This tells us an email has been sent that we need to click on to verify our registration.

      Yii2-User Sign Up Confirmation Notice

      You'll receive an email much like this one:

      Yii2-User Confirmation Email

      Click on the link in the email and you'll see something like this:

      Yii2-User Sign Up Confirmation

      Notice the login state maintained by Yii2 and the Yii2-User component—it's displayed in the navigation bar above. Click Logout and let's walk through the Sign In page:

      Yii2-User Sign In Form

      Yii2-User also includes password recovery:

      Yii2-User Forgot Your Password

      Just like that, we have a hugely important core authentication component for our application.

      Yii2-User also has a number of configuration features which you can explore further on your own, e.g. third party social authentication. We'll likely return to them in a later tutorial.

      What's Next?

      I hope you've found this useful for your own Yii2 web application. If you'd like to know when the next Yii2 tutorial arrives, follow me @reifman on Twitter or check my instructor page. My instructor page will include all the articles from this series as soon as they are published.

      Related Links

       

      0 Comments

      Leave a comment › Posted in: Daily

    1. Social Authentication for Node.js Apps With Passport

      It's already a well-established fact that passwords are inherently weak in nature. Thus asking end users to create strong passwords for every application they use simply makes matters worse.

      An easy workaround is to let users authenticate via their existing social accounts like Facebook, Twitter, Google, etc. In this article, we are going to do just that and add this social login capability to the sample Node application developed in the first part of this authentication series, so that we will be able to authenticate via our Facebook and Twitter accounts using Passport middleware.

      If you have not checked out the previous article, I'd recommend that you go through it, as we will be building upon the foundation laid by that article and adding new strategies, routes and views to it.

      Social Login

      For the uninitiated, social login is a type of Single Sign-on using existing information from social networking sites like Facebook, Twitter, etc., where users are normally expected to have accounts already created.

      Social login mostly relies on an authentication scheme such as OAuth 2.0. To learn more about the different login flows OAuth supports, read this article. We choose Passport to handle social login for us, as it provides different modules for a variety of OAuth providers, be it Facebook, Twitter, Google, GitHub, etc. In this article we will be using the passport-facebook and passport-twitter modules to provide login functionality via existing Facebook or Twitter accounts.

      Facebook Authentication

      To enable Facebook authentication, we first need to create a Facebook App using the Facebook Developer Portal. Note down the App ID and App Secret, and specify the callback URL by going to Settings and specifying the Site URL in the Website section for the application. Also make sure to enter a valid email address for the Contact Email field. It is required to be able to make this app public and accessible by the public.

      Next, go to the Status & Review section and turn the slider to Yes to make the app public. We create a config file, fb.js, to hold this configuration information which will be needed to connect to Facebook.

      Facebook Login Strategy

      Back in our Node application, we now define a Passport Strategy for authenticating with Facebook using the FacebookStrategy module, utilizing the above settings to fetch the user's Facebook profile and display the details in the view.

      Configuring Routes

      Now we need to add certain routes for enabling login with Facebook and for handling the callback after the user has authorized the application to use his or her Facebook account.

      The login page for our demo application looks like this:

      Login With Facebook or Twitter

      When you click on the Login with Facebook button, it will try to authenticate with Facebook. If you are already logged in to Facebook it will show the below dialog asking for your permission, or else it will ask you to log in to Facebook and then show this dialog.

      Facebook Auth - Grant Permissions

      If you allow the app to receive your public profile and email address, then our registered callback function will be called with the user details. We can save these for future reference or display them or simply choose to ignore them, depending on what you want to do with the information. Feel free to jump ahead in time and check out the entire code in this git repo.

      It would be good to note that apart from the basic information that this demo app provides, you could use the same authentication mechanism to extract more useful information about the user, like his friends list, by using the appropriate scope and using the Facebook APIs with the access token received with the user profile.

      Twitter Authentication

      A similar authentication module needs to be wired up for handling authentication via Twitter, and Passport chips in to help with its passport-twitter module.

      Firstly, you need to create a new Twitter App using its Application Management interface. One thing to note here is that while specifying the callback URL, Twitter does not seem to work nicely with it if "localhost" is given in the callback URL field. To overcome this limitation while developing, you could use the special loopback address or "127.0.0.1" in place of "localhost". After creating the app, note down the following API key and secret information in a config file as follows:

      Twitter Login Strategy

      The login strategy for Twitter is an instance of TwitterStrategy and it looks like this:

      Configuring Routes

      Now to test this, be sure to use http://127.0.0.1:<port> instead of using http://localhost:<port>. As we have already mentioned above, there seems to be an issue while exchanging tokens with Twitter with "localhost" as the host name. On clicking the Login with Twitter button, as expected it asks for the user's consent to allow this application to use Twitter.

      Twitter Auth - Grant Permissions

      As you allow the application to access your Twitter account and limited information, the callback handler which is registered in the login strategy is called, which is then used to store these details in a back-end database

      Conclusion

      And there you have it !! We successfully added Facebook and Twitter logins to our sample application without writing a lot of code and handling the intricacies involved with the authentication mechanism by letting Passport do the heavy lifting. Similar login strategies can be written for a variety of providers that Passport supports. The code for the entire application can be found in this git repository. Feel free to extend it and use it in your own projects.

       

      0 Comments

      Leave a comment › Posted in: Daily

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

    Syndicate

    Most recent entries

    governing-bruise