Browsing Category

Free Code

Free Code, ওয়েব ডিজাইন,

Codepen why shoud use who should – Fandu Design

CodePen is a social development environment for front-end designers and developers.

Welcome all of my web design learner in this new tutorial of 2018. I am going to share with you a online tools. That I love very much. It’s codepen. It’s the best place to build and deploy a website, show off your work, build test cases, and find inspiration. So if are think to start your career as Web Designer especially front end web design then you should use codepen.

In the website they say that 👋 CodePen is a social development environment.You may already a little bit think We say social ? Here the answer : because CodePen is a community. Most Web Designer  and Coder on CodePen are public and open source. They are living things that other people and the community can interact with, from a simple hearting, to leaving a comment, to forking and changing for their own needs.

Using codepen you can write code in the browser, and see the live results of it as you build. Codepen is a useful and liberating tool for developers of any skill, and particularly empowering for people learning to code. It’s focused on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things. So I you are new learner of Front End Web Designthen Code Pan is best for you to share your skills with others. Also Here you get job section where you find job related your skills.

You no need to thinks or worry about much to buy domain and hosting as here you get a ready place to share your work with your clients. Surly cover letter with portfolios link get higher response then a cover letter without portfolio links. So let start your front end design career with CODEPEN.

 Thank you for read. Stay with fandu design. 🙂 Dont’s forget to share with your friends

Free Code, How to Create, WordPress,

How To Create Custom Post Meta Boxes Using Option-Tree

Today, I am going to share my first post about wordpress custom field and  “How To Create Custom Post Meta Boxes Using Option-Tree” You know Meta boxes have a variety of uses.  For example it improve On Page SEO of Website on your post page. We can create a meta boxes to include the meta description and meta keywords.

Example : If you sell products, you can create meta boxes to include price, product images, ratings and additional parameters. If you add dynamic Testimonial with custom post, You can create meta boxed to include clients name, company name, position, social account links, clients comments etc.

Option tree framework is avery a powerful plugin like other top theme option plugin which very helpful to wordpress theme’s developers. With a small of coding we have created variety of panels and meta boxes that responsive.

Here’s how to create a custom meta boxes using option-tree framework

1. Make sure you already have the option-tree framework plugin
2. Also the following script on the functions.php file in your theme

3. Create new php file as metaboxes.php and save on option-tree folder( your theme folder -> option-tree ) and copy this following code

Save, then go to your new post page ( Posts -> Add New ), You will see the results of the meta boxes that have been made like the following picture

How To Create Custom Post Meta Boxes Using Option-Tree

An outline, the code in the theme options and meta boxes are the same, the difference in meta boxes we don’t need to create a section to add a new tab.

The use of meta boxes on the theme’s building is using the following syntax

$demo_meta_box = get_post_meta( post_id_wordpress, meta_box_id, true );

or

$demo_meta_box = get_post_meta( $post->ID, 'demo_meta_box', true );

For detail tutorial, you can learn more from meta boxes demo example on (option-tree -> assets -> theme-mode)

If you need more help don’t delay to ask me. I am here ready to give easy guideline. Just comment or send message me. I will beck you asap. Message Now .

Interested to know more about me also Fandu Design, Visit this page : Visit Now

Thank you for read.

Don’t forget to bookmark and share this code with others new learner like you.

Free Code, Google Products, How to Fix, WordPress,

How to fix Google Map works on local host but doesn’t work on web server

Hey, It’s 11:45 pm in right now. ( Bangladesh ) I just uploaded newly developed theme in my clients live server. It’s Mountain Marketing. Everything working fine and look good but when I check contact page I see that the google map not working. It looks like below image

Google Map works on local host but doesn't work on web server

Then I back to my local server/localhost I see it work very good in the local server but same code does not work in client-server. So I have done some research find the issue and fixed. Then I think that I should write this process and share with you or other who is a WordPress Developer like you.

To add responsive google map without plugin I used gmaps It allows the user to use the potential of Google Maps in a simple way. It’s so simple and easy with a few lines of code.




I followed their quickstart guide :

Quick Start

It’s work in localhost but not live server. To fix it you have to do just simple things.

As of June 22, 2016 Google Maps V3 no longer supports keyless access so you need to get a key for every (referrer-)domain which has never had a Google Map on it before.

Get your key here: https://developers.google.com/maps/documentation/javascript/get-api-key

And add this code in header

instead of

You just need to use YOUR API KEY

How to find google map api ?

Follow these steps to get an API key:

  1. Go to the Google API Console.
  2. Create or select a project.
  3. Click Continue to enable the API and any related services.
  4. On the Credentials page, get an API key.
    Note: If you have an existing unrestricted API key, or a key with browser restrictions, you may use that key.
  5. From the dialog displaying the API key, select Restrict key to set a browser restriction on the API key.

If you need more help don’t delay to ask me. I am here ready to give easy guideline. Just comment or send message me. I will beck you asap. Message Now .

Interested to know more about me also Fandu Design, Visit this page : Visit Now

Thank you for reading.

Don’t forget to bookmark and share this code with others new learner like you.




Free Code, WordPress,

Automatically add Lorem Ipsum text to blank WordPress pages

Hello, Today, I’m going to share a useful tips for wordpress theme developer like me. You know when you start build a theme or a new website for our client. We have to create many page as clients requirements. Like Home, About, Services, Portfolio, Contact etc. Also We have to create many post or custom post like blog post, portfolio,

But most of time in the website building time clients take time to provide original content so this time we have to use demo content like Lorem Ipsum.  Each time we have to copy and paste content. It’s really kills our developing time.

So you the easy tips with free code for you : “Automatically add Lorem Ipsum text to blank WordPress pagesLorem Ipsum”

