Add meta slider right next to logo in wordpress theme Tiga

When you upload logo in wordpress theme Tiga, there is a big space in header next to logo.

So, I want to add the slider in that vacant space.
It is better to use child theme for revision.

*** Create Slider and get a code to insert in the template
I use meta slider and I installed and activated it.

After adding slide images, select Nivo slider. I found other option does not work well in some browser. Then, select Hidden for navigation.

At bottom, find the code in Usage. I will use Template Include

Full Template Include code is just like <?php echo do_shortcode("[metaslider id=233]"); ?>

** Insert code in header.php
You will find the following in header.php

 

   <div class="site-branding">
    <?php tiga_site_title(); ?>
   </div><!-- end .site-branding -->

   <?php get_template_part( 'menu', 'primary' ); // load menu-primary.php file. ?>

I will use table and it will be changed as follows:

<table  width="900px" height="30px" border="0" cellpadding="0" ><tr>
<td align="center" valign="center" width="250px" height="30px">

   <div class="site-branding">
    <?php tiga_site_title(); ?>
   </div><!-- end .site-branding -->
</td>

   <?php get_template_part( 'menu', 'primary' ); // load menu-primary.php file. ?>



<td align="left" valign="center" width="500px" height="30px">
<div><?php echo do_shortcode("[metaslider id=233]"); ?></div>
</td></tr></table>


It will show metaslider next to your logo in header.

** Hide lines of table
After revising header.php, logo and slider will be shown with table lines. Let's hide lines by css.

In header.php, there is following css:

/*  STANDARD TABLE  ------------ */
table {
  width: 100%;
}

table,
td {
  border: 1px solid #e8e8e8;
  border-collapse: collapse;
  margin: 1.5em 0;
  padding: 5px 10px;
}


Revise border as follows:

/*  STANDARD TABLE ----------- */
table {
  width: 100%;
}
table,
td {
  border: 0px solid #ffffff;
  border-collapse: collapse;
  margin: 1.5em 0;
  padding: 5px 10px;
}


Paste it in Appearance > Theme Options > Custom Code > Custom CSS.

 

Thank you.

Change image size in Grid Product, Wordpress

Grid Product is a very good plug in for displaying products.

To show products, you have add <code> [product] </code> in your page.
Its default view is grid type. If you want to see magazine type, use <code>[product view=list]</code>

However, You many face hardship because of the image size in twenty twelve theme.
Default Featured Image size is half of following. The picture is full because it is Tiga theme.

In this case you have to change some code about image size in grid product plugin.

There are two ways.

1. Change and set image size:
-In your wp-content>plugins>grid product folder,  open grid-products.php.
You have to change image size as follows:

Original:
add_image_size('product-image',240,140, true);
add_image_size('product-image2',195,140, true);

After change:

add_image_size('product-image',180,180, true);
add_image_size('product-image2',180,180, true);

-Change thumnail box size.
You can find the following code for getting thumnail. You have to change the final image size.

Original:

$theimage=wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()) , 'product-image');

    $product_shortcode .= '<tr><td align="center"><a href="' . get_permalink() . '"><img src="'.$theimage[0].'" alt="" /></a></td>';


Where to change:
revise img src part as <img src="'.$theimage[0].'" " style="max-width:100px;" alt="" height="100"  />

Thumnail parts are too. One is for list type and the other is grid type. You also have to change both.

Then, you have resize the image and upload it again in Featured Image of your post/product/page.

2. If you use Tiga theme, it is much easier.

In functions.php of Tiga wordpress theme, you can find the following

 add_image_size( 'tiga-140px' , 140, 140, true );
 add_image_size( 'tiga-300px' , 300, 130, true );
 add_image_size( 'tiga-700px' , 700, 300, true );
 add_image_size( 'tiga-620px' , 620, 350, true );
 add_image_size( 'tiga-460px' , 460, 300, true );

Paste them to grid-products.php after original add image.

Find the following codes

$theimage=wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()) , 'product-image');
$theimage=wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()) , 'product-image2');

Change product-image and product-image2 as tiga-140px as follows

$theimage=wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()) ,'tiga-140px' /*'product-image'*/);
$theimage=wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()) ,'tiga-140px' /*'product-image2'*/);

