1. Create a folder with a name at your WordPress themes folder.
2. Create index.php and style.css files.
3. Copy the following code into your style.css file and save it.
4. Now go to your WordPress dashboard - Appearance - Themes - and mouse over to the Femiya Theme and Click Activate.
5. Copy the index.html file and paste it into index.php
6. Now copy the main styles from the CSS folder and paste it into the style.css - Should be below the */ code. (View 3rd point).
7. Create header.php and footer.php.
8. Cut the header part from index.php and add it to header.php file
9. Replace header part at index.php with the following code. <?php get_header(); ?>
10. Cut the footer part from index.php and add it to your footer.php file.
11. Now replace footer part at index.php with the following code. <?php get_footer(); ?>
In this tutorial we will see how to create single post template for our theme.
1. Open your blog page and click the link for viewing a post. It doesn’t work. So now we will create single post style or template. 2. Duplicate the home.php file and save as single.php. 3. This single.php is your default single post template. 4. Remove the excerpt and Readmore and add content function. 5. Remove the top title also. 6. Now your single post is ready.
7. View my previous tutorial and this video to understand the code changing.
<!-- Marketing messaging and featurettes ================================================== --> <!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!-- Three columns of text below the carousel --> <div class="row">
In this lesson, we will learn how to style default Blog page in WordPress. Please view my previous tutorials for creating blog page.
1. First go to you theme folder, open home.php file.
2. Here you can modify your blog page.
3. In our tutorial, Just remove the codes (fully) and add the following code. or you can refer the video for particular edits.
<!-- Marketing messaging and featurettes ================================================== --> <!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!-- Three columns of text below the carousel --> <div class="row">
In this tutorial, We will see how to create default blog page which is home.php and front-page.php for custom front page.
1. If you are following my previous tutorials, you may be created themes folder and all other files. If not, please view the previous tutorials.
2. In the theme folder, duplicate the page.php and save as home.php . This home.php file is your default blog page. Don't misspell this. Then it won't work.
3. Now it will take your default home page into blog page. If home.php not available, your front page will be your index.php.
4. So we need to create another file for front-page. So duplicate index.php and save as front-page.php.
5. This will automatically take your front page.
6. If you change some settings in Settings -> Reading , in Dashboard , then your front page will not work.
7. So create two new pages from Pages and add it to menus.
8. Now go to Settings -> Reading again . Choose your front page and blog page. and save it.
sidebar_widgets("Page Sidebar", "right-sidebar", "Sidebar Widgets");
sidebar_widgets( "First Sidebar", "first-sidebar", "This is first sidebar");
sidebar_widgets( "Second Sidebar", "second-sidebar", "This is Second sidebar");
?>
2. Here our custom function name is "sidebar_widgets". In this function, we are creating three variables namely, $widget_name, $widget_id, $widget_description.
3. We will pass these variables into register_sidebar function. For example,
'name' => __($widget_name),
Refere point no 1.
Same for other two. But we didn't create variables for 'before_widget' and others..
4. After this we have called the function to create widgets with our custom names, ids, descriptions.
The above code creates the sidebar with the name "Page Sidebar"
if you call the sidebar_widgets function with different name,id and description , then it will create another sidebar. Here we have created 3 sidebars . Refer point no 1.
5. Now view widgets in dashboard -> You will see 3 widget sidebar.
7. Add some widgets to all 3 sidebars and save it.
8. Now we will call / add this widget in your template or wherever you want.
9. In our case we will add this into page-sidebar template. So open the page-sidebar.php file.
10. Paste the following code below "<div class="col-md-4" > "
17. Now add the following code into the page-sidebar.php file, instead of the above code .
<?php get_sidebar();?>
18. Save both files. That's all. Now you sidebars work from sidebar.php file. If you done anything at sidebar.php file, then it will reflect at your page-sidebar template.
2. Add the functions.php code from Extended Walker and add it to your functions.php file and save it.
3. open your header.php.
4. Add depth value and call wp nav walker inside the $args array. (please refer the video)
'depth'=>0, 'walker'=>newBootstrapNavMenuWalker()
and hit save.
5. Now open the style.css and add the following code and save the file. /* dropdown */ .dropdown-menu { margin: 0px auto; } .dropdown-menu .dropdown-menu { left: 100%; top: 0px; } /* shows the dropdown on hover*/ .navbar ul.nav li:hover > ul.dropdown-menu { display: block; } /* before and after */ .navbar .nav > li > .dropdown-menu::before, .navbar .nav > li > .dropdown-menu::after { display: none; } 6. Now get the Javascript code (open-on-mouseover.js ) from this link ->https://gist.github.com/setola/3765640
7. Create a Javascript file with name(for example extra_js.js) , Put the code and save it inside the js folder in the themes folder.
8. Now call or enqueue the Js file with following code at functions.php .It should ne inside the function newsite_js() (Please refer the video)
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.
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 " <!-- FOOTER -->" 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.
