{"componentChunkName":"component---src-templates-tag-js","path":"/tags/php/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":5,"edges":[{"node":{"fields":{"slug":"/engineering/guest-post/securing-php-api-with-jwt/"},"html":"

Security has become a fundamental aspect to consider while developing an application. As people become more aware and hackers more notorious, you need to employ systems that strengthen your application's data security.

\n

Previously, it was common to use session storage to secure applications. In recent times, sessions have proved inefficient, which pushed to migrate to authentication with APIs. Even though this was a superb and robust way to secure web applications, it became obsolete as hackers tried to figure out how to crack this authentication.

\n

As the web evolves to accept more and more users, the research for secure authentication techniques speeds up. In 2010, the world was introduced to a new and secure authentication standard -- JWT. Let's know more about JWT.

\n

What is JWT?

\n

JSON Web Token (JWT) is a safe way to authenticate users on a web app. Using JWT, you can securely transfer encrypted data and information between a client computer and a server.

\n
\n

Learn more about the differences between sessions and JWTs here.

\n
\n

JWT offers many benefits. Here are some of them.

\n

Benefits of Using JWT

\n\n

Now that you've learned about the advantages, it's time to go deeper into the JWT.

\n

The Structure of JWT

\n
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9\n  .eyJpc3MiOiJodHRwczpcL1wvcWEtYXBpLndlbGx2aWJlLmNvbVwvYXBpXC9hdXRoXC9sb2dpbiIsImlhdCI6MTYzMDQ3OTA5NSwiZXhwIjoxNjMwNDgyNjk1LCJuYmYiOjE2MzA0NzkwOTUsImp0aSI6Imtsa3hHUGpMOVlNTzRSdUsiLCJzdWIiOjc3ODE4LCJwcnYiOiIyM2JkNWM4OTQ5ZjYwMGFkYjM5ZTcwMWM0MDA4NzJkYjdhNTk3NmY3IiwidXNlcnNfaWQiOjc3ODE4LCJtZW1iZXJzX2lkIjo3Nzg4MzMsInByb3h5X3VzZXJfbWVtYmVyc19pZCI6bnVsbH0\n  .TxXwLLu1zWBe7cLLYdFYy3P2HX4AaLgc7WfSRtTgeiI
\n

The above string is an example of a JWT authentication string. At first glance, it may appear to be a randomly produced string. But don't underestimate; this string is made up of three separate components that are essential in a JWT.

\n

JWT Header

\n

The header of a JWT is the initial section of the string before the first dot. This header is produced by acquiring plain text and performing cryptographic operations on it. Moreover, the header uses a very efficient Base64 encoding procedure.

\n

You can quickly obtain the JWT's headers using symmetric or asymmetric encryption techniques.

\n

JWT Payload

\n

The string's central component is the JWT's payload part. This string includes all of the important information about a received request and the user or client computer who created the request. There are predefined key-value pair fields in the payload that can be used to offer extra information about the received request. Here is an explanation of common payload fields.

\n\n

JWT Signature

\n

A cryptographic operation is performed on the JWT data to obtain this signature. It takes in the payload, secret key, and header value of a JWT. The signature is then generated by applying a function to these obtained values.

\n

The server and user can verify this signature to know about the data's security and integrity. If this signature matches at both ends, then the data is considered secure, and all other transactions can occur.

\n

Using JWTs to Secure PHP API

\n

As you've understood everything about JWT, let's secure your PHP API using JWT. Follow the code along, and, in the end, you'll create a tamper-proof PHP API.

\n

This article creates a simple login page and authenticates it using JWT. This will help you get started with JWT and PHP.

\n

To follow along, you'll need to have PHP and composer installed on your computer.

\n

If you haven't already installed composer on your computer, you can learn how to install composer here. Once you've installed composer, run the tool from your project folder. Composer will assist you in installing Firebase PHP-JWT, a third-party library for working with JWTs and Apache.

\n

Once the library is installed, you'll need to set up a login code in authenticate.php. While you do this, put a code piece that checks and gets the autoloader from the composer tool. The below code helps you achieve this.

\n
<?php\ndeclare(strict_types=1);\nuse Firebase\\JWT\\JWT;\nrequire_once('../vendor/autoload.php');
\n

When the form gets submitted, you need to check the entered data with a data source or database. For our purpose, let's create a hasValidCredentials variable and set it to true. Setting this variable to true means that the data is checked and valid.

\n
<?php\n// extract credentials from the request\nif ($hasValidCredentials) {
\n

Any further coding will be wrapped in this block itself. The value of the hasValidCredentials variable governs all code related to the production and validation of the required JWT. If its value is true, the JWT shall be created; otherwise, an error will be shown.

\n

Creating JWT

\n

Let's start creating the JWT. First, you need to generate some more variables to aid in this process. As you saw in the payload section, you must create:

\n\n

JWT's can be easily inspected and checked at client-side browsers. So it is better to hide your secret key and other important information in some environment file, which the user cannot access through client-side requests.

\n
$secret_Key  = '68V0zWFrS72GbpPreidkQFLfj4v9m3Ti+DXc8OB0gcM=';\n$date   = new DateTimeImmutable();\n$expire_at     = $date->modify('+6 minutes')->getTimestamp();      // Add 60 seconds\n$domainName = "your.domain.name";\n$username   = "username";                                           // Retrieved from filtered POST data\n$request_data = [\n    'iat'  => $date->getTimestamp(),         // Issued at: time when the token was generated\n    'iss'  => $domainName,                       // Issuer\n    'nbf'  => $date->getTimestamp(),         // Not before\n    'exp'  => $expire_at,                           // Expire\n    'userName' => $username,                     // User name\n];
\n

Now you have all the required data in hand; you can easily create a JWT. Here, you'll use the PHP-JWT package's encode() method. This method helps transform your data array into a JSON object.

\n

Following the conversion to a JSON object, the encode function produces JWT headers and signs the received payload with a cryptographic combination of all the information and the given secret key.

\n

It is essential to supply three arguments to the encode() method to utilize it correctly. The first argument should be the payload information, which is the data array in this instance. Secondly, you must supply the secret key as an argument; and finally, you must define the cryptographic technique that the function should use to sign the JWT.

\n

To obtain and return the JWT, you'll have to use the echo method above the encode method, as shown below.

\n
<?php\n    // Encode the array to a JWT string.\n    echo JWT::encode(\n        $request_data,\n        $secret_Key,\n        'HS512'\n    );\n}
\n

Now that you have obtained the JWT token, you can transfer it to the client-side and save it using any web programming language of your choice. Let's start with a short JS demonstration of the route ahead.

\n

First, when a successful form submission takes place, save the created and received JWT in client-side memory. To display some output about the JWT's success, remove the login form and merely display a button that retrieves and displays the JWT's timestamp to the user when it is clicked.

\n

Here is some sample code for the process mentioned above.

\n
const storeJWT = {}\nconst loginBtn = document.querySelector("#frmLogin")\nconst btnResource = document.querySelector("#btnGetResource")\nconst formData = document.forms[0]\n\n// Inserts the jwt to the store object\nstoreJWT.setJWT = function (data) {\n  this.JWT = data\n}\n\nloginBtn.addEventListener("submit", async e => {\n  e.preventDefault()\n\n  const response = await fetch("/authenticate.php", {\n    method: "POST",\n    headers: {\n      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",\n    },\n    body: JSON.stringify({\n      username: formData.inputEmail.value,\n      password: formData.inputPassword.value,\n    }),\n  })\n\n  if (response.status >= 200 && response.status <= 299) {\n    const jwt = await response.text()\n    storeJWT.setJWT(jwt)\n    frmLogin.style.display = "none"\n    btnResource.style.display = "block"\n  } else {\n    // Handle errors\n    console.log(response.status, response.statusText)\n  }\n})
\n

You've already produced and submitted the JWT to the user. So now it's time to put the JWT to use on the user side.

\n

Using JWT

\n

As previously stated, if the form submission is successful, you'll display a button to obtain a timestamp. This button will invoke the GET method on the resource.php script. The resource.php script will then set the JWT received after successful authentication in the authentication header.

\n

The following code will help you achieve this feat.

\n
btnResource.addEventListener("click", async e => {\n  const result = await fetch("/resource.php", {\n    headers: {\n      Authorization: `Bearer ${storeJWT.JWT}`,\n    },\n  })\n  const timeStamp = await result.text()\n  console.log(timeStamp)\n})
\n

Once you've written this code, run the program and enter your credentials into the form fields. A GET request will be sent when you click the submit button. Here is a sample GET request to assist you in making the correct identification.

\n
GET /resource.php HTTP/1.1\nHost: yourhost.com\nConnection: keep-alive\nAccept: */*\nX-Requested-With: XMLHttpRequest\nAuthorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczpcL1wvcWEtYXBpLndlbGx2aWJlLmNvbVwvYXBpXC9hdXRoXC9sb2dpbiIsImlhdCI6MTYzMDQ3OTA5NSwiZXhwIjoxNjMwNDgyNjk1LCJuYmYiOjE2MzA0NzkwOTUsImp0aSI6Imtsa3hHUGpMOVlNTzRSdUsiLCJzdWIiOjc3ODE4LCJwcnYiOiIyM2JkNWM4OTQ5ZjYwMGFkYjM5ZTcwMWM0MDA4NzJkYjdhNTk3NmY3IiwidXNlcnNfaWQiOjc3ODE4LCJtZW1iZXJzX2lkIjo3Nzg4MzMsInByb3h5X3VzZXJfbWVtYmVyc19pZCI6bnVsbH0.TxXwLLu1zWBe7cLLYdFYy3P2HX4AaLgc7WfSRtTgeiI
\n

Validating JWT

\n

If you've followed along until here, everything should be working fine. Now, let's begin with validating the JWT.

\n

To get help with this operation, you've previously added the composer's autoloader function. You'll now use the preg match function to extract the token from the Bearer header. For this extraction, you'll use the preg match function and supply a regular expression.

\n
if (! preg_match('/Bearer\\s(\\S+)/', $_SERVER['HTTP_AUTHORIZATION'], $matches)) {\n    header('HTTP/1.0 400 Bad Request');\n    echo 'Token not found in request';\n    exit;\n}
\n

The code above attempts to extract the token from the Bearer header. In this case, error handling is utilized. Thus if the token is not discovered, an HTTP 404 error is displayed to the user.

\n

To validate the JWT, you must first compare it to the previously created JWT.

\n
$jwt = $matches[1];\nif (! $jwt) {\n    // No token was able to be extracted from the authorization header\n    header('HTTP/1.0 400 Bad Request');\n    exit;\n}
\n

The extracted JWT is saved at the first index of the matches array. If the matching array is empty, it means no JWT was extracted. If the preceding code runs successfully, it implies that the JWT has been extracted, and you may now proceed.

\n

Decoding the received data is required for verifying a JWT. Only the secret key may be used to decode the received data. Once you've obtained the secret key, you may use the static decode function of the PHP-JWT module.

\n

The decode method requires three arguments, which are as follows.

\n\n

If the decode method succeeds, you may proceed to validate the JWT. The code below will assist you in decoding and validating a JWT.

\n
$secret_Key  = '68V0zWFrS72GbpPreidkQFLfj4v9m3Ti+DXc8OB0gcM=';\n$token = JWT::decode($jwt, $secret_Key, ['HS512']);\n$now = new DateTimeImmutable();\n$serverName = "your.domain.name";\n\nif ($token->iss !== $serverName ||\n    $token->nbf > $now->getTimestamp() ||\n    $token->exp < $now->getTimestamp())\n{\n    header('HTTP/1.1 401 Unauthorized');\n    exit;\n}
\n

This code will provide all the necessary parameters to the decode function and save the method's result. Then, to prevent unauthorized access, error handling is employed. If any of the fields in the JWT are unavailable, an HTTP 401 error indicating unauthorized access will be issued to the user.

\n

LoginRadius Authentication for PHP Apps

\n

Instead of using the process discussed above, you can use LoginRadius Identity Platform to authenticate your PHP APIs quickly. You can start by referring to LoginRadius PHP documentation.

\n

In addition, you can use LoginRadius PHP SDK, which, in turn, simplifies signup and login for your users by eliminating the need for remembering an extra set of credentials for your app.

\n

Conclusion

\n

In this tutorial, you've learned about JWT. Then created a PHP web application and secured it with JWT authentication.

\n

You understood how easy and important it is to secure a web application.

\n

You can find the complete code used in this tutorial here.

\n

Don't forget to try this out for your more significant projects.

\n

Finally, if you face any problems following this tutorial or have questions, please feel free to comment below. We'll respond as soon as we can to clarify your questions.

\n","frontmatter":{"date":"December 24, 2021","updated_date":null,"title":"How to Secure a PHP API Using JWT","tags":["PHP","JWT","Authentication"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/b9e157a812c5801bd8d6ca83f317ee88/58556/jwt.webp","srcSet":"/static/b9e157a812c5801bd8d6ca83f317ee88/61e93/jwt.webp 200w,\n/static/b9e157a812c5801bd8d6ca83f317ee88/1f5c5/jwt.webp 400w,\n/static/b9e157a812c5801bd8d6ca83f317ee88/58556/jwt.webp 800w,\n/static/b9e157a812c5801bd8d6ca83f317ee88/99238/jwt.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Harikrishna Kundariya","github":"espark-biz","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/how-to-get-email-alerts-for-unhandled-php-exceptions/"},"html":"

This tutorial provides a solution to get email alerts, when a unhandled error occurs. For this tutorial, we are using WordPress.

\n

Imagine you created a php application and it’s running fine.  A couple of days later, a user complains about an error which you’re totally unaware of. Such unhandled errors are very common in php applications. So, to find these issues, we are going to send email notifications whenever an error occurs.

\n

Step 1. First of all we need to identify a common application file that include at top of application. in this case the file is “wp-config.php” at the root of your wordpress hosting directory.

\n

Step 2. Let’s add the following line of code in this file under php tag.

\n
set_error_handler('errorHandler'); // this line of code sets an error handler custom function to handle any php error. And here we pass our custom function that name “errorHandler”\n\nfunction createTable($array){\n    if(is_array($array) && count($array)>0){\n        $errorContent = "<table border = 1><tr><td>";\n        foreach ($array as $key => $val) {\n            $errorContent .= $key . "</td><td>";\n            if(is_array($val) && count($val)>0){\n                $errorContent .= createTable(json_decode(json_encode($val),true)) ;\n            }else{\n                $errorContent .= print_r($val, true) ;\n            }\n        }\n        $errorContent .= "</td></tr></table>";\n        return $errorContent;\n    }\n    return '';\n}\n \n/**\n * \n * @param type $errorNumber        // This parameter returns error number.\n * @param type $errorString           // This parameter returns error string.\n * @param type $errorFile               // This parameter returns path of file in which error found.\n * @param type $errorLine              // This parameter returns line number of file in which you get an error.\n * @param type $errorContext         // This parameter return error context.\n */\nfunction errorHandler($errorNumber, $errorString, $errorFile, $errorLine, $errorContext) {\n    $emailAddress = 'example@example.com';\n    $emailSubject = 'Error on my Application';\n    $emailMessage = '<h2>Error Reporting on :- </h2>[' . date("Y-m-d h:i:s", time()) . ']';\n    $emailMessage .= "<h2>Error Number :- </h2>".print_r($errorNumber, true).'';\n    $emailMessage .= "<h2>Error String :- </h2>".print_r($errorString, true).'';\n    $emailMessage .= "<h2>Error File :- </h2>".print_r($errorFile, true).'';\n    $emailMessage .= "<h2>Error Line :- </h2>".print_r($errorLine, true).'';\n    $emailMessage .= "<h2>Error Context :- </h2>".createTable($errorContext);\n    $headers = "MIME-Version: 1.0" . "rn";\n    $headers .= "Content-type:text/html;charset=UTF-8" . "rn";\n    mail($emailAddress, $emailSubject, $emailMessage, $headers); // you may use SMTP, default php mail service OR other email sending process\n}
\n

Step 3. Now save the file and upload on server.

\n

Whenever we got any error in wordpress then above code will send an email to given email-address (example@example.com). You can use the above code on production websites to improve application performance and track all errors that’s are missed.

\n

Similarly we can use above code in drupal, joomla, and many other content management systems.
\nCommon config files on other platforms are listed below:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
CMS/application nameLocation of common file
4Images Gallery/config.php
B2 Evolution/conf/_basic_config.php
Boonex Dolphin/inc/header.inc.php
Concrete5/config/site.php
Coppermine Photo Gallery/include/config.inc.php
Crafty Syntax Live Help/config.php
Cube Cart/includes/global.inc.php
dotProject/includes/config.php
Drupal/sites/default/settings.php
e107/e107_config.php
FAQMasterFlex/faq_config.php
Gallery/config.php
Geeklog/db-config.php or /siteconfig.php or /lib-common.php
glfusion/private/db-config.php
Hotaru/hotaru_settings.php
Joomla/configuration.php
LiveSite/livesite/config.php
LifeType/config/config.properties.php
Mambo/configuration.php
Marketecture/include/config.php
MODx/manager/includes/config.inc.php
Moodle/config.php
MyBB/inc/config.php
Noahs Classifieds/app/config.php
Nucleus/config.php
ocPortal/info.php
OpenCart/config.php or /admin/config.php
osCommerce/includes/configure.php or /admin/includes/configure.php
Oxwall/ow_includes/config.php
PHP-Nuke/config.php
phpBB/config.php
phpFormGenerator/index.php or /mysql.class.php
phpFreeChat/forms/admin/config.inc.php (only if you have saved form input to a database)
PHPlist/config/config.php
phpMyDirectory/defaults.php
phpWCMS/include/inc_conf/conf.inc.php
phpWebSite/conf/config.php
PhpWiki/admin.php or /lib/config.php
Pligg/libs/dbconnect.php
Post-Nuke/config.php
PrestaShop/config/settings.inc.php
Saurus CMS/config.php
ShopSite/includes/configure.php or /admin/includes/configure.php
Siteframe/config.php
Simple Machines Forum/Settings.php
Soholaunch/sohoadmin/config/isp.conf.php
SugarCRM/config.php
Textpattern/textpattern/config.php
TikiWiki/db/local.php
Tomato Cart/includes/configure.php
TYPO3/typo3conf/localconf.php
WebCalendar/includes/settings.php
WHMCS/configuration.php
WordPress/wp-config.php
X7 Chat/config.php
Xoops/mainfile.php
Zen Cart/includes/configure.php or /admin/includes/configure.php
Zikula/config.php
\n","frontmatter":{"date":"October 26, 2015","updated_date":null,"title":"How to Get Email Alerts for Unhandled PHP Exceptions","tags":["PHP","Email"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/7cc01786c805c6dabe755c22c0e6b3fb/7fbdd/email-alerts-unhandled-php.webp","srcSet":"/static/7cc01786c805c6dabe755c22c0e6b3fb/61e93/email-alerts-unhandled-php.webp 200w,\n/static/7cc01786c805c6dabe755c22c0e6b3fb/1f5c5/email-alerts-unhandled-php.webp 400w,\n/static/7cc01786c805c6dabe755c22c0e6b3fb/7fbdd/email-alerts-unhandled-php.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/shopify-embedded-app/"},"html":"

Recently, I was working on an implementation to build an embedded app on Shopify with PHP. I realized that the 3rd party PHP SDK recommended by Shopify called \"phpish\" does not support the feature to \"PUT\" assets into your shopify shop's theme. The link to \"phpish\" git repository can be found  here, I'd like to thank these guys for their great work, it saved me lots of time to get the implementation on the right track.

\n

So if you want to do a PUT API call to Shopify web service, you can do it in raw PHP by customizing a CURL request, this is not very hard. But prior to make the Asset API call, first you need to retrieve the currently activated theme ID by calling the Shopify Theme API call, this part can be done easily with the help of phpish.

\n

Then it is the time to customize your CURL request to do the PUT API call, remember phpish stores our information such as Oauth Token and Shop into the $_SESSION, we can leverage on that or manually fill in the correct information

\n
<!-- array("key" => "snippets/put-asset.liquid", "value" => "this is a test to put assets"));\n$ch = curl_init($_SESSION['shop']."/admin/themes/$theme_id/assets.json");\ncurl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\ncurl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PUT");\n$headers = array();\n$headers[] = "X-Shopify-Access-Token: ".echo $_SESSION['oauth_token'];\n$headers[] = "Content-Type: application/json";\ncurl_setopt( $ch, CURLOPT_HTTPHEADER, $headers );\ncurl_setopt( $ch, CURLOPT_POSTFIELDS, json_encode($data));\n$response = curl_exec($ch);\necho "";\necho curl_error($ch)."";\nvar_dump($response);\ncurl_close($ch);\n?>-->
\n

Let me briefly explain this snippet, so first you define an array with key and value, key maps to the file name that you want to create, and value is the actual code or asset you want to pass in. Then you create a curl request with method \"PUT\" like all the other requests

\n
$ch = curl_init($_SESSION['shop']."/admin/themes/$theme_id/assets.json");\ncurl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\ncurl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PUT");
\n

Next is something special for Shopify, to make an API call to Shopify you have to specify Oauth_Token in your request to tell Shopify who you are, and so does Content-Type.

\n
$headers = array();\n$headers[] = "X-Shopify-Access-Token: ".echo $_SESSION['oauth_token'];\n$headers[] = "Content-Type: application/json";
\n

Last but not least, json encode your data array into JSON format and send the request.

\n
curl_setopt( $ch, CURLOPT_POSTFIELDS, json_encode($data));\n$response = curl_exec($ch);
\n

The last part is just to catch the returned response or show the error message from your CURL request if something is going wrong.

\n

Hope this can help someone, happy coding.

\n","frontmatter":{"date":"June 02, 2015","updated_date":null,"title":"Shopify Embedded App","tags":["Shopify","PHP"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.8867924528301887,"src":"/static/c5210d2bc3581dbaa177626908ec770c/53cab/shopify.webp","srcSet":"/static/c5210d2bc3581dbaa177626908ec770c/61e93/shopify.webp 200w,\n/static/c5210d2bc3581dbaa177626908ec770c/53cab/shopify.webp 308w","sizes":"(max-width: 308px) 100vw, 308px"}}},"author":{"id":"Lucius Yu","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/use-php-to-generate-filter-portfolio/"},"html":"

Overview

\n

Filter Portfolio can be very useful for websites, especially when there is a lot of images you want to show to users. It is always nice to keep it into different categories and allow your user to play with them.

\n

But adding a tag and a div on hundreds of images is definitely not fun. Our goal today is to use PHP to generate the Filter Portfolio instead of manually adding them one by one.

\n

The logic is like this, first we have a folder to contain all the portfolio images. It could be like this:

\n

\"assets->img->logos->businesses\"

\n

\"folder-structure\"

\n

And in the \"businesses\" folder, we have some sub-folders to put all the images in different categories, like this:

\n

Each sub-folder contains different images in that category, and our goal is to use those sub-folders name as the filters, and the images under each category will be added automatically. Let's do it.

\n\n

I know people hate this, but we are going to use a little pre-built javascript file called MixitUp, I promise it is a very easy but powerful tool to use, see a demo here.

\n

There is already very comprehensive tutorial on how to install that plugin  in their github repository, you can follow either of these.

\n
    \n
  1. Download the javascript file from github
    2. \n
\n

Click this link git -> src to open the repository for the javascript file, download and save it in your asset folder.

\n
    \n
  1. Import js and css
    2. \n
\n

You can do this right before the closing body tag. You probably have Jquery installed already, but just in case you don't.

\n
<!--\n-->
\n

It is recommended to link your Mixitup function while your document is ready, so add this after the importing lines.

\n
<!--\n$(document).ready(function(){\n    jQuery(function(){\n        $(function() {\n            $('#Container').mixItUp();\n        });\n    });\n});\n-->
\n
    \n
  1. Add the code
    2. \n
\n

Here is where the fun begins! I am not going to do any stylings in this tutorial, since you can always customize it yourself. Okay, first of first, add a div as a container of your filter portfolio section, so:

\n
<!---->
\n

Next, we need to add those clickable filter buttons to the div we just created. We can add them programmatically, but to be honest, it is not that bad to do it manually.

\n
<!-- All \n Eateries \n Cafes \n Bars, Clubs & Lounges \n Lifestyle \n\n Health & Fitness \n Fashion \n Beauty & Spas \n Entertainment -->
\n

Please note, for these <a> tags, you need to follow the patterns of MixitUp. Basically in class attribute you need to specify \"filter\" for it, and in data-filter, you need to tell which category it is. Next we are going to write some PHP code, to iterate through the destination folder, and process the files within it.

\n
<!--\nvalid()) {\n    if (!$it->isDot()) {\n        $subject = $it->getSubPathName();\n        // Mac OS automatically creates .DS_store file to store metadata\n        // The following regex is used to ignore those files\n        $pattern = '/\\\\.DS/';\n        preg_match( $pattern, $subject, $match );\n        if( !$match ) {\n            $file_path_name = str_replace("\\\\", "/", $subject);\n?>\n    <div class="mix getSubPath(); ?> col-md-3 ">\n        <img src="" alt="" class="business-logo-img"/>\n    \nnext();\n}\n?>\n-->
\n

The code is pretty straightforward, just want to label out a couple of things.

\n

First, we specified which folders we are working with and then we used a built-in recursive iterators to cycle through the folder.

\n

For each item we found in every sub-folder, $it->getSubPath will return the sub-folder name and $it->getSubPathName will return the name of the file. Create a div for each image, and play with those returned parameters to fit them into the pattern of MixitUp.

\n

The $it->isDot() function and regular expressions are used to filter out some system hidden files such as \".DS_Store\" and others, since we do not want to them to be shown as images.

\n

Easy, right? If you like this post, click share and help people who's having this kind of issue.

\n","frontmatter":{"date":"May 19, 2015","updated_date":null,"title":"Use PHP to generate filter portfolio","tags":["PHP"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/2bded56c56b18fac13fd210a0d98e4db/7fbdd/php-filter-portfolio.webp","srcSet":"/static/2bded56c56b18fac13fd210a0d98e4db/61e93/php-filter-portfolio.webp 200w,\n/static/2bded56c56b18fac13fd210a0d98e4db/1f5c5/php-filter-portfolio.webp 400w,\n/static/2bded56c56b18fac13fd210a0d98e4db/7fbdd/php-filter-portfolio.webp 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Lucius Yu","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/enqueuing-scripts-wordpress/"},"html":"

In this tutorial I want to explain the different methods to enqueue scripts and style sheets in WordPress. This can be a really confusing process for new WordPress developers.

\n

There are three different areas that a developer can enqueue scripts for; the first is the client side, the second is the admin side and the third is the login pages.

\n

Each of these areas uses a specific hook to enqueue scripts to use in that area. For example, if a script was enqueued using the login_enqueue_scripts hook that script would not be loaded in the admin area. This allows WordPress to load only the scripts needed for that specific section. Optimization!

\n

When you don’t enqueue scripts using these hooks and instead use the <script> tag, it can cause the script to be loaded every time you load the site, admin area or login page. This can cause conflicts with other scripts, plugins or themes. WordPress takes care of these problems when you use the hooks intended.

\n

An example of the three enqueuing hooks are below:

\n

wp_enqueue_scripts hook – Front End

\n
function themeslug_enqueue_style() {\n    wp_enqueue_style( 'core', 'style.css', false );\n}\nfunction themeslug_enqueue_script() {\n    wp_enqueue_script( 'my-js', 'filename.js', false );\n}\nadd_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );\nadd_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );
\n

admin_enqueue_scripts hook – Admin area

\n
function load_custom_wp_admin_style() {\n    wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );\n    wp_enqueue_style( 'custom_wp_admin_css' );\n}\nfunction my_enqueue($hook) {\n    if ( 'edit.php' != $hook ) {\n        return;\n    }\n    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );\n}\nadd_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );\nadd_action( 'admin_enqueue_scripts', 'my_enqueue' );
\n