I think it is better to use comment (/* */ )because you can use it later by uncommenting.

After doing it, it can show the original image, you can resize the image in Featured Image and update.
It will show a full fit image.

Thank you.

Reference: codex.wordpress.org/Function_Reference/add_image_size

menu and content letter size, website length, theme option, Tiga wordpress theme

In using Tiga theme, you need to revise some.
I will explain as follows:

In Appearance of your wordpress dashboard, you will see Theme, Customize, Widget, Menus, Theme Options, Header, Background, Editor

* Theme: If you made the child theme, activate the child theme.
* Customize:
- Navigation: The secondary navigation is main navigation in this theme, The primary navigation is header menu.
- Static Front Page :  If you use magento wordpress integration, it is better to set as follows:
select A static page. set Front Page as it is select and Blog Page as Blog ( I named Blog for a blog page.

* Widget: There are three section: Available widget, Sidebar, Inactive widget (if you have inactive sidebar, it can be shown at bottom) You can drag and drop any available widget to sidebar at right.
It will be shown at your site

* Menu: Just drag and drop from left items and make a hierachy at right. Then you have to save it.
Please select menu setting (primary menu, secondary menu) at bottom. When you want to see other menu, you can select at top.

* Theme Options
- Typography: Just disable it. You can set letter size, etc here but I think it is better to use custom css in Custom code.

- Custom Code
Now, it is very important point. You can see Custom CSS at Custom Code of Theme Options.
It will overwrite your style.css. I will revise three: website length, menu letter size and content letter size.

1. length of main menu bar: Paste all structure script because if you paste just a part, you will lose the rest part. It can cause some strange feature in mobile view.

 You can see max-width. When you revise it 1040px, it will be 1040px.

/*------------STRUCTURAL LAYOUT --------------- */
.site {
  background-color: white;
  -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
  *zoom: 1;
  max-width: 940px;
  _width: 940px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 18px;
  padding-bottom: 18px;
}
.site:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 320px) and (max-width: 1024px) {
  .site {
    margin: 0 18px 18px;
    padding-bottom: 18px;
  }
}

.site-header {
  clear: both;
  margin-bottom: 36px;
  padding-top: 18px;
}

#main {
  clear: both;
}

.site-content {
  width: 65.95745%;
  float: left;
  margin-right: 2.12766%;
  display: inline;
}
@media (max-width: 768px) {
  .site-content {
    width: 100%;
    float: right;
    margin-right: 0;
  }
}

.sidebar-primary {
  background-color: whitesmoke;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  width: 31.91489%;
  float: right;
  margin-right: 0;
  *margin-left: -20px;
  display: inline;
}
@media (max-width: 768px) {
  .sidebar-primary {
    width: 100%;
    float: right;
    margin-right: 0;
    margin-top: 12px;
  }
  .sidebar-primary .widget {
    width: 44.68085%;
    float: left;
    margin-right: 2.12766%;
    border-bottom: 0;
  }
  .sidebar-primary .widget:nth-child(2n+2) {
    display: inline;
    float: right;
  }
}
@media (max-width: 640px) {
  .sidebar-primary .widget {
    width: 44.68085%;
    float: left;
    margin-right: 2.12766%;
  }
  .sidebar-primary .widget:nth-child(2n+2) {
    margin-left: 0;
  }
}
@media (max-width: 480px) {
  .sidebar-primary .widget {
    width: 91.48936%;
    float: left;
    margin-right: 2.12766%;
  }
  .sidebar-primary .widget:nth-child(2n+2) {
    display: inline;
    float: left;
    margin-left: 18px;
  }
}

.site-footer {
  *zoom: 1;
  max-width: 940px;
  _width: 940px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}
