Let's Just Blog-104


What is a Wordpress theme?
After installing Wordpress on LAMP stack, we need a layout and structure to our blog site, which means that we need a theme.

I have heard about Theme Forest, which has 1000s of customized theme and you should able to buy one for 40 bucks that will meet your requirements and specifications. As a learning experiment, it may a bit better to develop a prototype theme and install it. Brad has a very nice course on Udemy, and some of you may want to take it. I will also follow Tania Racia, as she has few blogs that will help us in this learning exercise. I am using Bootstrap 4 for responsiveness and have a local environment with npm, node express to test it before installing it on wordpress. Please use the link for letjustblog github repo, to test theme locally and take Brad's course to understand the layout and styles.


What is a Bootstrap?
According to official Bootstrap website and a nice blog from Tania on Bootstrap Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. In the letjustblog repository, I have used Bootstrap4, and understood the template design by following the Bootstrap To Wordpress udemy course. I think that after getting the basic understanding and prototyping, you guys should be on your way to improvise on existing templates, design new ones for your clients, and local environment based on npm, express should help a-lot in the development phase. We will now take the Bootstrap theme and adapt it to the wordpress design and specifications.




What is a MAMP?
Just like we installed Wordpress on LAMP stack in cloud environment, we need a similar local environment as well, and MAMP is abbreviation for Macintosh, Apache, MySQL, and PHP.
Current Directory : Setup folder in letjustblog repository. a) curl -O https://wordpress.org/latest.tar.gz b) tar xvf latest.tar.gz c) rm -rf latest.tar.gz d) cp wordpress/wp-config-sample.php wordpress/wp-config.php e) mkdir wordpress/wp-content/upgrade f) curl -s https://api.wordpress.org/secret-key/1.1/salt/ g) Create Database and DB user using MAMP PhpMyAdmin tool Database: wordpress DB User: wordpressuser, Password: your own password h) Change Document Root to wordpress directory in letjustblog repository instead of default htdocs (Applications/MAMP/htdocs) i) Go through the web install of wordpress.

We have now the wordpress running locally on MAMP server and also LAMP stack on the cloud. Our next task to take the Bootstrap theme and install it in the wordpress environment.

What is a Underscores theme?
underscores is a starter theme for wordpress that has just the necessary files for theme installation and can be turned into a awesome Wordpress theme.
Take the barebones underscores theme and install it in the wordpress environment by copying it to the themes folder. We will then be able to activate the theme from the Dashboard.
Our next task is to take the underscores theme and turn it into our Bootstrap to Wordpress theme.


Bootstrap to Wordpress?
In the setup directory, along with app running our custom theme on express, we will also download latest version of wordpress. It will create a a wordpress along with app which will become our document root for the MAMP server. Please feel free to check out the wordpress folder in letjustblog repo.



Aside from the course, there are some blogs from Tania that can come in quite handy and you can buy her a coffee if you may like.



Deploy Theme on the Server?
Last but not the least, theme that we have developed, tested on the local MAMP server has to be installed in the wordpress environment on the server. We need to run few commands:
a) Clone the letjustblog repo. In the install of Wordpress on LAMP stack, our site has a document root of /var/www/wordpress/.
b) Copy the letjustblogwordpress in the themes directory of wordpress environment
sudo cp -rf /letjustblog/setup/wordpress/wp-content/themes/letjustblogwordpress /var/www/wordpress/wp-content/themes/
c) Activate the theme from Wordpress Dashboard.
d) Create the Home Page by selecting the Home Page template
e) Change the Reading Settings to the Static Page option with Home Page Template.
f) Create the Resources, Contact and Blog Pages.
g) Delete the Sample Page.
h) Now we have a same site running on the server.

Comments

Popular posts from this blog

Let's Just Blog-106