login_enqueue_scripts hook – Login pages

\n
function themeslug_enqueue_style() {\n    wp_enqueue_style( 'core', 'style.css', false );\n}\nfunction themeslug_enqueue_script() {\n    wp_enqueue_script( 'my-js', 'filename.js', false );\n}\nadd_action( 'login_enqueue_scripts', 'themeslug_enqueue_style', 10 );\nadd_action( 'login_enqueue_scripts', 'themeslug_enqueue_script', 1 );
\n

If you are calling the same script in many different areas you can register the script or stylesheet first and then use it when needed in your plugin. In the above examples you’ll notice the function being called is enqueuing a script or a style only and not registering a script or a style. When you register first it allows that script or style to be called in the area it was registered in when you enqueue it. Here’s an example of registering scripts first.

\n
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_scripts' );\nfunction my_plugin_admin_scripts() {\n    /* Register our script. */\n    wp_register_script( 'my-plugin-script', plugins_url( '/script.js', __FILE__ ) );\n    wp_enqueue_script( 'my-plugin-script');\n}
\n

In the example above you can see first I have registered the script then used wp_enqueue_script to enqueue it. You don’t need to enqueue the script directly after registering as a practice, however after registering the script you can enqueue it on pages you require it. If you have registered the script or style using wp_enqueue_scripts it will only be available on the front end of your site and not the admin pages or the login pages.

\n","frontmatter":{"date":"March 02, 2015","updated_date":null,"title":"Enqueuing Scripts in WordPress","tags":["WordPress","PHP"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/4e9051d7a28e019245372bfa4f533083/e557c/wordpress.webp","srcSet":"/static/4e9051d7a28e019245372bfa4f533083/61e93/wordpress.webp 200w,\n/static/4e9051d7a28e019245372bfa4f533083/1f5c5/wordpress.webp 400w,\n/static/4e9051d7a28e019245372bfa4f533083/e557c/wordpress.webp 750w","sizes":"(max-width: 750px) 100vw, 750px"}}},"author":{"id":"Zoie Carnegie","github":null,"avatar":null}}}}]}},"pageContext":{"tag":"PHP"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}