Saturday, 10 December 2016

WordPress Basics Part 2 : HTML to WordPress

WordPress Started in 2003 as a Content Management System, which covers 24% web now a days.
It is open source CMS, worked with basics of PHP and MySQL.

There are lot of plugins available which makes easy to establish your WP website in simple and efficient way.

IF you are a UI Developer and all you need is that your website respond dynamically, then definitely you'll go for WP.

Below are the Some Basic Code Snippet, which is used when You are going to Convert Your HTML to WP.

1:) Making Custom Widget: Use this code in function.php widget area and update file.

 register_sidebar( array(
'name'          => __( 'Logo', 'twentyfifteen' ),
'id'            => 'logo',
'description'   => __( 'Add logo here to appear in your sidebar.', 'twentyfifteen' ),
'before_widget' => '',
'after_widget'  => '',
'before_title'  => '',
'after_title'   => '',
) );

Now your widget would be created in the Widget Section under Appearance of your WP Dashboard.

Now all you need is to call that widget to that section, where you want.

<?php dynamic_sidebar('logo') ?>

Now your client can easily update information, relevant to that widget, without struggling with the code. Because you call that particular content by making widget dynamically, which is easily editable to the client.


2:) Making Custom Post: Use this code in function.php custom header area and update file.

/* photography custom post */

add_action('init', 'photography');
function photography() {
   $faq_args = array(
   'labels' => array(
   'name' => __( 'Photography' ),
  'singular_name' => __( 'Photos' ),
  'add_new' => __( 'Add Photos' ),
  'add_new_item' => __( 'Add Photos' ),
  'edit_item' => __( 'Edit Photo' ),
  'new_item' => __( 'Add Photos' ),
  'view_item' => __( 'View Photos' ),
  'search_items' => __( 'Search Photos' ),
  'not_found' => __( 'No Photos found' ),
  'not_found_in_trash' => __( 'No Photos found in trash' )
),
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => true,
'menu_position' => 80,
'supports' => array('title', 'editor','comments', 'thumbnail')
);
register_post_type('Photos',$faq_args);
}
add_filter("manage_faq_edit_columns", "photography_edit_columns");
function photography_edit_columns($photography_columns){
$photography_columns = array(
   "cb" => "<input type=\"checkbox\" />",
    "id" => "ID",
   "title" => "Title",
);
  return $photography_columns;
}

Now you can see custom post named Photography in your WP Dashboard left panel. Like this, See Screenshot:



Now client easily customize photography section without dealing with the code, and whatever changes client do, like Image replacement, text replacemen , it reflect to the front-end.

Now all you need is to call that Custom Post to that section, where you want.

<?php $getting_content_from_custom_post = array('post_type'=> 'Photos','post_status' => 'publish','order' => 'desc','posts_per_page' => -1);

Calling Content:
query_posts( $getting_content_from_custom_post );
<?php while ( have_posts() ) : the_post();
the_content();
 endwhile; ?>

Calling Thumbnail Images
<img src="<?php the_post_thumbnail_url('full'); ?>" alt="">

3:) Calling Category from the Post:

<?php $i=1;
$abc = array('post_type'=> 'post', 'category_name' => 'a', 'post_status' => 'publish','order' => 'asc','posts_per_page' => -1);

query_posts( $abc);

if($i==1){
     $featimage = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID),'full' );
     <img src="<?php echo $featimage[0]; ?>" alt="">
     <?php the_content(); ?>
      $i++;
} else{
       // do something
}?>


4:) Calling Title : <?php the_title(); ?>

5:) Calling Menu: 

<?php wp_nav_menu(array('menu'=>'mainMenu','menu_class'=>'nav navbar-nav','container'=>'')) ?>

6:) Calling Form:

<?php echo do_shortcode('contact_form_7_shortcode_snippet') ; ?>

7:) Calling Slider:

<?php $args = array( 'post_type' => 'ps_promotion', 'tax_query' => array( 'relation' => 'AND',array( 'taxonomy' => 'promotion-categories', 'field' => 'term_id', 'terms' =>'SLIDER_ID')));
$query = new WP_Query($args);
while ( $query->have_posts()) : $query->the_post();
$featuredImage = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div class="item" ><img src="<?php echo $featuredImage[0];?>">
      <div class="container">
           <div class="slidText">
                   <h3><?php the_title(); ?></h3>
                   <?php the_content(); ?>
           </div>
      </div>
</div>

<?php endwhile;?>

8:) Calling Active Menu Class:

// Active Menu
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class ($classes, $item) {
    if (in_array('current-menu-item', $classes) ){
        $classes[] = 'active';
    }
    return $classes;
}

9:) Calling PHP header and footer:

<?php get_header(); ?>  & <?php get_footer(); ?>

10:) Adding different class on different pages in a body:

<body <?php body_class(); ?>> </body>

11:) Calling logo:

<?php twentyfifteen_the_custom_logo(); ?>

12:) Creating Template file:  template name: Contact_Page

13:) Calling your Resources:

<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/jquery.min.js"></script>

Open-source Plugins which is used normally 100% on the WP websites:

==> Contact Form 7, Promotion Slider, Simple Image Widget, All in One SEO Plugin, 301 Redirect Plugin, W3 Total Cache