.site-footer:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 320px) and (max-width: 1024px) {
  .site-footer {
    margin: 0 18px 18px;
  }
}
.site-footer.four .widget {
  margin-right: 2%;
  width: 23%;
}
@media (max-width: 768px) {
  .site-footer.four .widget {
    width: 48.93617%;
    float: left;
    margin-right: 2.12766%;
  }
  .site-footer.four .widget:nth-child(2n) {
    float: right;
    margin-right: 0;
  }
}
@media (max-width: 480px) {
  .site-footer.four .widget {
    width: 100%;
    float: right;
    margin-right: 0;
  }
}
.site-footer.four .widget:last-child {
  float: right;
  margin-right: 0;
  *margin-left: -20px;
  display: inline;
  margin-left: 2%;
}
@media (max-width: 768px) {
  .site-footer.four .widget:last-child {
    margin-left: 0;
  }
}
.site-footer.three .widget {
  margin-right: 5%;
  width: 30%;
}
@media (max-width: 640px) {
  .site-footer.three .widget {
    width: 100%;
    float: right;
    margin-right: 0;
  }
}
.site-footer.three .widget:last-child {
  float: right;
  margin-right: 0;
  *margin-left: -20px;
  display: inline;
}
.site-footer.two .widget {
  margin-right: 2%;
  width: 48%;
}
@media (max-width: 480px) {
  .site-footer.two .widget {
    width: 100%;
    float: right;
    margin-right: 0;
  }
}
.site-footer.two .widget:last-child {
  float: right;
  margin-right: 0;
  *margin-left: -20px;
  display: inline;
  margin-left: 2%;
}
.site-footer.one .widget {
  width: 100%;
}
.site-footer .footer {
  clear: both;
  padding: 18px 0;
}

/*  RIGHT PRIMARY LAYOUT
 ----------------- */
.right-primary .site-content {
  float: right;
  margin-right: 0;
  *margin-left: -20px;
  display: inline;
}
.right-primary .sidebar-primary {
  width: 31.91489%;
  float: left;
  margin-right: 2.12766%;
  display: inline;
}
@media (max-width: 768px) {
  .right-primary .sidebar-primary {
    width: 100%;
    float: right;
    margin-right: 0;
    margin-top: 12px;
  }
}



2. Font size of Secondary menu
Just revise font-size in following and paste it in Custom CSS of Tiga theme.
It is called as secondary navigation

/* ---------Second menu font size---------- */
.secondary-navigation a {
  color: white;
  display: block;
  font-size: 15px;
  padding: 12px 16px;
  text-transform: uppercase;
  word-wrap: break-word;
}


3. Content font size.
You can change Content font size in entry-summary. For a letter size in widget such as Advanced Featured Page, you can change it in entry-content.widget as follows:

/* ---------Article font size---------- */
article .entry-content,
article .entry-summary {
  font-size: 13px;
  line-height: 1.6em;
}
article .entry-content .widget {
  font-size: 12px;
}

After revising all, save Custom Code.

I leave all record not to forget in future
Thank you.

child theme in wordpress to avoid loosing revision after updating

I used coller wordpress theme but for some error after updating, I changed it to twenty twelve theme for my wordpress site.

Fishfig magento wordpress plugin is basically compatible with twenty twelve and coller, etc. When you use Tiga theme, sidebar will not be shown in your wordpress blog. I solved this problem for Tiga theme and I will explain in the other post.

I leave a following record not to forget what I did in installing Taga theme.

**. Make a child theme.
When you decide your theme, it is better to use chile theme because you will revise a little for your custom revision.
- Let's say that you installed tiga.
- copy them and make a child theme : tiga-child. (If your theme is twenty twelve, twenty twelve-child)

- In child theme directorty, create a file named style.css and add following

/*
 Theme Name:     Tiga Child
 Theme URI:      http://
 Description:    Tiga Child Theme
 Author:         You
 Author URI:     http://
 Template:      Tiga
 Version:        1.0.0
*/
@import url("../tiga/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */

 ** Template
When you create your own template under the directory (page template) of child theme, it will overwrite the same name in your original tiga theme.

** Function.php
After adding some script in functions.php of your child theme, it will not overwrite the original functions.php. It just add that function of child theme to the original theme tiga.

** Including files in your child theme
When you make some file.php in your child theme, you need to include following script [get_stylesheet_directory()] in your style.css of child theme as follows:

 require_once( get_stylesheet_directory() . '/file.php' );

Make sure use the correct patch.

Using the child theme is very useful to avoid loosing revised them after updating your theme.

* give a authorization and activation: You have to set an authorization in your child theme

- chmod -R 755 (or 707) your child theme name
- Then, you will see your theme in dashboard>Appearance>Theme
- Activate your child theme.

Thank you.

Reference: codex.wordpress.org/Child_Themes