WordPress Development Using WordPress Bedrock

What is Bedrock ?

We use Roots.io’s Bedrock framework, which pulls in WordPress as a composer dependency. This allows us to have a controlled, shareable staging environment around our team, and comes with niceties like .env support out of the box. There are also other niceties like upgraded security, and a little security by obscurity, too, in the form of non-standard file paths which protect sites from a small number of automated attacks and exploits.

Bedrock - Folder Structure

Bedrocks are a WordPress boilerplate with modern development tools, easier configuration, and an improved folder structure.

Requirements

PHP >= 7.4 Composer (Installation) Extension required for php : gd extension mysql pdo pdo_mysql Simple XML mbstring tokenizer curl

Composer check in comsoser.json and update version: 2
$ sudo composer self-update

Also check this stuffs by using this command:
$ sudo apt install openssl php-common php-json php-xml php-zip

Bedrock - Importance of file

Composer.json: All of the plugins, all of the themes managed through composer so composer is a php package manager just like NPM is javascript manager.

Config: Have different php files for different environments if you work on suppose development environment so you simply wp_debug true for this environment.

Vendor: Where those composer.json. Basically it’s not wordpress related.

Web -> app: All themes, plugins, uploads folder managed by here.

wp-config / index.php: This is needed to order the WordPress first. It finds the wp folder if it is not found then they look up the directory and look for this there and basically wp-config file login the config folders file.

Wp: Core installation of WordPress.

Dependency management with Composer: Manage your WordPress install and plugins with Composer, a PHP dependency manager. Composer will make development more reliable, help with team collaboration, and it helps maintain a better Git repository.

How to Setup WordPress via Bedrock ?

Create a new Bedrock Project:

Goto the folder and click right click and open the terminal where you need to install

