Davide Guida | my personal thoughts about life, coding, the universe and everything.

my personal thoughts about life, coding, the universe and everything.

Show menu Hide menu

CategoryWordpress

dockerize wordpress

How to create a docker container for a WordPress website

5 June 2017 / / 0 Comments

This is my first post on Docker so please be gentle. I am going to start with something easy: how to create a Docker container to host a WordPress website.

One word before we start: don’t do this on a production server! There are more rules and checks you have to do, this is just an introduction, good for a dev/demo environment.

So, I assume you already have docker and docker-compose installed on your system, but in case you don’t, there’s an excellent documentation on the Docker’s website.

The first step is to fire up the terminal, create a folder and save the contents of this gist to a file named docker-compose.yml .

Next step is to fire up the containers with this command:

docker-compose up -d

the -d is the “detached mode”, allows you to run the containers in background and keep using the terminal.

Now, if you take a look at our Compose configuration, on line 22 we have specified an host address for the mysql instance. It might be already correct, but better check. 
From the command line, first run

docker ps

to get the list of running containers. You should see something like this:

using docker ps to get the list of containers

using docker ps to get the list of containers

Grab the name of the db container and run

docker inspect wptestfull_mysql_1

You will get a big JSON object exposing the status and all the available properties of the container. At the end you should get this:

using docker inspect to get the container ip address

using docker inspect to get the container ip address

there you go, our IPAddress. Copy it into the docker-compose file and run again docker-compose up -d .

Now we need to create a db user. Open your browser and go to http://localhost:8181/ , you will see the phpMyAdmin interface. Create the user, the db and set the allowed hosts to % . This way we will allow connections from every address. Again: don’t do this on production!

Now all you have to do is to load http://localhost:8080/ and setup your WordPress instance 🙂

Next time: what if we want more than one website?

Yet another “How to use SASS with WordPress” guide

7 December 2016 / / 0 Comments

Yes, it’s another one. If you lookup on Google there are are tons of articles about how to use SASS in a WordPress theme, so why writing another one?

Well, the answer is simple. Because I can. Because I am bored. Because I’m going to give you the sources with no fuss.

First of all, take a look at this repo.

As you can easily notice, it contains part of the standard WordPress folder structure and a bunch of other files. And trust me, I am not that kind of guy who adds files for nothing.

The main idea here is to have Gulp search and watch for our .scss files in the child theme folder and build the final style.css files every time something changes. Nice isn’t it?

Before we start we need of course to install some dependencies. Fire up the Terminal and run:

sudo npm install -g gulp

just to make sure we have Gulp installed globally (that’s why you need sudo for that). Then run:

npm install gulp gulp-sass gulp-clean gulp-autoprefixer –save-dev

 We’ll discuss about those packages later.

 
I have added a “sass” folder inside “twentysixteen-child” that contains all our SASS files.

The style.scss file is our main entry point and as you can see from the repo, contains all the boilerplate code required by WordPress to discover the child theme.

I tend to include a _base.scss file that contains all the basic dependencies like variables and mixins. Then in style.scss I append all the page templates, like _home.scss in our small example.

 

 

 

Now let’s talk about the Gulp configuration file. The first lines contain the dependencies we need in our tasks, gulp, sass, clean and autoprefixer (more on this later).

Then we have the paths we want our SASS compiler to run on. As you can see I am using the child theme path as a base concatenated to the others.

After this we can start with the tasks. The first one is responsible of removing all the files from the previous build (basically just one, style.css ).

Then we have the actual SASS compilation. I am passing to the sass() function an empty configuration object, but there are several options available, for example you may want to compress the result.

The “postprocess” task is responsible of every post-compilation step we may want to perform on the output css file. In our case, I am using a very useful library named Autoprefixer that adds all the vendor-specific prefixes. If you’re interested, there’s a nice article on CSS-tricks.com, you can read it here.

The last bit is the “watch” task. This is interesting: basically it tells Gulp to monitor our /sass/ folder and every time there’s a change, to run again the “build” task. That’s it!

Now all you have to do, if you’re using Visual Studio Code like me, is to hit cmd+shift+p  and type “Configure Task Runner”:

then pick Gulp as your default Task Runner. If you take a look at the tasks.json file in the repo, you will notice that I have added some more custom configuration just to instruct VS Code to use the “default” task as main entrypoint.

That’s it!

WordPress: how to handle page redirects in shortcodes

15 July 2016 / / 0 Comments

This is just a quick tip, something that I faced a while ago while working on a client’s website.
I had to develop a shortcode responsible to render a form and obviously after the submission I wanted to redirect the user to another url (following the POST/redirect/GET pattern).

It may seem easy but using something like wp_redirect directly in the shortcode rendering block may cause errors like this:

Warning: Cannot modify header information - headers already sent by ...

One possible (and very easy) solution is to register a function for the template_redirect hook and handle everything there. Something like this:

of course don’t forget to create an instance of the class!

© 2017 Davide Guida

Theme by Anders Noren — Up ↑