Admin area for Javascript not showing

Hi @dzaho,

I can’t think of any reason for those locations to be missing there unless there’s some type of conflict with another plugin. The “frontend” mention next to the Site Wide locations has been added at the same time with the Admin locations. The admin locations don’t have any restrictions as to what code type can be used for them.

Can you please check if the same issue happens with all the WPCode snippets disabled and with other plugins disabled?

Yes, you are right. It is a CSS WPCode snippets when assigned to Admin area location disables the option for Admin area for Javascript.

How is that possible and how I can fix it. I still want to load the CSS snippet in Admin only.

Thank you

Hi @dzaho,

If disabling the CSS snippet makes the options available again it might be that your snippet is interfering with the elements added through the styles.

I’m not sure how that is happening since those elements don’t have a css class that is specific to them but it depends on your CSS code – if you can share the code of your snippet we can try to replicate on our end.

Here are the code snippets

/* HIDE Monster Icon */
.monsterinsights-quick-links, .monsterinsights-float-right {
	display: none!important;
}
#monsterinsights_reports_widget {
	padding: 50px 0;
}

#monsterinsights_reports_widget .ui-sortable-handle {
	display: none!important;
}
/* Replace plugin logo */
.monsterinsights-logo-area img {
    content: url('https://www.domain.com/wp-content/uploads/2024/11/Nation-Media-Dashboard-FX.png');
    /* Adjust size if needed */
    width: 200px; /* Adjust width */
    height: auto; /* Maintain aspect ratio */
}

#adminmenu .udb-admin-logo-wrapper a {
	padding: 8px 6px!important; 
}
.sticky-wcp-custom-form {
	margin-top: 50px;
}

.ui-resizable .wcp-container {
	background-image: url(https://www.domain.com/wp-content/uploads/2024/11/Nation-Media-File-Organizer.png);
    background-size: 70%;
    background-position: top;
    height: 90px !important;
    display: block;
    background-repeat: no-repeat;
	margin-top: 25px;
}

.event-img {
	padding-left: 20px;
    top: 10px;
    position: absolute;
}
/*
.index-php h1	{
	display: flex !important;
	padding-left:5px;
}

.logo-text-wrapper {
     display: flex;
     align-items: center;
     gap: 10px;
}

.logo-text-wrapper img {
     vertical-align: middle;
}
*/
.monsterinsights-navigation-bar .monsterinsights-reports-navigation li:nth-last-child(-n+3) {
    display: none!important;
}
.monsterinsights-navigation-bar .monsterinsights-reports-navigation li:nth-child(3),
li:nth-child(5), li:nth-child(6),
li:nth-child(7) {
    display: none!important;
}

jQuery(document).ready(function($) {
    // Get the user's first name from PHP
    var userFirstName = '<?php echo do_shortcode("[user_first_name]"); ?>';
    
    // Update the header in .index-php page with image and welcome message
    $('.index-php h1').html(<br>        <div class="logo-text-wrapper"><br>            <a href="https://domain.com/technology/#dashboard-fx/" target="_blank"><br>                <img width="200px" src="https://www.domain.com/wp-content/uploads/2024/11/Nation-Media-Dashboard-FX.png" alt="Nation Media Logo"><br>            </a><br>            <h1>Hello ${userFirstName}, Welcome to the Nation Media Dashboard FX!</h1><br>        </div><br>);
});

// Link the Logos
jQuery(document).ready(function($) {
    // Remove any existing anchor tags around the logo
    $('.monsterinsights-logo-area').unwrap('a');

    // Wrap the logo in your new anchor tag
    $('.monsterinsights-logo-area').wrap('<a  target="_blank"></a>');
});

Thank you for sharing the code @dzaho

Your code is hiding all li elements with the index 5, 6 & 7, specifically this code:

.monsterinsights-navigation-bar .monsterinsights-reports-navigation li:nth-child(3),
li:nth-child(5), li:nth-child(6),
li:nth-child(7) {
    display: none!important;
}

If you want to make the rule apply just for a specific parent element you have to repeat the parent element for each of the rules like you have for the element with index 3: .monsterinsights-navigation-bar .monsterinsights-reports-navigation li:nth-child(3) you need to have that for each element like this: .monsterinsights-navigation-bar .monsterinsights-reports-navigation li:nth-child(5)…

That resolved the issue. Thank you!

Another issue in the same JavaScript snippet is that the PHP is commented out in the browser console and it does not output.

var userFirstName = '<?php echo do_shortcode("[user_first_name]"); ?>';

Hi @dzaho,

You can’t use the PHP code like that in a JavaScript snippet.

If you want to use PHP like the you can use the Universal Code Type and wrap the code in <script> tags.

Thank you so much for your support. It all worked.