(like : https://user5@user5/var/www/html$) and run the command.

$ composer create-project roots/bedrock [project_folder_name]

Update environment variables in the .env file : (Before this create database first)

DB_NAME – Database name
DB_USER – Database user
DB_PASSWORD – Database password
DB_HOST – Database host

Change the all parameters + WP_HOME (check below screenshot)

Now generate the salt key by using this url : WordPress Salts and replace with .env salt key.

(Why Salt key is important in wordpress: WordPress salts are long strings of random characters that are used by WordPress to secure the credentials of logged in users.)

Add theme(s) in web/app/themes/ as you would for a normal WordPress site. Copy paste the theme here which you want to activate.
Set the document root on your webserver to Bedrock’s web folder: /path/to/site/web/ (Need to setup virtual host in localhost first :

Here is the installation guide url:

Setup virtual host in localhost

Open the command prompt or terminal window and enter the command:

$ sudo nano /etc/hosts : and enter the password (here you can see the domain name register on your localhost)

OR
$ sudo gedit /etc/hosts: open in default notepad

$ cat /etc/hosts : see content of file

127.0.0.1 localhost
127.0.0.6 bitcotpage.live

# add domain and ip like following

127.0.0.7 example.live

After add domain name press control+x for save and exit above screenshot window.

Transform your online presence with our professional WordPress development services today.

Configuration for our domain / set document root for our domain:

Check ls (for list ) or ll (list with details)

$ cd /etc/apache2/sites-available $ ls

Now enter command $ cp 000-default.conf example.live.conf (copy default file with new file with the same name domain name) if permission issue then use sudo

$ sudo nano example.live.conf (for file edit and its content)

or use$ sudo gedit example.live.conf for open file in editor.

# Change with project domain name which is set in /etc/hosts

ServerName example.live

# if use www then use serveralias (optional)

ServerAlias www.example.live

ServerAdmin [email protected]

# change with project path

DocumentRoot /var/www/html/example/web

ErrorLog ${APACHE_LOG_DIR}/error.log

CustomLog ${APACHE_LOG_DIR}/access.log combined

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

AllowOverride All

</Directory>

If we use folder outside the wamp/xamp

# Change with project domain name which is set in /etc/hosts

ServerName example.live

# if use www then use serveralias (optional)

ServerAlias www.example.live

ServerAdmin [email protected]

# change with project path

DocumentRoot /home/bitcot/Documents/example/web

ErrorLog ${APACHE_LOG_DIR}/error.log

CustomLog ${APACHE_LOG_DIR}/access.log combined

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

AllowOverride All

</Directory>

Enable this virtual host or domain configuration:

$ sudo a2ensite wprock.local.conf

Server restart (if needed use sudo) :

$ systemctl reload apache2

Now goto project .env file:

How to Access WordPress Admin Panel

Access WordPress admin at https://example.live/wp/wp-admin/

Set the domain path in web server with the name http://example.live/

So I am able to wordpress admin with this url: http://example.live

[ Note : How can set virtual host in windows ]

Setting virutal host in windows xampp and wamp – Setup Bedrock for WordPress Development on Windows OS

Advantages Pros that we have realized

Version control

Because of the number of files pulled into the project via public dependencies, the actual file storage requirements for version controlling your work is incredibly small. This means the entire Bedrock directory can be included in version control, ensuring that multiple developers maintain the same plugin and other requirements – something that’s not possible with vanilla WordPress.

Webpack and Laravel Mix

Our preference is to take this a little further by pulling in some Laravel dependencies – namely mix() – so that we can integrate our build process into Webpack JS. This allows us to run all development and live file builds automatically in the terminal window and, crucially, allows us to run the same in our automated deployment and testing environment.

Plugins

https://wpackagist.org, There’s an awesome website out there called

which is effectively a WordPress plugin repository mirror with all plugins factored as dependencies for composer. It’s WPackagist which brings true version control to your WordPress builds. As they put it, here’s why you should use composer for plugin dependency management:

Avoid committing plugins and themes into source control.
Avoid having to use git sub-modules.
Manage WordPress and non-WordPress project libraries with the same tools.
Could eventually be used to manage dependencies between plugins.

Uploads

Media Cloud by ILAB is a great WordPress plugin/module which enables your media storage to be based on services like Amazon S3 (and others). Although this is a great permanent file store, the added advantage here is the benefits given by the separation of concerns this affords us:

This means your application can become scalable as there is no locally required EC2 file or data storage.

Theme

Finally, within your theme, with Bedrock and the wealth of other dependencies you can pull in via WPackagist, and others, you have a number of options for replacing the default theme boilerplate.

We have a few preferences within the team, but right now typically websites are rolled out with the twig templating language. You could also easily use Blade or even Liquid if you’re a little more adventurous.

The benefits here are the closer-to-true Model-View-Controller application structure (within the theme directory) and also the faster speed of development it brings. Also, when you have multiple developers sharing a project, standardisation in your approach is key!

Deployment

Finally, as the entire website has been built as an app with decentralised storage (and we host databases on separate DB servers), this means the deployment of the application/website is compatible with Amazon’s (and others) deployment processes. Although there are other options, we use Amazon OpsWorks through a variety of Chef Recipes we’ve adapted over time.

What They Have to Say

Watch Video

Raj and his team at BitCot has made me a believer. After many painful experiences with developers / dev teams we finally found our technology extension.. BitCot delivers quality products, timely communication and most importantly hits committed timelines. I was so impressed with BitCot’s speed and standards that I’ve asked them to begin a second project. The team has an uncanny ability to understand your vision and goals and will assist you in shaping the scope of the project/feature. Even if that means less revenue for them. BitCot is the Unicorn - so much so that I am a bit nervous posting this feedback as I might get less time with them.

Joe Roberts

Founder, Poured

Watch Video

Affordable, Reliable, Responsive, Smart - BitCot is all of those things, which were and are important to my growing company's needs. They have knowledgeable resources that really know technology. BitCot developed a user friendly app for us, and has also worked in depth on new design, development and testing for key parts of my high volume website as well. I look forward to working a lot more with them in the future for Website and Apps Development!

Cat Kom

Founder, Studio SWEAT onDemand

Watch Video

At BitCot, I worked with Raj and his team, they are brilliant, I discussed the concept with Raj, he really helped me to map out the plan & strategy to get my concept into a real software platform. If you have an idea and you want to make it real, I would recommend Raj and his team. They are affordable, save my time, and map out the right software for me.

Patrick Hadley

Founder, Biglio

Contact Us

Have a question? get in touch for a fee & confidential app consultation where here to help!

Raj Sanghvi

CEO BitCot

Need help? We design, build, and grow digital products across Android, iOS, and web.

+1 858-683-3692 Support

Step Up Your WordPress Development Using Bedrock and Modern Dev Tools

What is Bedrock ?

Bedrock - Folder Structure

Requirements

Bedrock - Importance of file

How to Setup WordPress via Bedrock ?

Setup virtual host in localhost

Transform your online presence with our professional WordPress development services today.

You have a vision. We have a way to get you there.

Speak to our experts

Configuration for our domain / set document root for our domain:

If we use folder outside the wamp/xamp

How to Access WordPress Admin Panel

Advantages Pros that we have realized

Version control

Webpack and Laravel Mix

Plugins

Uploads

Theme

Deployment