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

15 thoughts on “Free Blogpedia MultiPurpose Blog WordPress Theme

  1. Hi I love your theme but can’t figure out how to show the carousel for blog post that you have in the theme preview?

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

    1. 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

  2. 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.

    1. It depends where you want to use it ..
      720×400 is the default one .
      But if you want to use 810×550 it’s ok too.
      Featured Image in
      1. slider : 810×550
      2. index and blog : 720×400
      3. top feature : 270×160

      1. Thank you. The area I’m specifically curious about is in the blog post writing area. To the right where you can add a “featured image”. Just want to verify what size that image should be.

  3. 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?

    1. 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

    1. 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;
      }
      
      1. I tried to insert this and it turned my text green. i am not very good with code. Please help me. i would just like to have the text black instead of gray.

        1. 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. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.