gyaniansinfo@gmail.com
Follow on

WordPress Theme Development with Bootstrap in Hindi (Part 4)

WordPress Theme Development with Bootstrap in HindiHello Gyanians, ये WordPress Theme Development with Bootstrap in Hindi की series का part 4 है जिसमे हम अपनी सबसे पहले अपनी header.file में सबसे ऊपर के topbar create करेंगे जिसपर अपनी email id और अपने social media follow icons को add करेंगे.

इसके बाद हम अपनी footer.php file में footer bar create करेंगे जिसपर हम dynamic copyright text with year और कुछ important pages जैसे की homepage, about us, privacy policy इत्यादि pages को उसपर add करेंगे.

header.php और footer.php file में theme sections create करने के बाद हम style.css file से उन section को responsive way में style (design) देंगे और फिर last में हम अपनी theme का first preview देखेंगे.

Suggestion: अगर आपने WordPress theme development with bootstrap in Hindi series के part 1, 2 और 3 को अच्छे read नही किया है और उनमे दिए गये सभी practical task को successfully complete नही किया है तो पहले आप उन्हें जरुर complete करें.

अगर आप बिना part 1,2 और 3 को read किये और उनमें दिए गये task को पूरा किये WordPress theme development के part 4 को read करोगे तो आपको कुछ समझ नही आएगा इसलिए नीचें गये link पर click करके इससे पहले के सभी parts को one by one read करें और फिर इस part को continue करें.

 

 

WordPress Theme में Topbar (Email, Follow Icons) कैसे Add करें?

जैसे आप gyanians के topbar में देख सकते हैं की आपको left side email id (not show on mobile) और right side social media follow icons show हो रहें और इन दोनों के साथ मैं font awesome icons का use किया है अगर आप font awesome icons के बारे में अधिक जानकारी चाहते है तो दिए गये link पर click करके मेरी post को जरुर पढ़ें.

Topbar create करने के लिए आप theme की header.php file को open करिए और उस file में logobar div से just ऊपर और holder div के बाद 2 responsive column create करिए और first column में अपनी email id लिख दीजिये और second column में social media के pages के link को add कर दीजिये.

मैंने नीचें उन दोनों column का code snippets दिया है आप इस code को copy-paste कर लीजिये और अपनी requirement के हिसाब से change कर लीजिये. इस post के last में हम icons को style.css file css code करके design देंगे.

 

WordPress Theme में Footer (Copyright Text, Pages) कैसे Add करें?

WordPress theme development with bootstrap in Hindi series के part 2 में जिस तरह हमने top menu create किया था और फिर उसमे categories को add करके अपनी theme का navbar बनाया ठीख ऐसे ही हम footer area में pages को add करेंगे.

इसलिए सबसे पहले आप अपने WordPress dashboard में कुछ important pages (about us, privacy policy, terms of use etc) को create कर लीजिये और फिर Appearance >> Menus में जाकर एक new menu create कर लीजिये.

create new menu in wordpress

इसके बाद जो आपने pages create किये थे उन्हें new created menu में add करके secondary location पर add करके save menu button पर click कर दीजिये. अब हमे इस menu को अपने footer area में add करना है और इसके लिए हम wp_nav_menu() function का use करेंगे.

add item in menu bar

Footer area create करने के लिए आप theme की footer.php file को open करिए और उस file में सबसे ऊपर और 2 responsive column create करिए और फिर first column में wp_nav_menu() function की help से secondary menu को यहाँ add कर लीजिये.

इसके बाद next column में dynamic copyright text with year और blog name को add कर लीजिये. Copyright text में year हर साल अपने आप change हो जाये इसके लिए मैंने PHP date() function का उस किया है.

मैंने नीचें उन दोनों column का code snippets दिया है आप इस code को copy-paste कर लीजिये और अपनी requirement के हिसाब से change कर लीजिये. इस post के last में हम footer area को style.css file css code करके design देंगे.

 

Style Touch and Preview – WordPress Theme Development in Hindi

जब भी आप कोई WordPress theme develope करते हो तो उसके backend part की तरह ही उसका frontend appearance (look) बहुत अच्छा होना जरुरी है और इसके लिए हमे CSS की अच्छी knowledge होने जरुरी है.

WordPress theme development की इस series में अभी तक हमने अपने theme का header और footer area code कर लिया है और अब आप इसे अपनी CSS की help से अपनी पसंद के अनुसार design कर सकते हो और अगर आपको gyanians की design पसंद है तो नीचें गये code को अपनी theme की style.css file में copy-paste कर दीजिये.

Style.css file में code paste करने के बाद अपने browser में आप localhost URL (my URL locahost/gyanians-demo) से अपनी theme का अभी तक का design preview देख सकते हैं और मैंने अपने preview का screenshot नीचें दिया है.

WordPress Theme Development with Bootstrap Part 4 preview

Look all Changed in Header File: WordPress Theme Development in Hindi

 

Look all Changed in Footer File: WordPress Theme Development in Hindi

 

Conclusion: WordPress Theme Development with Bootstrap in Hindi

WordPress theme development की series में हमने अभी तक  WordPress theme की template files के बारे में जाना और फिर localhost enviroment करके उसपर WordPress को install करना सीखा.

इसके बाद हमने अपनी theme का header area (topbar, logo, navbar) create किया और फिर footer area create किया और CSS की help से अपनी theme की design set की और अब इस series के next part में हम homepage पर latest posts और pagination को show करना सीखेंगे.

 

 

Hello Gyanians, आशा करता हूँ की आपको ये WordPress Theme Development with Bootstrap in Hindi (Part 4) post पसंद आई होगी. अगर आपको इस post से related कोई सवाल या सुझाव है तो नीचे comment करें और इस post को अपने दोस्तों के साथ जरुर share करें.

gyanians_author

About the Author

Hello gyanians, मेरा नाम Neeraj Parmar (Neel) है और में India की Taj City (Agra) में रहता हूँ. मैंने computer science से engineering की है. By Profession मैं computer science teacher और web developer हूँ और इसके साथ-साथ ही मैं part time blogging भी करता हूँ.

Read More >>

17 Comments

17 responses to “WordPress Theme Development with Bootstrap in Hindi (Part 4)”

  1. Thakur says:

    nice article sir….. theme development ki is post ke liye maine bahut wait kiya hai sir next iski next post aap kb tak publish karenege please tell me I am waithing for the other posts of theme develpment…..

  2. WordPress theme devlopment kaise karte yah bata kar aap kafi logo ki help kar rahe hai. Good keep it up bro..

  3. asfak says:

    Nice information

  4. Thanks for share your valuable article

  5. Umesh Ninawe says:

    Boht hi badhiya jankari bhai thanks for sharing

  6. Rajbeer says:

    Nice Work Sir, but my template header image not fix in browser size, header image size saw very small size . please tell how to change size

  7. Raj Awana says:

    sir how to live my wordpress site and how to add custom domain in wordpress in xampp server

    • XAMP localhost ke liye hai isliye isme custom domain add nhi hoga uske liye aapko ek hosting buy karni hogi jispar wordpress install karna hoga aur fir apni theme ko uspar upload karna hoga.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get In Touch
gyaniansinfo@gmail.com
Copyright 2017 By Gyanians (All Right Reserved) | Design & Developed By WebAtoZ.in