shaibustephen

> Previous Next

what do you mean by upper/lower case? Help me as i am new in wordpress development

I later observed when i typed ”localhost” on the browser, i get the below error message
Unable to connect

An error occurred during a connection to localhost.

The site could be temporarily unavailable or too busy. Try again in a few moments.
If you are unable to load any pages, check your computer’s network connection.
If your computer or network is protected by a firewall or proxy, make sure that Firefox is permitted to access the Web.

I don’t know where to put this code `$category = get_the_category_by_ID($cat_id);
echo $category`
Please, pardon me for unending questions. I am just a newbie as far as wordpress theme development is concerned. I am just cracking my brain to get something done. I have successfully worked on my code and it gives one category title. The category title of the post is not appropriate. I beg someone out there to help look into my code below and help me correct where necessary. I am just tired over this issue.
I want it to display appropriate category title above the post as you can see about. The category title is outside the loop and not within. It is equally not in category page rather at the front page.

<?php

	
			$args = array(
			'post_type' => 'product',
			'posts_per_page' => 6,
				
			'tax_query' => array(
				array(
					'taxonomy' => 'product_cat',
					'field' => 'slug',
					'terms' => 'building',
					
				)

    )
);
								 

$q    = new WP_Query( $args );
$leadingcount = 3; 

	
	
		$cats = get_terms( array( 'taxonomy' => 'product_cat' ) );

	
				// loop through the categries
				foreach ($cats as $cat) {
					// setup the cateogory ID
					$cat_id= $cat->term_id;
					// Make a header for the cateogry
					echo "<h6 class='mt-5 text-center'>".$cat->name."</h6>"; ?>
			
	
		<?php if (have_posts()) : while ( $q->have_posts() ) : $q->the_post(); ?>
		<article class="item col-lg-<?php echo $leadingcount; ?>">
			<div class="card rounded-0">
				<div class="card-body">
					<a href="<?php the_permalink(); ?>">
						<h5><?php the_title(); ?></h5>
					</a> 
					<?php the_excerpt(); ?>
					<?php the_category(); ?>
				</div>
			</div>
		</article>
			<?php endwhile; endif; // done our wordpress loop. Will start again for each category ?>
				<?php } // done the foreach statement ?>
</div><!--row-->
			</div><!-- #content -->
		</div><!-- #container -->

The theme mobile menu does not toggle navigation bar or toggle the dropdown too

I mean the jquery i posted it’s code

Below is the error message

This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. soyiza.com
GEThttps://localhost/soyiza.com/wp-content/themes/ebson-store/assets/css/slick.css?ver=5.8.2
[HTTP/1.1 404 Not Found 1135ms]

GEThttps://localhost/soyiza.com/assets/js/jquery.slicknav.min.js?ver=5.8.2
[HTTP/1.1 404 Not Found 1044ms]

JQMIGRATE: Migrate is installed, version 3.3.2 jquery-migrate.min.js:2:709
Uncaught TypeError: $(...).slicknav is not a function
    <anonymous> https://localhost/soyiza.com/wp-content/themes/ebson-store/assets/js/main.js?ver=5.8.2:6
    <anonymous> https://localhost/soyiza.com/wp-content/themes/ebson-store/assets/js/main.js?ver=5.8.2:39
main.js:6:22
GEThttps://localhost/soyiza.com/assets/js/jquery.slicknav.min.js?ver=5.8.2
[HTTP/1.1 404 Not Found 1483ms]

Loading failed for the <script> with source “https://localhost/soyiza.com/assets/js/jquery.slicknav.min.js?ver=5.8.2”. soyiza.com:458:1
jQuery.Deferred exception: jQuery(...).slicknav is not a function @https://localhost/soyiza.com/:404:36
e@https://localhost/soyiza.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0:2:30038
Deferred/then/l/</t<@https://localhost/soyiza.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0:2:30340
setTimeout handler*Deferred/then/l/<@https://localhost/soyiza.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0:2:30549
c@https://localhost/soyiza.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0:2:28327
fireWith@https://localhost/soyiza.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0:2:29072
fire@https://localhost/soyiza.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0:2:29108
c@https://localhost/soyiza.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0:2:28327
fireWith@https://localhost/soyiza.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0:2:29072
ready@https://localhost/soyiza.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0:2:32045
B@https://localhost/soyiza.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0:2:31824
EventListener.handleEvent*@https://localhost/soyiza.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0:2:32193
@https://localhost/soyiza.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0:2:220
@https://localhost/soyiza.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0:2:225
 undefined jquery.min.js:2:31593
