====================================================================== CREATE A WORDPRESS THEMED WEBSITE ====================================================================== ********************************************************************** INSTALLING WORDPRESS ==================== 1. Start XAMPP/WAMPP. 2.

Go to (http://localhost/phpmyadmin) and create new database for your website ex: steelpoint. 3. Download wordpress. 4. Download new copy of _s name it according to your website name. (http://under scores.me) 5. Put the wordpress folder in your htdocs. 6. Open your browser and type (http://localhost/wordpress) on the address field. 7. Create wp-config.php file by clicking the "Create Configuration File" button . 8. You will need to insert the correct details for Database name, Database usern ame, Database password, Database host, Table prefix (just leave it as it is). EX: Database name: steelpoint Database username: root Database password: Database host: localhost Table prefix: wp_ 9. Insert your website name, your username and password. Note: remember your use rname and password you will need this for logging in your wordpress website. 10. Type (http://localhost/wordpress/wp-admin) in your browser address and inser t your username and password to log in. IMPORTING YOUR CUSTOM THEME IN WORDPRESS ======================================== 1. Copy the folder that you download in _s website and paste it in (C:\xampp\htd ocs\wordpress\wp-content\themes). 2. In the folder that you download from _s, open style.css and copy the site det ails above. 3. In your custom theme folder, open style.css and paste what you've copied in _ s style.css. EX: /* Theme Name: SteelPoint Theme URI: http://underscores.me/ Author: Underscores.me Author URI: http://underscores.me/ Description: Description Version: 1.0 License: GNU General Public License License URI: license.txt Text Domain: steelpoint Domain Path: /languages/ */ 4. Replace _s style.css with your custom theme's style.css. 5. Import files and folders that are in your custom theme into _s folder (css, j s, images, fonts, etc). 6. In photoshop, create a 600x450 size file that shows the website logo and name it Screenshot.png. 7. Save the Screenshot.png in your _s folder (C:\xampp\htdocs\wordpress\wp-conte

nt\themes\steelpoint) 8. Go to (http://localhost/wordpress/wp-admin/themes.php) you should see your cu stom theme below the "Available themes". 9. Activate your theme by clicking the "activate" link below the image(Screensho t). 10. Visit your website (http://localhost/wordpress) you will notice that some of the styles are missing(background, images, etc) this is because you still need to tweak few codes so that wordpress would recognize your styles completely.

====================================================================== THE HEADER.PHP AND FUNCTION.PHP ====================================================================== ********************************************************************** ADD EI CONDITIONAL STATEMENTS ============================= >Paste the following codes below <?php wp_head(); ?> EX: <?php wp_head(); ?> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selecti vizr-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond. min.js"></script> <![endif]--> ADD CUSTOMIZER CODE FOR LOGO HEADER UPLOADER ON WORDPRESS ========================================================= 1. Paste the following codes below <div class="site-branding> EX: <div class="site-branding col-sm-6 col-md-6"> <!--customizer code--> <?php if ( get_theme_mod( 'themeslug_logo' ) ) : ?> <a class="navbar-brand apicii-logo" href='<?php echo esc_url( home_u rl( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ) ; ?>' rel='home'><img src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a> <?php else : ?> <hgroup> <h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ? >' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='hom e'><?php bloginfo( 'name' ); ?></a></h1> </hgroup> <?php endif; ?> <!--end customizer--> </div> 2. You can remove or comment out h1(site-title) and h2(site-description) since i

t would no longer be needed. 3. Paste the following codes in your functions.php (the codes are found in custo mizer.php(C:\xampp\htdocs\wordpress\wp-content\themes\steelpoint\inc)) /** * Upload Logo of Site */ function themeslug_theme_customizer( $wp_customize ) { $wp_customize->add_section( 'themeslug_logo_section' , array( 'title' => __( 'Logo', 'themeslug' ), 'priority' => 30, 'description' => 'Upload a logo to replace the default site name and description in the header', ) ); $wp_customize->add_setting( 'themeslug_logo' ); $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customiz e, 'themeslug_logo', array( 'label' => __( 'Logo', 'themeslug' ), 'section' => 'themeslug_logo_section', 'settings' => 'themeslug_logo', ) ) ); } add_action('customize_register', 'themeslug_theme_customizer'); 4. Open your browser and go to (http://localhost/wordpress/wp-admin/customize.ph p), provide your website info (logo, background, etc)

IF YOU HAVE MENU OTHER THAN MAIN NAVIGATION ON HEADER AREA ========================================================== >top-menu = id or name of custom menu that you created on functions.php >menu_class = where you put your class for that custom menu EX: top-menu <div class="site-branding col-sm-6 col-md-6"> <?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'menu_class' = > 'top-navi pull-right' ) ); ?> </div> MAIN NAVIGATION AREA ===================== >Change the _S code to your themes code >You can add classes and div according to your themes code ><div class="row main-navi-bg"> = Main container of your navigation >navbar-default = added class ><div class="navbar-header">,<div class="collapse navbar-collapse navbar-ex1-col lapse"> = dropdown for mobile devices >paste the wp_bootstrap_navwalker.php file on your theme folder (wp-conetnt/them es/--theme name--/) EX: _S code: <nav id="site-navigation" class="main-navigation" role="navigation"> <h1 class="menu-toggle"><?php _e( 'Menu', 'steelpoint' ); ?></h1>

