Free Blogpedia MultiPurpose Blog WordPress Theme

After 1 month coding . Finally i can release blogpedia, a free wordpress theme for blog. It based on bootstrap 3, owlcarousel , fontawesome. It just wordpres code for my practice coding skill , so the content is simple. I have plan to submit it in wordpress.org after my first theme approved. It has been approved in wordpress.org . You can download blogpedia wordpress theme .
It still have many lack features , like styling color , widget , etc . But i have plan for iteration to make it better.  Blogpedia is my second theme this year. So just wait my another free wordpress theme. If you have any ideas what type theme / plugins which you want , just comment on this post. I have less ideas what type theme / plugins lol.

How To Use Slider in Home :

  1. Just login to your wordpress admin panel
  2. From your WordPress admin panel click Apperance -> Customize 
  3. Click Theme Options -> Magazine Template -> Header Slider -> Enable
  4. Just choose Category and Post Count

How To Use Top Slider in Home :

  1. From your WordPress admin panel click Apperance -> Customize 
  2. Click Theme Options -> Magazine Template -> Top Feature -> Enable
  3. Than choose category and number of post count which you want

If you want to use menu with social icons and top menu , just choose Theme Options -> Layout -> Header Type -> Type 1.

If you want to customize background color than just choose Theme Options -> Layout -> Layout Type -> Boxed

Related Post

15 Comments

    • After you login in your wordpress admin panel . Just Click Apperance -> Customize .
      Thank click Theme Options -> Magazine Template -> Header Slider -> Enable

    • Primary Location for now only support 1 menu. I will add extra menus in the next update . If you want another menu for now just choose Theme Options -> Layout -> Header Type -> Type 1. After choose social menu and top menu. Thanks

  1. What size should the featured image be to work best in blogpedia? Some of my photos are getting really distorted when I put them in as a featured image.

  2. On the magazine template, my featured image photos seem to be distorted based on the size of the open window. Any help on how to remedy that?

    • Because i don’t know the image which you mean. My assumption is Header Slider . Just try this From Customize -> Additional CSS . Put this code :

      .owl-carousel .owl-item img {
      height:auto;
      }
      .bped-main-slider__content {
      padding-top:25%;
      }

      If that not which you mean , perhaps you can edit php file /template-parts/block/main-slider.php

      the_post_thumbnail( 'blogpedia-image-biggest');

      to become

      the_post_thumbnail( 'full');

      Just do trial and error . Both css and php file.
      Just use child theme to make changes https://codex.wordpress.org/Child_Themes

    • Of course here is the way :
      From Appereance -> Additional CSS

      Add This css if you want to change menu color in big screen :

      
      /*
      * BIG SCREEN
      */
      
      /* Menu */
      #primarymenu > li.current-menu-item > a, 
      #primarymenu > li.current_page_item > a, 
      #primarymenu > li.current-menu-ancestor > a, 
      #primarymenu > li.current_page_ancestor > a {
      	color: #ff0000;
      }
      #primarymenu > li > a {
      	color: #00ff00;
      }
      #primarymenu > li:hover > a {
      	color: #0000ff;
      }
      
      
      /* Sub Menu */
      #primarymenu ul {
      	background-color: #f0ff0f;
      }
      #primarymenu ul a {
      	color:#ff0000;
      }
      #primarymenu ul a:hover {
        color: #00ff00; }
      #primarymenu ul li.current-menu-item > a, #primarymenu ul li.current_page_item > a {
      	color: #cc00cc;
      }
      

      Add This css if you want to change menu color in small screen :

      
      /*
      * SMALL SCREEN
      */
      
      /* Icon */
      #bped-primarymenu-responsive-icon {
      	color: #00f0ff;
      }
      #bped-primarymenu-responsive-icon :hover {
      	color: #ff0000;
       }
       
      /* Menu */
      .primarymenu-responsive-container {
      	background-color:#ff0000;
      }
      #primarymenu-responsive li a {
      	color: #00ff00;
      }
      #primarymenu-responsive li a:hover {
      	color: #0000ff;
      }
      #primarymenu-responsive li span.sub-toggle {
      	background-color: #00fcff;
      	color: #000ff0;
      }
      #primarymenu-responsive li span.sub-toggle:hover {
      	background-color: #fc0cff;
      	color: #0ffff0;
      }
      
        • Actually you need to modify #00FF00 with #000000 (#XXXXXX is color symbol where X = 0..F)
          You can see color symbol here : https://www.webfx.com/web-design/color-picker/
          Just modify color: #XXXXXX; code from above comment
          Here is perhaps which you want

          
          /*
          * BIG SCREEN
          */
          
          /* Menu */
          #primarymenu > li.current-menu-item > a, 
          #primarymenu > li.current_page_item > a, 
          #primarymenu > li.current-menu-ancestor > a, 
          #primarymenu > li.current_page_ancestor > a {
          	color: #000000;
          }
          #primarymenu > li > a {
          	color: #424242;
          }
          #primarymenu > li:hover > a {
          	color: #000000;
          }
          

Leave a Reply

Your email address will not be published.


*