Tech Tutorial and News: WordPress theme development.

Showing posts with label WordPress theme development.. Show all posts

Monday, 7 March 2016

How to create a Bootstrap WordPress Theme? - step 3

If you didn't read the second step, then click here. Ok. Now we will move to the third step.

1. Create two new folders at your themes folder namely css,js.

2. In css folder, create css files namely bootstrap.min.css and ie10-viewport-bug-workaround.css.

3. Click the following link," view-source:http://getbootstrap.com/dist/css/bootstrap.min.css " copy and paste the code at bootstrap.min.css

4. Click the following link, "view-source:http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css " copy and paste the code at ie10-viewport-bug-workaround.css file. Save both files.

5. Now click and open js folder. Create js file named ie-emulation-modes-warning.js

6. Click the following link, "view-source:http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js " copy and paste the code into ie-emulation-modes-warning.js, Save the file.

7. Now add the following code at header.php file just before the "</head>" tag

<?php wp_head(); ?> . Save header.php file.

8. Then open the footer.php file, add the following code just before the "</body>" tag

<?php wp_footer(); ?> . Save footer.php file.

9. Create a new file at your theme folder, named functions.php. then add the following code into the file, Save it.

<?php

function newsite_styles() {

wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'Ie_css', get_template_directory_uri() . '/css/ie10-viewport-bug-workaround.css' );

}
add_action( 'wp_enqueue_scripts', 'newsite_styles' );

?>

10. Open the style.css file and add the following code.

view-source:http://getbootstrap.com/examples/carousel/carousel.css

Do not delete the above comment line on the style.css. Add the code below the comment line. And save it.

11. Now view the site. Some styles are added. But we have added styles and scripts for header only. We will do footer styles and scripts in next lesson.

Video tutorial:

Friday, 4 March 2016

How to create a Bootstrap WordPress Theme? - Step 2

Before reading this tutorial, Please view the step -1 or view the video tutorial : https://www.youtube.com/watch?v=RdokBuEG8Y4

Ok. We will move the second step now.

1. Create another two files in theme folder : header.php and footer.php

2. Now view the following source code, copy and paste it into the index.php file and save index.php: view-source:http://getbootstrap.com/examples/carousel/

3. From index.php , cut the code from "<!DOCTYPE html>" to - before this comment line

<!-- Carousel
    ================================================== -->

Paste the code into header.php file and save header.php file.

4. Please add the following code at top of the index.php file to call the header.php file

<?php get_header(); ?> and save the index.php.

5. Finally, cut the footer content from index.php file which starts from " " to "</html>" . and add or paste the code to footer.php. Save footer.php

6. Please add the following code at bottom of the index.php file to call the footer.php file

<?php get_footer(); ?> and save the index.php.

7. Now view the site. Your contents will added without styling.

View the following video for this text tutorial.

Tuesday, 23 February 2016

How to create a Bootstrap WordPress Theme? - Step 1

Hi All,

Necessary files to create Custom WordPress theme:

style.css
index.php

You should create these files at the following location

1. In your WordPress installed folder - may be cpanel or local host (click to see how to install WordPress). Find the "wp-content" folder. Click and open the folder

2. Inside the "wp-content" folder, You will see another folder named "themes". Click and open the folder.

3. Inside the "themes" folder, Create a folder with different name. It may be your theme name or a custom name.

4. Inside the newly created folder, create style.css and index.php

Simple steps :

WordPress Folder -> wp-content -> themes -> create a directory or folder with a name. (For Example :"myfolder") -> create style.css and index.php and save it.

Now you have created necessary files for your custom theme.

You should add the following code into your style.css file:

/*
Theme Name: Themename
Theme URI: 1wmedia.com
Author: 1wmedia.com
Author URI: http://1wmedia.com
Description: These the come with sidebar and full width pages.

*/

In the above code,

Instead of "Themename " use your own or custom theme name. Others - you can use your own URI and Description.

Now login your dashboard -> Appearance -> Themes -> Your theme will display. -> click and activate the theme.

See the picture below:

First step is over. We will see next steps in next post.

Video Tutorial :