Tag: development

  • Localhost DEV environment for WordPress

    This tutorial helps you set up a basic localhost DEV environment on MacOS using Homebrew, to run WordPress (or any other PHP powered web-app) locally.

    Installing Local, MAMP or other local server environments for testing and development may be an overhead if you just need a plain-vanilla web server that can be kept up-to-date easily.

    ⚠️ Before proceeding, please make sure that you’re using the latest MacOS version. Windows users should install a preconfigured DEV environment like XAMPP, MAMP for Windows or WampServer – if you feel comfortable you can try to setup Homebrew via Windows Subsystem for Linux (WSL). Linux users need to follow the official Homebrew on Linux guide and will have to change some file paths accordingly.

    MacOS

    Prerequisites

    • Visual Studio Code
      Visual Studio Code has become the de-facto standard in web development but any pre-installed editor will be sufficient.
    • Terminal
      MacOS app to perform shell commands. Any code snippet below starting with $ needs to be executed via a Terminal Emulator.
    • XCode Command line tools
      Required by Homebrew.
    • Homebrew
      Package manager for MacOS/Linux that helps you install the latest software packages for your localhost environment and automatically launches required processes when you start your system. Outdated packages can be updated with a single command.
    • WordPress
      Content Management System powered by PHP.

    XCode Command Line Tools

    $ xcode-select --install

    (Alternatively you can download and install XCode directly: https://apps.apple.com/us/app/xcode/id497799835)

    Install Homebrew

    $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

    (Alternatively you can download and install the following .pkg file: https://github.com/Homebrew/brew/releases)

    $ brew doctor

    😀 Your system is ready to brew.

    Install Apache web server

    The Apache HTTP Server “httpd” is the most popular web server on the Internet.

    httpd.apache.org

    First, make sure that any running internal Apache server has been stopped and unloaded from the launch processes:

    $ sudo apachectl -k stop

    $ sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 2>/dev/null

    Now you can install and launch the new server:

    $ brew install httpd

    $ brew services start httpd

    Install PHP

    PHP is a popular general-purpose scripting language that is especially suited to web development.
    Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world.

    php.net

    $ brew install php

    $ brew services start php

    Install MariaDB

    MariaDB has been forked from MySQL and is highly backwards compatible.

    MariaDB Community Server sets the standard for open source relational databases, with Oracle Database compatibility (e.g., sequences and PL/SQL), temporal tables, transparent sharding, instant schema changes, point-in-time rollback and modern SQL (i.e., common table expressions, window functions, JSON functions and more).

    mariadb.com

    $ brew install mariadb

    $ brew services start mariadb

    Test the status of each service

    $ brew services

    NameStatusUserFile
    httpd started{YOUR_USERNAME}~/Library/LaunchAgents/homebrew.mxcl.httpd.plist
    mariadbstarted{YOUR_USERNAME}~/Library/LaunchAgents/homebrew.mxcl.mariadb.plist
    phpstarted{YOUR_USERNAME}~/Library/LaunchAgents/homebrew.mxcl.php.plist

    If something is wrong you can try to restart the service(s).

    $ brew services restart httpd

    $ brew services restart mariadb

    $ brew services restart php

    Setup your server directory

    Create a new folder in your user directory and execute the following commands. You will also create two debug info pages that may be helpful:

    $ mkdir ~/Localhost
    $ echo "<h1>It works!</h1>" > ~/Localhost/index.html
    $ echo "<?php phpinfo();" > ~/Localhost/phpinfo.php

    ⚠️ “Localhost” is just a suggestion and you can choose whatever folder name you prefer.

    Configure the database

    Change the root password and create a new empty database for WordPress.

    $ sudo mysql

    $ ALTER USER 'root'@'localhost' IDENTIFIED BY '{NEW_PASSWORD}';

    ⚠️ The password is required to access the database and you’ll need it later – store the access credentials (Username “root” + chosen password) in your password manager or write it down somewhere.

    $ CREATE DATABASE wordpress;

    ⚠️ You are free to choose a different database name.

    Configure the web server

    ‼️ Find the default Apache configuration file in /opt/homebrew/etc/httpd/httpd.conf (on Mac computers with Apple silicon) or in /usr/local/etc/httpd/httpd.conf (on Mac computers with Intel processors), create a backup (e.g. httpd_backup.conf) and open httpd.conf in a text editor.

    Uncomment or adapt the following lines and save the changes afterwards:

    BeforeAfter
    ServerRoot "/opt/homebrew/opt/httpd"ServerRoot "/opt/homebrew/opt/httpd"
    AddDefaultCharset UTF-8


    ⚠️ The /homebrew path may differ depending on your system (‼️)
    Listen 8080Listen 80
    # LoadModule vhost_alias_module lib/httpd/modules/mod_vhost_alias.soLoadModule vhost_alias_module lib/httpd/modules/mod_vhost_alias.so
    # LoadModule rewrite_module lib/httpd/modules/mod_rewrite.soLoadModule rewrite_module lib/httpd/modules/mod_rewrite.so
    LoadModule php_module /opt/homebrew/opt/php/lib/httpd/modules/libphp.so


    ⚠️ The /homebrew path may differ depending on your system (‼️)
    User _www
    Group _www
    User {YOUR_USERNAME}
    Group staff


    ⚠️ Insert your MacOS username
    DocumentRoot "/opt/homebrew/var/www"
    <Directory "/opt/homebrew/var/www">

    AllowOverride None
    DocumentRoot "/{YOUR_USERNAME}/Localhost"
    <Directory "/{YOUR_USERNAME}/Localhost">

    AllowOverride None

    ⚠️ Insert your MacOS username and use the directory you defined earlier
    <IfModule dir_module>
    DirectoryIndex index.html
    </IfModule>
    <IfModule dir_module>
    DirectoryIndex index.php index.html
    </IfModule>
    # PHP settings
    Include /opt/homebrew/etc/httpd/extra/httpd-php.conf


    ⚠️ The /homebrew path may differ depending on your system (‼️)
    ⚠️ Append this text at the bottom of the file

    It works!

    Open http://localhost – if you see the notice “It works!“, the local server is up and running 👏

    Now open http://localhost/phpinfo.php and check the PHP server info. The page should look like this, stating the current PHP version.

    Install and setup WordPress

    Finally it’s time to run the WordPress install script.

    Download and extract the latest WordPress Core ZIP in an arbitrary Localhost directory (e.g. /{YOUR_USERNAME}/Localhost/wordpress), access http://localhost/wordpress/wp-admin/install.php and follow the setup guide by entering the database credentials defined earlier.

    Finish the installation by setting the WP user credentials and by logging in to WordPress: http://localhost/wordpress/wp-login.php

    Some recommended tools that may make your WordPress developer life easier are Multisite Network (Maintain multiple sites on a single WordPress installation), Composer (PHP package manager), WP-CLI (Command-line interface for WordPress), phpMyAdmin or Adminer (Database management tools) and PHP Code Sniffer (PHP code quality and coding standards) in combination with the WordPress Coding Standard rules.

    Are you using one of our WordPress Starter Themes? Feel free to install node.js/npm via Homebrew to consolidate all development tools and build processes in one place.

    Keep all Homebrew packages up-to-date

    It’s strongly advised to always update to the latest software versions available.

    $ brew update && brew cleanup

    $ brew upgrade

    Yes, you can use this local server to run other applications besides WordPress!

    Feel free to install and setup any web tool that’s powered by PHP (and MySQL/MariaDB) on your new localhost environment. In addition to WordPress, covered in this post, some other popular applications you can use, include:

    • Drupal (Content Management System)
    • TYPO3 (Content Management System)
    • Joomla (Content Management System)
    • Nextcloud (Private Cloud server)
    • Magento (E-Commerce)
    • Matomo (Web analytics)
    • MediaWiki (Wiki software)
    • … just to name a few

    That’s all for now

    The instructions may be updated from time to time to reflect any OS specific changes. If you have questions, recommendations or just would like to say ❤️ Thank you, post a comment below.


    Comments
    0

    Leave a Reply

  • npm “global” packages

    If you manage multiple themes with similar npm dependencies you should install npm packages globally and link them in your theme directories. First of all this saves a lot of disk space. But it also disburdens the upgrade process of development frameworks and toolkits that are used across projects.

    1. Install packages globally by adding the “-g” flag:
    $ npm install -g package_1 package_2 package_3 package_4 etc.

    2. Link the packages in your local theme directory/directories:

    Bootstrap-Theme
    $ npm link bootstrap @popperjs/core ...

    Material-Theme
    $ npm link material-components-web ...

    FSE-Theme
    $ npm link autoprefixer css-loader sass sass-loader ...

    Happy Coding!


    Comments
    0

    Leave a Reply

  • GitHub Gists

    Find useful WordPress related code snippets in our new GitHub Gists repo:

    https://gist.github.com/them-es


    Comments
    0

    Leave a Reply

  • Goodbye jQuery…

    We’ve removed jQuery as a frontend dependency from our Starter Themes.
    Please note that jQuery is still needed in the WordPress dashboard (backend) and will be loaded there automatically!

    jQuery has been very useful for a while but modern web standards browser support has improved a lot and most JS frameworks started to drop any external dependencies in favor of plain/vanilla JS.

    Reducing the loading time of web applications and minimizing HTTP requests is one of the main goals of many developers. And since jQuery is an external library which needs to be downloaded first, avoiding it (if possible) makes a lot of sense.

    If your code still depends on jQuery you can activate it in functions.php by adding array( 'jquery' ) in the wp_enqueue_script function where main.js is referenced (See: https://github.com/them-es/themes-starter-bootstrap/blob/v2/functions.php#L480).

    Further reading:
    https://developer.wordpress.org/reference/functions/wp_enqueue_script
    http://youmightnotneedjquery.com
    https://medium.com/@trombino.marco/you-might-not-need-jquery-a-2018-performance-case-study-aa6531d0b0c3
    https://developer.mozilla.org/en-US/docs/Web/JavaScript

    #jquery, #js, #vanillajs


    Comments
    0

    Leave a Reply

  • React WP-API boilerplate

    Our latest boilerplate has been published on Github. This is a great starting point for developers who need to create a headless WordPress Single Page Application.

    WP-API ReactJS Boilerplate

    Please note that you need to have a deeper knowledge of WordPress, NPM, Javascript/ReactJS and Bootstrap in order to be able to use this boilerplate.

    Go to the GitHub repository, download the boilerplate and follow the instructions.

    The Source Code is licensed under GPLv2 and has been published on GitHub.

    A simple setup tutorial can be found in the Readme of the repository.


    Comments
    0

    Leave a Reply

  • WordPress “Gutenberg” blocks boilerplate

    The code base we are using to develop custom Gutenberg blocks has been made available to the public.

    Blocks Boilerplate

    If you are a WordPress Developer you can use this boilerplate as a basis for creating and integrating blocks in a theme.

    Go to the GitHub repository, download the boilerplate and follow the instructions.

    The Source Code is licensed under GPLv2 and has been published on GitHub.

    #gutenberg, #blocks, #theme


    Comments
    0

    Leave a Reply