Generatepress Homepage Category move on Featured image ( avobe post tittle )

आज के इस पोस्ट मे हम बता रहे है Generatepress Homepage पर दिखने वाले Category को Featured image पर Move कैसे करें क्योंकि जैसा की आपको मालूम है की generatepress popular theme है तो जाहिर – सी बात है इसे जैसे चाहे वैसे कस्टमाईज़ कर सकते है

और Customision का एक हिस्सा केटेगरी को फीचर्ड इमेज के ऊपर move करना भी है वैसे तो अधिकतर वर्डप्रेस थीम मे ये फीचर बाई डिफाल्ट होता है लेकिन generateprese theme मे नहीं है हालांकि ऐसा भी नहीं है की ये फीचर्स ऐड नहीं किया जा सकता,

Read also; wordpress me theme edit किए बिना कोड कैसे करें

ऐड किया जा सकता है लेकिन इसके लिए कोडिंग की नॉलेज होना चाहिए वैसे घबराने की बात नहीं Generatepress popular theme है तो इसके लिए बहुत से Proffessional Devloper ने कोड बना रखा है आपको बस उसे अपने साइट मे ऐड करना है

generatepress Homepage Categroy move on Featured image

चलिए जानते है की कैसे Generatepress Homepage Category को Featured image पर move करते है

Step.1 Add Php code

1.नीचे दिए गए Php code कॉपी करें

// Open Post Image Wrap to contain image and category links
add_action( 'generate_before_content','db_open_image_wrap',1);
function db_open_image_wrap() {
	if ( is_home() || is_archive() ) {
	echo '<div class="post-image-wrap">';
	}
}

// Remove categories from default position
add_filter( 'generate_category_list_output','tu_remove_categories' );
function tu_remove_categories( $categories ) {
	if ( is_home() || is_archive() ) {
		return '';
	}
	
	return $categories;
}

// Add category link within Post Image Wrap
add_action( 'generate_before_content','tu_cats_above_title', 15 );
function tu_cats_above_title() {
	if ( is_home() || is_archive() ) {
		$categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );
		if ( $categories_list ) {
			printf( '<span class="entry-meta cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span></div>',
				_x( 'Categories', 'Used before category names.', 'generatepress' ),
				$categories_list
			);
		}
	}
}

2. इसे थीम मे ऐड करना है कोड ऐड करने के लिए WordPress dashboard मे जाए Appearance > theme editor पर क्लिक करें Function.php file open करे और सबसे लास्ट मे कोड peste कर के File Save/Update कर दे

आप चाहे तो इस php code को Code snippets Plugin के जरिए भी ऐड कर सकते है

Step. 2 Style Category Using css

अभी आपने php code साइट मे ऐड कर लिया है category box अच्छा दिखे इसके लिए css ऐड करना है

1.नीचे दिए गए css code कॉपी करें

.post-image-above-header .inside-article .post-image {
    margin-bottom: 1.5em !important;
	
}

.post-image-wrap {
    position: relative;
}

.post-image-wrap .entry-meta {
    position: absolute;
    bottom: 15px;
    left: 20px;
	margin-bottom: 1em !important;
    font-size: 12px;
    padding: 4px 8px;
    background-color: #fff;
    border-radius: 20px;
}

.post-image-wrap .entry-meta:before {
    display: none;
}

2. appearance > customise > additional css box पर क्लिक करें additional css box मे css कोड को peste कर के publish पर क्लिक करें

Note ; यदि आपको css की जानकारी है तो css मे height, width, background color change कर सकते है यदि नहीं है तो कोड एडिट ना करें

Conclusion ;

इस tutorial मे हमने जाना generatepress homepage category box को Featured image पर move कैसे करें और मुझे उम्मीद है की ये tutorial आपके लिए वर्किंग रहा

ऐसे ही latest generateprese theme tutorial पाने के लिए हमारे ब्लॉग की सदस्यता जरूर ले क्योंकि हम रोज ऐसे tutorial इस ब्लॉग पर डालते है यदि वाकई मे आपके लिए ये पोस्ट helpful रहा तो अपना कीमती फीडबैक जरूर दे,

आपको लगे की ये tutorial किसी और के भी काम आ सकती है तो उनके साथ इस पोस्ट को शेयर जरूर करें