<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'steelpoint' ); ?></a> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </nav><!-- #site-navigation --> Your theme: <div class="row main-navi-bg"> <nav id="site-navigation" class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" datatarget=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <?php wp_nav_menu( array( 'menu' => '', 'theme_location' => 'primary', 'depth' => 2, 'container' => false, 'menu_class' => 'nav navbar-nav main-navi', 'fallback_cb' => '', 'walker' => new wp_bootstrap_navwalker()) ); ?> </div><!-- /.navbar-collapse --> </nav><!-- #site-navigation --> </div>

====================================================================== THE FUNCTION.PHP ====================================================================== ********************************************************************** SET THE WIDTH OF YOUR MAIN CONTAINER ==================================== 1. For bootstrap, add 30px ex: (978+30 = 1008) 2. Tweak the following code in functions.php according to your themes width. EX: /** * Set the content width based on the theme's design and stylesheet. */ if ( ! isset( $content_width ) )

$content_width = 1008; /* pixels */ MAKE WORDPRESS RECOGNIZE YOUR STYLES ANS JS SCRIPTS =================================================== 1. Add Bootstrap stlye css first, then your themes css, followed by js 2. --themename-- = name of your theme, ex(steelpoint) wp_enqueue_style( '--themename---bootstrap-style', get_stylesheet_directory_uri( ) . '/css/bootstrap.min.css' ); wp_enqueue_style( '--themename---style', get_stylesheet_uri() ); wp_enqueue_script( '--themename---bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js' ); EX: function steelpoint_scripts() { wp_enqueue_style( 'steelpoint-bootstrap-style', get_stylesheet_directory_uri() . '/css/bootstrap.min.css' ); wp_enqueue_style( 'steelpoint-style', get_stylesheet_uri() ); wp_enqueue_script( 'steelpoint-navigation', get_template_directory_uri() . '/j s/navigation.js', array(), '20120206', true ); wp_enqueue_script( 'steelpoint-bootstrap-js', get_template_directory_uri() . ' /js/bootstrap.min.js' ); wp_enqueue_script( 'steelpoint-skip-link-focus-fix', get_template_directory_ur i() . '/js/skip-link-focus-fix.js', array(), '20130115', true ); if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } if ( is_singular() && wp_attachment_is_image() ) { wp_enqueue_script( 'steelpoint-keyboard-image-navigation', get_template_dire ctory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20120202' ); } } add_action( 'wp_enqueue_scripts', 'steelpoint_scripts' ); REGISTER CUSTOM MENU ==================== register_nav_menus( array( 'primary' => __( 'Primary Menu', 'steelpoint' ), 'top-menu' => __( 'Top Menu', 'steelpoint' ), ) ); REGISTER WIDGET/SIDEBAR ======================= function --themename--_widgets_init() { register_sidebar( array( 'name' => __( 'Home Widget', 'steelpoint' ),

'id' => 'home-widget', 'before_widget' => '<aside id="%1$s" class="col-sm-4 col-md-4 widget %2$s">' , 'after_widget' => '</aside>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); } add_action( 'widgets_init', '--themename--_widgets_init' ); ADD FEATURED POST IMAGE ======================= add_theme_support( 'post-thumbnails' ); MAKE WORDPRESS RECOGNIZE NAVWALKER(navigation dropdown for mobile) ================================================================== /** * Load Theme Walker for Bootstrap Navbar * // Register Custom Navigation Walker */ require_once('wp_bootstrap_navwalker.php');