After Watching Video , Get the Best Wordpress
Themes in the World
( Download
Now )
Hello and welcome. In this video, we'll use Pine grow to create a Word Pres theme from scratch - in less than W minutes , To get started we create a new blank page that we immediately save in the project directory under the name index.HTML Let's activate the Word Press plugin We'll start by adding the "Word Press Site" action on the BODY element of our page and then adjust the settings , We configure our document as a Master page, give a name to our theme and create the export directory for the theme , We also specify the URL of the Word Press development site , We add a HEADER section Let's continue with adding Bootstrap components such as the navigation bar , We remove unnecessary elements that will not be used in our theme , We modify a couple of styles , Now we add the jumbo tron , We do some style tweaking and turn-on full-width display mode for Jumbo tron , We add the "Site name" Word Press action to the Brand element , and we also add a link to the homepage , Let's activate the PHP Code preview to see the PHP code generated by Pine grow , We go to the Naval section that we'll use for our Word Press menu , We add the "cavemen" action. We select Primary menu and we also specifies that it is a Bootstrap menu , Let's add the MAIN section now , Let's add a Container , We'll now setup the column that will show a Post , We have a title, a paragraph of content and we add an image , We add "The post thumbnail" Word Press action to the image , "The title" on the title .. , And we add "The Content" on the content paragraph , Finally, and this is an important part, we add "The Loop" action to the column element , We save and export the theme , In Word press admin, in Appearance - Theme we activate our new theme , We can now see the result and we discover that the grid is not well formed because Bootstrap columns have different heights , We fix the situation by checking "Clear Bootstrap columns" in the Loop setup , We save and export the theme , Our posts grid display is now fine , Now, let's add the FOOTER section , We set the content of the paragraph , And we put the PHP component on the and add a PHP code for displaying the current year , We save and check the result , Now, we're going to make our theme changeable with Word Press customize , We style the background but we don't add any image yet , From the Customize section add "Add Customize section" action , We set the section ID and name , We add "Add customize control" to the selected Jumbo tron , set the ID and the name , set the content type to Media , Set the Mime type to image , Set "Show in section" to the ID of the section we just created , Now, from the Posts section add "Attachment image Beck" to the Jumbo tron , Set "Customize theme mod" property to the ID of our control , Set the size of the image to large , We save, export the theme and check the result , Our new section is there and we can dynamically change the background image , Next we select the Jumbo tron title , We add another customize control, this time for the title , Set the ID and the name , The content type will be text and we set "Show in section" to the ID of our Customize section , We add "Display theme mod" action to the selected Jumbo tron title , Set "Theme mod" to the ID of the control we have just created , We save, export the theme and check the result , In the customize, we now have a new control available in our main section that let's us dynamically edit the jumbo tron title , Let's have a quick look at the files in our source template folder.. , ...and, in the folder we chose for the exported Word Press theme , Next we assign the SITE CONTENT action to the MAIN element and save our template , In the theme folder, we find the result of the export which now includes 2 new files: HEADER.PHP and a FOOTER.PHP Because our next Word Press template is SINGLE.PHP, SAVE AS index.HTML as single.HTML , We modify the size of the image And we set the column span to W For all non-index.HTML templates we unchecked the Master page on the "Word Press Site" action on the body element , We set index.HTML as the master page , And we save and export our page , We now have a new Word Press template in our theme folder: single.PP From the browser, we open a post and we can see the the display is different, because we use single.PP for the single posts display , And thanks to Bootstrap, our theme is fully responsive as well. In the following videos we'll take a detailed look at all the steps involved in creating a Word Press theme with Pine grow.