Uncaught TypeError: jQuery(...).slicknav is not a function
    <anonymous> https://localhost/soyiza.com/:404
    jQuery 13
soyiza.com:404:36
Source map error: Error: request failed with status 404
Resource URL: https://localhost/soyiza.com/wp-content/themes/ebson-store/assets/css/bootstrap.min.css?ver=5.8.2
Source Map URL: bootstrap.min.css.map

Also, this is what i am having at main.js

;(function( $ ){

  /**
   * Slicknav - a Mobile Menu
   */
  $('#primary-menu').slicknav({
      duration: 500,
      closedSymbol: '<i class="fa fa-plus"></i>',
      openedSymbol: '<i class="fa fa-minus"></i>',
      label:"", 
      closeOnClick: true, // Close menu when a link is clicked.
  });

$(document).ready(function(){
	$('#menu').slicknav();
});
	
	
	//Scroll to top 
$(window).scroll(function() {
    var height = $(window).scrollTop();
    if (height > 100) {
        $('#back2Top').fadeIn();
    } else {
        $('#back2Top').fadeOut();
    }
});
$(document).ready(function() {
    $("#back2Top").click(function(event) {
        event.preventDefault();
        $("html, body").animate({ scrollTop: 0 }, "slow");
        return false;
    });

});

	

})( jQuery );

I added this to my css yet, the issue not resolved rather it hiddens the horizontal menu and nothing shown at all.

.slicknav_menu {
	display:none;
}
@media(max-width:1225px) {
	.menu-bar-wrap {
		display:none;
	}
	.slicknav_menu {
		display:block;
	}
}

My complete code below

.navigation ul.menu:after {
clear: both;
}

.navigation ul.menu > li {
float: left;
background: #e9e9e9;
padding: 0;
margin: 0;
}

.navigation ul.menu > li a {
text-decoration: none;
padding: 1.5em 3em;
display: block;
}

.navigation ul.menu > li:hover {
background: #f0f0f0;
}

.navigation ul.menu li:hover > ul {
display: block;
}

.navigation ul.menu > li > ul {
display: none;
width: 100%;
background: #f0f0f0;
padding: 20px;
position: absolute;
z-index: 99;
left: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}

.navigation ul.menu > li > ul:before,
.navigation ul.menu > li > ul:after {
content: “”;
display: table;
}

.navigation ul.menu > li > ul:after {
clear: both;
}

.navigation ul.menu > li > ul > li {
margin: 0;
padding-bottom: 0;
list-style: none;
width: 25%;
background: none;
float: left;
}

.navigation ul.menu > li > ul > li a {
color: #777;
padding: .2em 0;
width: 95%;
display: block;
border-bottom: 1px solid #ccc;
}

.navigation ul.menu > li > ul > li > ul {
display: block;
padding: 0;
margin: 10px 0 0;
list-style: none;
box-sizing: border-box;
}

.navigation ul.menu > li > ul > li > ul:before,
.navigation ul.menu > li > ul > li > ul:after {
content: “”;
display: table;
}

.navigation ul.menu > li > ul > li > ul:after {
clear: both;
}

.navigation ul.menu > li > ul > li > ul > li {
float: left;
width: 100%;
padding: 10px 0;
margin: 0;
font-size: .8em;
}

.navigation ul.menu > li > ul > li > ul > li a {
border: 0;
}

.navigation ul.menu > li > ul.normal-sub {
width: 300px;
left: auto;
padding: 10px 20px;
}

.navigation ul.menu > li > ul.normal-sub > li {
width: 100%;
}

.navigation ul.menu > li > ul.normal-sub > li a {
border: 0;
padding: 1em 0;
}

.slicknav_menu {
display:none;
}
@media(max-width:1225px) {
.menu-bar-wrap {
display:none;
}
.slicknav_menu {
display:block;
}
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style’s
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: 959px) {
.menu-container {
width: 100%;
}

]
.menu-dropdown-icon:before {
display: block;
}
.navigation ul.menu {
display: none;
}
.navigation ul.menu > li {
width: 100%;
float: none;
display: block;
}
.navigation ul.menu > li a {
padding: 1.5em;
width: 100%;
display: block;
}
.navigation ul.menu > li > ul {
position: relative;
}
.navigation ul.menu > li > ul.normal-sub {
width: 100%;
}
.navigation ul.menu > li > ul > li {
float: none;
width: 100%;
margin-top: 20px;
}
.navigation ul.menu > li > ul > li:first-child {
margin: 0;
}
.navigation ul.menu > li > ul > li > ul {
position: relative;
}
.navigation ul.menu > li > ul > li > ul > li {
float: none;
}
.menu .show-on-mobile {
display: block;
}
}

