Easy WordPress Theme Development with Bootstrap

Beginners html is for those with no prior experience with html.

Beginners CSS3 is for those with no prior experience with CSS3.

Beginners Bootstrap is for those with no prior experience with Bootstrap.

Beginners PHP is for those with no prior experience with PHP.

Beginners WordPress is a quick overview of the theme we will be building. If you have no prior experience with WordPress: you need to take one of the many free courses available on Udemy for beginners on WordPress.

Recommended code editors and free downloads.

Feb23/2017  the 4 UpdraftPlus zip backup files are now all in one zip file that needs to be unzipped because Udemy Server must not be allowing the underscore required in the naming convention used by UpdraftPlus. (This is likely to protect PHP's superglobals from hack attacks.)

(July 20/2016) new UpdraftPlus backup files with two new templates and demo pages.

There is also an "All-in-One WP" backup of finished themes and resources in the Site Migration tutorial ( in the BONUS - Advanced Section)

Page templates overview: What is a page template and which page is used for what.

Style.css is required for every theme. It includes information about the theme along with your css.

Index.php is required for every theme. It is the default page for your front page, blog or any other page that does not have a specific page.

Introduction to the WordPress loop

Quick look a required file: functions.php 

front-page.php is not a required page file but we use it for our custom home page.

footer.php is used for our social icons in widget areas 

page.php uses our get_template_part to pull in the loop

Creating a page template: page-no-banner.php  introducing : /* Template Name: No Banner with Sidebar */

Starting our actual page.php creation with pulling in page part: <?php get_template_part('page', 'loop') ?>

Understanding the  WordPress Loop

Use the comment out tags on the footer.php scripts because we have added it in the functions.php   These scripts are left over from our html version and are included as examples.

Loading it from footer.php will prevent the drop down menu from working.

<!-- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  -->
   (We go over this in the Tutorial but you need to  comment them out or delete them in your copy)   

New as of July 6 2016 YourTheme  install zip file now has (added span tags and sidebar class to sidebar.php and  .sidebar.textwidget to style.css so styling of sidebar does not effect .textwidget in footer).

<span class="sidebar"> <?php  dynamic_sidebar( 'right_sidebar'); ?></span>

You should try to build these files yourself.

STEP 1) Your WordPress install must have Advanced Custom Fields (ACF) PLUGIN installed and Under TOOLS ->Import --> WordPress (custom fields) it will ask for file to upload: use our advanced-custom-field-export.xml file. (see lessons 41 & 42)

STEP2) Create a blank Home page in WordPress and in the Dashboard on left panel go to SETTINGS under READING: STATIC Front Page  must be set to Home page.

STEP3) Assign all of the custom fields (USING ACF) to your Home page.

STEP4) Install: YourTheme.zip

STEP5) Add your own content to your home page custom fields. Add more pages with your own content and create your own custom fields for those pages.

Congratz!

After import of Advanced Custom Fields exported .xml file, you can add your own content to your theme's custom fields on your home page.

When adding a sidebar it is best to put it in a <span class="sidebar"> <?php  dynamic_sidebar( 'right_sidebar'); ?></span>

Then add the sidebar class to your style.css like this: .sidebar.textwidget
This will target only the location that has both .sidebar and .textwidget

/*=================== SideBar ID & Class Styles =============== */

#archives-2 ul, #recent-posts-2 ul, #meta-2 ul, #pages-2 ul, #search-2, .sidebar.textwidget {

background-color: #eee;
border-style: double;
border-color: black;
border-width: 3px;
padding:32px;
}

This exercise will launch you on your way to developing custom pages for your own theme. You will create a unique header and footer that will be called from a custom page template.

Sometimes a client may come to you that has lost or forgotten their admin password for their site. If you can login to their cPanel on their sever—this video will show you how to change user passwords in the WordPress database.

You must unzip the file to use it with All-in-One WP Migration. It has an extension of file type: .wpress and had to be in zip to upload it to Udemy. Watch the video and learn how to upload the themes and data to any server. Have fun!

Exercise: Select  FREE Udemy courses that will help you get up to speed in WordPress theme development.