The snippet below adds a few paragraphs of lorem ipsum text to any blank post or page by filtering the_content. The text is retrieved from the www.lipsum.com site, and is cached, site-wide, for one hour using the set_transient and get_transient functions.

If you need more help don’t delay to ask me. I am here ready to give easy guideline. Just comment or send message me. I will beck you asap. Message Now .

Interested to know more about me also Fandu Design, Visit this page : Visit Now

Thank you for read.

Don’t forget to bookmark and share this code with others new learner like you.

 

Here another very common issue fix tips for you. You may like this post also. This : http://fandudesign.com/woocommerce-product-images-looks-blurry-fix/

Free Code, How to Create, WordPress, ওয়েব ডিজাইন,

How to make dynamic mixitup with custom post in wordpress

Hello, Today I am going to share with you very helpful tutorial for WordPress Developer.  “How to make dynamic mixitup with custom post in wordpress

Why MixItUp?

MixItUp plays nice with your existing HTML and CSS, making it a great choice for responsive layouts.

MixItUp works with your layout. Want to use percentages, media queries, inline-block, CSS3 columns or even flex box? No problem.

Features

  • Filter and sort elements with CSS3-optimised animations
  • Build on top of your existing percentage-based responsive layouts and media queries
  • Control filtering and sorting via a simple clickable interface or build more complex custom UI via an extensive API
  • Customise your animations with CSS3 transforms and easing
  • Add and remove elements in real time via an Ajax-friendly API
  • Perform simultaneous filter, sort, and layout change operations

Step# 01: Register Custom Post

Step # 02: Register Custom Taxonomy For Portfolio

Step # 03: Register Shortcode

 

Free Code, How to, How to Create, WordPress,

Create Ajax WordPress login modal and change defaults logo

Hey WordPress Learner! In this tutorial, I am going to share with you about login from the style. Make it like so that really make our website trusted and make banded. Today we learn tow tips:-

How to Change the Login Logo on WordPress

Ajax WordPress login modal in WordPress

So, Let’s start. As we do this very quickly. Just copy below code and paste into your theme functions.php file

 

Save below code as ajax-login-script.js and use location correctly with ajax_login_init function.

Usage :

 

How to Change the Login Logo on WordPress?
First, you need to open your theme’s functions.php file and then paste the following code:

Use transparent logo file in your theme’s images folder either. It should be named login_logo.png or anything else if you decide to change the image path.

Bonus: Want to limit login to protect your website from the hacker ? Use this free plugin WP Limit Login Attempts

If you need more help don’t delay to ask me. I am here ready to give an easy guideline. Just comment or send message me. I will back you asap. Message Now.

Interested to know more about me also Fandu Design, Visit this page: Visit Now

Thank you for reading.

Don’t forget to bookmark and share this code with others new learner like you.

Free Code, How to, WordPress,

How to E-Mailing the Commenter After Their Comment Is Approved

E-Mailing the Commenter After Their Comment Is Approved

 

If you need more help don’t delay to ask me. I am here ready to give easy guideline. Just comment or send message me. I will beck you asap. Message Now .

Interested to know more about me also Fandu Design, Visit this page : Visit Now

Thank you for read.

Don’t forget to bookmark and share this code with others new learner like you.

Free Code, How to, How to Fix, WordPress,

How to Remove p tags from shortcode wordpress

Shortcodes are built-in functionality for WordPress. You can do a lot’s of functional work or code using shortcodes. But if you already used shortcode you must see that before and after of your used shortcode there is a p tag generate automatically. For that your design or theme layout broken. You will see your design different then you’re desired or code command because there added a p tag. SO in this tutorial, I am going to share with you. “How to Remove p tags from shortcode WordPress?

So let’s start.

Login your cPnale. Open-File Manager then goes to wp-content. Open themes folder. Now open your currently active theme. Open functions.php file. Now copy below code and paste into your theme functions.php file. Save it.

Remove p tags from shortcode WordPress

Remember it’s. By default, WordPress provides 6 shortcodes out of the box that you can use.

 

If you need more help don’t delay to ask me. I am here ready to give an easy guideline. Just comment or send message me. I will back you asap. Message Now.

Interested to know more about me also Fandu Design, Visit this page: Visit Now

Thank you for reading.

Don’t forget to bookmark and share this code with others new learner like you.

Free Code, How to, WordPress,

How to Create custom wp registration form without plugin

Create custom wp registration form

 

Uses:
Just add the [jeba_registration_form] shortcode.
Note: Take the css in your theme css folder https://github.com/designmodo/Flat-UI/blob/master/dist/css/flat-ui.css

If you need more help don’t delay to ask me. I am here ready to give easy guideline. Just comment or send message me. I will beck you asap. Message Now .

Interested to know more about me also Fandu Design, Visit this page : Visit Now

Thank you for read.

Don’t forget to bookmark and share this code with others new learner like you.

Free Code, How to, WordPress,

How to Insert ads after second paragraph of single post content

Hello, Dear WordPress developer. How are you today? I am going to share how to ” Insert ads after the second paragraph of single post content”   Before do this I want to share something about “Why anyone wants to insert add after the second paragraph of single post content?” Well, everyone knows like you that add related marketing and products. If you can display your product in more places surely you get more visitor of your target customer. That why we need to places our add in most readable places of website or post.

We know when people become more interested to read about any topic or content then he clicks on the headline and goes to the details page that called the single page in WordPress. So no need to say in the single page or details page is the best place to display your product add here.  Let’s do it now

Insert ads after second paragraph of single post content

 

If you need more help don’t delay to ask me. I am here ready to give easy guideline. Just comment or send message me. I will beck you asap. Message Now .

Interested to know more about me also Fandu Design, Visit this page : Visit Now

Thank you for read.

Don’t forget to bookmark and share this code with others new learner like you.