• This reply was modified 2 years, 10 months ago by shaibustephen.

This is my menu.js

/*global $ */
$(document).ready(function () {

    "use strict";

    $('ul.menu > li:has( > ul)').addClass('menu-dropdown-icon');
    //Checks if li has sub (ul) and adds class for toggle icon - just an UI

    $('ul.menu > li > ul:not(:has(ul))').addClass('normal-sub');
    //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)

    $("ul.menu").before("<a href=\"#\" class=\"menu-mobile\">Navigation</a>");

    //Adds menu-mobile class (for mobile toggle menu) before the normal menu
    //Mobile menu is hidden if width is more then 959px, but normal menu is displayed
    //Normal menu is hidden if width is below 959px, and jquery adds mobile menu
    //Done this way so it can be used with wordpress without any trouble

    $("ul.menu > li").hover(
        function (e) {
            if ($(window).width() > 943) {
                $(this).children("ul").fadeIn(150);
                e.preventDefault();
            }
        }, function (e) {
            if ($(window).width() > 943) {
                $(this).children("ul").fadeOut(150);
                e.preventDefault();
            }
        }
    );
    //If width is more than 943px dropdowns are displayed on hover

    //the following hides the menu when a click is registered outside
    $(document).on('click', function(e){
        if($(e.target).parents('.menu').length === 0)
            $("ul.menu").removeClass('show-on-mobile');
    });

    $("ul.menu > li").click(function() {
        //no more overlapping menus
        //hides other children menus when a list item with children menus is clicked
        var thisMenu = $(this).children("ul");
        var prevState = thisMenu.css('display');
        $("ul.menu > li > ul").fadeOut();
        if ($(window).width() < 943) {
            if(prevState !== 'block')
                thisMenu.fadeIn(150);
        }
    });
    //If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)

    $(".menu-mobile").click(function (e) {
        $("ul.menu").toggleClass('show-on-mobile');
        e.preventDefault();
    });
    //when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)

});

When i remove <script src="/assets/js/vendor/jquery-1.12.0.min.js"><\/script>, the menu icon goes off

Thanks for your response. My concern is not on the the_archive_title() rather the category name.
I have list of categories such as politics, economy, business, editorial etc. I have a loop that display each of this category item in the front page of my site. I created a customizer to select it and indeed work fine. I have query that output this and also work fine. When i select or choose politics category, it displays it and so also others. I have <h6> Politics</h6> before the query posts from the selected category. What i want is how to go about it so that when i choose politics, it will display politics as heading before the query post just like as above <h6>”.$cat->name.”</h6>. What better way should i get it done?

no need for solutions. finally got it right

The below code is what i have done. I added class. If we have to go by that method, how do i add ID to it just like (‘classname’ => ‘footer-filter’,) as below or is it proper to have ‘id’ => ‘footer-filter’, or how should it comes?

Morealso, I enqueue stylesheet to this particular plugin and the changes done to this specific widget and reflect in all the dashboard widgets. What can i done in ensuring that the css changes done for one particular widgets at the dashboard only the concerned widget?
.menu-item-handle, .widget .widget-top {
background: #E7DDAC;
color: #1d2327;
}

public function __construct() {
		$widget_ops = array(
			'classname'                   => 'footer-filter',
			'description'                 => __( 'Displays posts from selected category at the footer section' ),
			'customize_selective_refresh' => true,
			'show_instance_in_rest'       => true,
		);
		parent::__construct( 'footer-filter', __( 'Footer Filter' ), $widget_ops );
		$this->alt_option_name = 'footer_filter';
		
	add_action( 'wp_enqueue_scripts', array($this,  'enqueue_scripts'));
		add_action( 'init', array( $this, 'admin_enqueue_scripts' ) );
	add_action( 'admin_enqueue_scripts', array($this,  'admin_enqueue_scripts'));
	}

• This reply was modified 3 years, 3 months ago by shaibustephen.
• This reply was modified 3 years, 3 months ago by shaibustephen.
• This reply was modified 3 years, 3 months ago by shaibustephen.

THis is the link to my widget code
https://pastebin.com/ZAkjRsXn

Thanks. Does it go this way below to change widget top background color or text title color or how should it be done? My target is to change the widget-top background color specific to Foo widget

dashboard_foo_widget .widget .widget-top {
background: #f6f7f7;
color: #1d2327;
}