How we redesigned our Website in WordPress
The network is a world in continuous and fast evolution and we need to adapt to the new trends and positioning parameters imposed by search engines, a.k.a Google.
We chose WordPress as CMS (content management system) for its simplicity to create websites, focus on SEO, blog, and endless solutions. WordPress predominates in more than 60% of all web developments.
These new trends led us to think that we needed more than a time-saving template or base template, such as underscore, which is why we decided to use SAGE. You may be wondering what it’s Sage? Although many WordPress developments are based on already customized templates, not many have the structure that allows good code readability, in addition to not involving logic in views or the power of a bundler to compress and minify code, modern and easy to maintain development.
Sage is an open-source WordPress startup theme with extensive and active community support behind it. Sage is meant to be used as a starting point in a new project, so it doesn’t impose a certain look or style on a theme.
Some reasons why we choose Sage
One of the reasons we chose Sage for the Clarika web page redesign project because it has a huge and friendly Root Discourse community, which is truly active. It was a key factor when choosing a framework, library, or template with which to start the project, since we are not exempt from encountering any difficulties and the support of the community makes these problems not so frustrating.
Now, exploring into the magic of Sage, we consider that the main features are:
- Improved project structure and better organization of template files.
- Template inheritance using Laravel’s Blade template engine (optional).
- Modern PHP along with PSR-2 encoding standards – the most widely used and accepted encoding standard in the PHP community.
- A modern build process, asset optimization, browser-sync, and HMR (Hot Module Replacement) with webpack.
- Dependency management with Composer and npm.
While Sage has a little learning curve, in this note we’ll cover a basic install. Once you integrate Sage into your projects, you will never look back, as it is a pleasure to maintain and create code in it. If you are curious about Sage, you can always visit documentation which is very complete.
Next, we will show how it is installed and we will see in detail how it is made up.
Setting up Sage
The first thing will be to verify that you have installed:
We will assume that you already have previous experience with the composer and nodeJS.
Having the composer already installed, located in the / wp-content / themes directory of your WordPress installation run this command:
$ composer create-project roots/sage sage-theme
Enter the theme folder with the name you chose, in our case / sage-theme and run npm install or yarn install, feel free to choose the package manager you like best. Once the command is executed, the previous one will have a folder structure similar to this.
All the functionality of Sage is kept inside the app/folder. You can put any additional code in one of these four files:
app/setup.php
app/helpers.php
app/filters.php
app/admin.php
The main file you will be working with is setup.php. Treat it like it’s new functions.php. Sage uses it to queue assets, record navigation menus, sidebars, and add core functionality.
Use it filter.php to customize and extend your theme.
admin.php is for changes to the WordPress backend panel.
And you have helpers.php left which you can use to create helper functions. When you feel that none of these options fit your code, you can create a new one inside the app/folder, as you can see below that creates my custom post type file.
Which then I will call in my file resources / functions.php
Blade templates
Laravel’s Blade templates are probably the best thing about Sage. Blade uses a sleek and concise syntax that makes templates more readable and more enjoyable to write.
Here is an example of how the template is viewed by single.php in a standard WordPress theme and in Sage.
Although we could continue talking about Sage, we will leave it for a second chapter where you will keep on learning how the redesign of our website was. So keep tunned!
As a nearshore software development company, we leverage the best talent in South America with Agile methodology.
Contact the Clarika Team to find out more about us and how we can help you to develop your next innovative project!
