Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Creating a new welcome Dashboard panel. I made a tutorial on adding a Dashboard widget: http://easywebdesigntutorials.com/creating-a-custom-dashboard-widget/
/*****************************
*Add a custom Welcome Dashboard Panel
*****************************/
function my_welcome_panel() {
?>
<div class="top-welcome-panel-content">
<div class="top-welcome-panel-logo" style="height: 120px; padding: 5px;text-align: center;">
<!-- Adds a logo top left-->
<!-- <a href="http://wordimpress.com/building-first-custom-functionality-plugin/" target="_blank" style="float: left;"><img src="<?php echo plugins_url( '../assets/img/wordimpress-logo.png', __FILE__) ?>" title="Go to the Blog entry at WordImpress on part 1 - building the first custom functionality plugin"/></a> <b>Based on and inspired by</b> <br />
<a href="http://advancedwp.org/" target="_blank" style="float: left; padding: 0 40px 20px 40px;"><img src="<?php echo plugins_url( '../assets/img/awp-logo.png', __FILE__) ?>" title="Advanced WordPress web page"/></a> Made by <br />-->
<a href="http://wordpress.org" target="_blank"><img src="<?php echo plugins_url( '../assets/img/WordPress-logo.svg.png', __FILE__) ?>" title="The official home page for WordPress" style="padding: 0; margin: 0 auto;"/></a>
</div>
<!-- using ?php_e makes the string/words translatable http://codex.wordpress.org/Function_Reference/_e -->
<div class="title-welcome-panel" style="margin: 17px 0 5px 17px;">
<h2><?php _e( 'Welcome to the backend of your WordPress web site. ' ); ?><br /></h2>
</div>
<p class="about-description" style="margin: 5px 0 5px 17px;"><?php _e( 'We use it to add content and functions to the web site. The most important sections are... ' ); ?></p>
</div>
<div class="welcome-panel-column-container">
<div class="welcome-panel-column welcome-panel-first">
<h4><?php _e( 'Add Content' ); ?></h4>
<ul>
<li><?php printf( '<div class="dashicons dashicons-admin-page">' . __( ' Add a content <a href="%1$s">page</a>.' ) . '</div>', admin_url( 'edit.php?post_type=page' ) ); ?></li>
<li><?php printf( '<div class="dashicons dashicons-admin-post">' . __( ' Add a blog <a href="%1$s">post</a> (article).' ) . '</div>', admin_url( 'edit.php' ) ); ?></li>
<li><?php printf( '<div class="dashicons dashicons-admin-media">' . __( ' Add content to the <a href="%1$s">Media Library</a>.' ) . '</div>', admin_url( 'upload.php' ) ); ?></li>
</ul>
</div>
<div class="welcome-panel-column welcome-panel-middle">
<h4><?php _e( 'Appearance' ); ?></h4>
<ul>
<li><?php printf( '<div class="dashicons dashicons-format-image">' . __( ' Change your site design using <a href="%1$s">themes</a>.' ) . '</div>', admin_url( 'themes.php' ) ); ?></li>
<li><?php printf( '<div class="dashicons dashicons-hammer">' . __( ' Change your site visually with the <a href="%1$s"> Customizer</a>.' ) . '</div>', admin_url( 'customize.php' ) ); ?></li>
<li><?php printf( '<div class="dashicons dashicons-welcome-widgets-menus">' . __( ' Manage <a href="%1$s">widgets</a> (custom areas) or <a href="%2$s">menus</a>.' ) . '</div>', admin_url( 'widgets.php' ), admin_url( 'nav-menus.php' ) ); ?></li>
<li><?php printf( '<div class="dashicons dashicons-admin-plugins">' . __( ' Add functionality with a <a href="%1$s">plugin</a>.' ) . '</div>', admin_url( 'plugin-install.php' )); ?></li>
</ul>
</div>
<div class="welcome-panel-column welcome-panel-last">
<h4><?php _e( 'Settings' ); ?></h4>
<ul>
<li><?php printf( '<a href="%s" class="dashicons dashicons-admin-generic">' . __( 'General' ) . '</a>', admin_url( 'options-general.php' ) ); ?></li></p>
<li><?php printf( '<a href="%s" class="dashicons dashicons-clipboard">' . __( ' Reading' ) . '</a>', admin_url( 'options-reading.php' ) ); ?></li>
<li><?php printf( '<a href="%s" class="dashicons dashicons-images-alt2">' . __( ' Media' ) . '</a>', admin_url( 'options-media.php' ) ); ?></li>
<li><?php printf( '<a href="%s" class="dashicons dashicons-admin-links">' . __( 'Permalink' ) . '</a>', admin_url( 'options-permalink.php' ) ); ?></li>
<!-- <li><?php printf( '<a href="%s" class="welcome-icon welcome-learn-more">' . __( 'Learn more about getting started' ) . '</a>', __( 'http://codex.wordpress.org/First_Steps_With_WordPress' ) ); ?></li> -->
</ul>
</div>
</div>
<div class="welcome-bottom-middle" style="height: 670px; padding: 5px;text-align: center;">
<h2 align=center><?php _e( 'Getting started series' ); ?></h2>
<p align=center><?php _e('Taking your first steps with WordPress' ); ?></p>
<p align=center><iframe width="853" height="480" src="https://www.youtube.com/embed/VdvOGV2eIjE?list=PLD3AB608F62AC973C" frameborder="0" allowfullscreen></iframe></p>
<p align=center><?php _e('Brought to you by.' ); ?></p>
<a href="http://easywebdesigntutorials.com/" target="_blank"><img src="<?php echo plugins_url( '../assets/img/easyweb-logo2.png', __FILE__) ?>" title="The web site for Easy Web Design Tutorials" style="padding: 0; margin: 0 auto;"/></a>
</div>
<?php
}
remove_action('welcome_panel','wp_welcome_panel');
add_action( 'welcome_panel', 'my_welcome_panel' );
/****** Dashboard widgets *******/
/* Adding Dashicons to the welcome panel: http://melchoyce.github.io/dashicons/ */
.dashicons {
padding: 11px !important;
}
.dashicons a:hover {
text-decoration: underline;
font-style: strong;
}
/* -Add Content- column dashicons */
.dashicons.dashicons-admin-page {
content: "\f105";
padding: 0 0 15px 0;
width: 250px;
text-align: left;
font: normal 16px/1 'dashicons';
}
/* Adds the post section icon */
.dashicons.dashicons-admin-post {
content: "\f109";
padding: 0 0 15px 0;
width: 250px;
text-align: left;
font: normal 16px/1 'dashicons';
}
/* Adds the Media Library icon */
.dashicons.dashicons-admin-media {
content: "\f104";
padding: 0 0 15px 0;
width: 250px;
text-align: left;
font: normal 16px/1 'dashicons';
line-height: 23px !important;
}
/* -Appearance- column dashicons */
/* Adds a theme/image icon */
.dashicons.dashicons-format-image {
content: "\f128";
padding: 0 0 15px 0;
width: 250px;
text-align: left;
font: normal 16px/1 'dashicons';
line-height: 21px !important;
}
/* Adds a customize section icon */
.dashicons.dashicons-hammer {
content: "\f308";
padding: 0 0 15px 0;
width: 250px;
text-align: left;
font: normal 16px/1 'dashicons';
line-height: 21px !important;
margin-top: 7px;
}
/* Adds a widgets and menus section icon */
.dashicons.dashicons-welcome-widgets-menus {
content: "\f116";
padding: 0 0 15px 0;
width: 250px;
text-align: left;
font: normal 16px/1 'dashicons';
line-height: 21px !important;
margin-top: 7px;
}
/* Adds the Plugins icon */
.dashicons.dashicons-admin-plugins {
content: "\f106";
padding: 0 0 15px 0;
width: 250px;
text-align: left;
font: normal 16px/1 'dashicons';
line-height: 21px !important;
margin-top: 7px;
}
/* NOT IN USE--- Adds a view your site (frontend) icon */
.dashicons.dashicons-welcome-view-site {
content: "\f115";
padding: 0 0 15px 0;
width: 250px;
text-align: left;
font: normal 16px/1 'dashicons';
}
/* -Settings- column dashicons */
/* Adds a general icon */
.dashicons.dashicons-admin-generic {
content: "\f111";
padding: 0 0 5px 0;
width: 200px;
text-align: left;
font: normal 16px/1 'dashicons';
}
/* Adds a media icon */
.dashicons.dashicons-images-alt2 {
content: "\f233";
padding: 0 0 15px 0;
width: 200px;
text-align: left;
font: normal 16px/1 'dashicons';
}
/* Adds a reading icon */
.dashicons.dashicons-clipboard {
content: "\f481";
padding: 0 0 15px 0;
width: 200px;
text-align: left;
font: normal 16px/1 'dashicons';
}
/* Adds a reading icon */
.dashicons.dashicons-admin-links {
content: "\f103";
padding: 0 0 15px 0;
width: 200px;
text-align: left;
font: normal 16px/1 'dashicons';
}
/**** welcome panel ******/
.welcome-panel {
position: relative;
/* overflow: auto; */
margin: 0;
padding: 7px 10px 0;
border: 1px solid #e5e5e5;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.04);
box-shadow: 0 1px 1px rgba(1, 7, 14, 0.88);
font-size: 13px;
line-height: 2.1em;
/* background: #0a2c5c; */
}
/* Columns - Add Content - Appearance - Settings*/
.welcome-panel-column-container {
padding: 5px 0 5px 20px;
margin: 8px 0 25px 0;
background: #edeeec;
-webkit-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
}
.welcome-panel-first {
width: 33% !important;
}
.welcome-panel-middle {
width: 33% !important;
height: 300px;
}
.welcome-panel-last {
width: 33% !important;
}
/* Hides the dismiss x close button so the user can not remove the welcome panel */
.welcome-panel-close {
/* display: none; */
}
@mmarioolive
Copy link

mmarioolive commented Jan 11, 2018

Where do I place the .css file?

@cagrimanuoglu
Copy link

cagrimanuoglu commented Jan 23, 2020

echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/blabla/blabla.css" />'; in function

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment