DynamicSite
Reference

DynamicSite

This is a place where you can quickly find some reference for the my-admin elements.
You can use them in your plugins.

Buttons


Button Primary Small

					
						<a href="#" class="button button-small button-primary">Primary Small</a>
					
				

Button Secondary Small

					
						<a href="#" class="button button-small button-secondary">Secondary Small</a>
					
				

Primary Button

					
						<a href="#" class="button button-primary">Primary Button</a>
					
				

Secondary Button

					
						<a href="#" class="button button-secondary">Secondary Button</a>
					
				

Hero Primary Button

					
						<a href="#" class="button button-primary button-hero">Hero Primary Button</a>
					
				

Hero Secondary Button

					
						<a href="#" class="button button-hero">Hero Secondary Button</a>
					
				

Button Groups

					
						<div class="button-group">
							<a href="#" class="button button-primary">Button #1</a>
							<a href="#" class="button button-primary">Button #2</a>
							<a href="#" class="button button-primary">Button #3</a>
						</div>
				
				

Tables


Checkbox
checkbox
Paragraph

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

Description

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

					
						if ( ! class_exists( 'WP_List_Table' ) ) {
							require_once( ABSPATH . 'my-admin/includes/class-wp-list-table.php' );
						}
					
				

Tabs


Settings tabs

These are native DynamicSite tabs. Unfortunately they are not supported by JS :(. Fortunately, you can code it yourself!

Here's the tutorial!

Markup:

JS:

						
							(function($) {
								$(function(){
									$('#tabs').tabs();
								});
							})(jQuery);
						
					

That's all folks!

						
							<h2 class="nav-tab-wrapper">
								<a href="javascript:void(0)" class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">Tab #01</a>
								<a href="javascript:void(0)" class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">Tab #02</a>
								<a href="javascript:void(0)" class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">Tab #03</a>
							</h2>
							<div class="tabs-content">
								<h3>Settings tabs</h3>
								<p>
									"But I must explain to you how all this mistaken idea of denouncing pleasure and 
									praising pain was born and I will give you a complete account of the system, and 
									expound the actual teachings of the great explorer of the truth, the master-builder 
									of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it 
									is pleasure, but because those who do not know how to pursue pleasure rationally 
									encounter consequences that are extremely painful.
								</p>
								<p>
									Nor again is there anyone who loves or pursues or desires to obtain pain of itself, 
									because it is pain, but because occasionally circumstances occur in which toil and 
									pain can procure him some great pleasure. To take a trivial example, which of us 
									ever undertakes laborious physical exercise, except to obtain some advantage from it? 
									But who has any right to find fault with a man who chooses to enjoy a pleasure that has 
									no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
								</p>
								<p>
									<a href="javascript:void(0)" target="_blank" class="button button-primary">Save changes</a>
								</p>
							</div>
						
					

Posts list


Title Author Categories Tags Comments Date
“Post #1” is locked
Post #1
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #2” is locked
Post #2
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #3” is locked
Post #3
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #4” is locked
Post #4
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #5” is locked
Post #5
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #6” is locked
Post #6
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #7” is locked
Post #7
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #8” is locked
Post #8
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #9” is locked
Post #9
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #10” is locked
Post #10
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
Title Author Categories Tags Comments Date

Static HTML Code

Using WP_List_Table

1. Extending WP_List_Table

									
										if ( ! class_exists( 'WP_List_Table' ) ) {
											require_once( ABSPATH . 'my-admin/includes/class-wp-list-table.php' );
										}
									
								

2. Creating a child class that extends WP_List_Table

									
										class Items extends WP_List_Table {

											public function __construct() {

												parent::__construct( [
													'singular' => __( 'Item', 'bs' ),
													'plural'   => __( 'Items', 'bs' ),
													'ajax'     => false
												] );
										}
									
								

3. The get_items() method

									
										/**
										 * Retrieve items data from the database
										 *
										 * @param int $per_page
										 * @param int $page_number
										 *
										 * @return mixed
										 */
										public static function get_items( $per_page = 5, $page_number = 1 ) {

											global $wpdb;

											$sql = "SELECT * FROM {$wpdb->prefix}items";

											if ( ! empty( $_REQUEST['orderby'] ) ) {
											$sql .= ' ORDER BY ' . esc_sql( $_REQUEST['orderby'] );
											$sql .= ! empty( $_REQUEST['order'] ) ? ' ' . esc_sql( $_REQUEST['order'] ) : ' ASC';
											}

											$sql .= " LIMIT $per_page";

											$sql .= ' OFFSET ' . ( $page_number - 1 ) * $per_page;


											$result = $wpdb->get_results( $sql, 'ARRAY_A' );

											return $result;
										}
									
								

4. The delete_item() method

									
										/**
										 * Delete a item record.
										 *
										 * @param int $id item ID
										 */
										public static function delete_item( $id ) {
											global $wpdb;

											$wpdb->delete(
											"{$wpdb->prefix}items",
											[ 'ID' => $id ],
											[ '%d' ]
											);
										}
									
								

5. The item_count() - Number of items in the database

									
										/**
										 * Returns the count of records in the database.
										 *
										 * @return null|string
										 */
										public static function record_count() {
											global $wpdb;

											$sql = "SELECT COUNT(*) FROM {$wpdb->prefix}items";

											return $wpdb->get_var( $sql );
										}
									
								

6. Text displayed when no item data is available

									
										/** Text displayed when no item data is available */
										public function no_items() {
											_e( 'No items avaliable.', 'bs' );
										}
									
								

7. The column_name method

									
										/**
										 * Method for name column
										 *
										 * @param array $item an array of DB data
										 *
										 * @return string
										 */
										function column_name( $item ) {

											// create a nonce
											$delete_nonce = wp_create_nonce( 'bs_delete_item' );

											$title = '' . $item['name'] . '';

											$actions = [
											'delete' => sprintf( 'Delete', esc_attr( $_REQUEST['page'] ), 'delete', absint( $item['ID'] ), $delete_nonce )
											];

											return $title . $this->row_actions( $actions );
										}
									
								

8. Render a column when no column specific method exists.

									
										/**
										 * Render a column when no column specific method exists.
										 *
										 * @param array $item
										 * @param string $column_name
										 *
										 * @return mixed
										 */
										public function column_default( $item, $column_name ) {
											switch ( $column_name ) {
											case 'name':
											case 'manufacturer':
												return $item[ $column_name ];
											default:
												return print_r( $item, true ); //Show the whole array for troubleshooting purposes
											}
										}
									
								

9. The column_cb method

									
										/**
										 * Render the bulk edit checkbox
										 *
										 * @param array $item
										 *
										 * @return string
										 */
										function column_cb( $item ) {
											return sprintf(
											'', $item['ID']
											);
										}
									
								

10. The method get_columns()

									
										/**
										 *  Associative array of columns
										 *
										 * @return array
										 */
										function get_columns() {
											$columns = [
											'cb'      => '',
											'name'    => __( 'Name', 'bs' ),
											'manufacturer' => __( 'Manufacturer', 'bs' ),
											'price'    => __( 'Price', 'bs' )
											];

											return $columns;
										}
									
								

11. The get_sortable_columns() method

									
										/**
										 * Columns to make sortable.
										 *
										 * @return array
										 */
										public function get_sortable_columns() {
											$sortable_columns = array(
											'name' => array( 'name', true ),
											'manufacturer' => array( 'manufacturer', false )
											'price' => array( 'price', false )
											);

											return $sortable_columns;
										}
									
								

12. get_bulk_actions()

									
										/**
										 * Returns an associative array containing the bulk action
										 *
										 * @return array
										 */
										public function get_bulk_actions() {
											$actions = [
											'bulk-delete' => 'Delete'
											];

											return $actions;
										}
									
								

13. The prepare_items() method

									
										/**
										 * Handles data query and filter, sorting, and pagination.
										 */
										public function prepare_items() {

											$this->_column_headers = $this->get_column_info();

											/** Process bulk action */
											$this->process_bulk_action();

											$per_page     = $this->get_items_per_page( 'items_per_page', 5 );
											$current_page = $this->get_pagenum();
											$total_items  = self::record_count();

											$this->set_pagination_args( [
											'total_items' => $total_items,
											'per_page'    => $per_page
											] );


											$this->items = self::get_items( $per_page, $current_page );
										}
									
								

14. Function process_bulk_action()

									
										public function process_bulk_action() {

											// Detect when a bulk action is being triggered...
											if ( 'delete' === $this->current_action() ) {

											// In our file that handles the request, verify the nonce.
											$nonce = esc_attr( $_REQUEST['_wpnonce'] );

											if ( ! wp_verify_nonce( $nonce, 'bs_delete_item' ) ) {
												die( 'Go get a life script kiddies' );
											}
											else {
												self::delete_item( absint( $_GET['item'] ) );

												wp_redirect( esc_url( add_query_arg() ) );
												exit;
											}

											}

											// If the delete bulk action is triggered
											if ( ( isset( $_POST['action'] ) && $_POST['action'] == 'bulk-delete' ) || ( isset( $_POST['action2'] ) && $_POST['action2'] == 'bulk-delete' ) ) {

											$delete_ids = esc_sql( $_POST['bulk-delete'] );

											// loop over the array of record IDs and delete them
											foreach ( $delete_ids as $id ) {
												self::delete_item( $id );

											}

											wp_redirect( esc_url( add_query_arg() ) );
											exit;
											}
										}
									
								

Spinners


@1x

HTML spinner (20x20)

					
						<span class="spinner is-active"></span>
					
				

spinner.gif (20x20)

					
						<img src="<?php echo esc_url( get_admin_url() . 'images/spinner.gif' ); ?>" />
					
				

loading.gif (16x16)

					
						<img src="<?php echo esc_url( get_admin_url() . 'images/loading.gif' ); ?>" />
					
				

wpspin_light.gif (16x16)

					
						<img src="<?php echo esc_url( get_admin_url() . 'images/wpspin_light.gif' ); ?>" />
					
				

loader.gif (31x31)

					
						<img src="<?php echo esc_url( includes_url() . 'js/tinymce/skins/lightgray/img//loader.gif' ); ?>" />
					
				

loadingAnimation.gif (416x26)

					
						<img src="<?php echo esc_url( includes_url() . 'js/thickbox/loadingAnimation.gif' ); ?>" />
					
				

@2x

spinner-2x.gif (40x40)

					
						<img src="<?php echo esc_url( get_admin_url() . 'images/spinner-2x.gif' ); ?>" />
					
				

wpspin_light-2x.gif (32x32)

					
						<img src="<?php echo esc_url( get_admin_url() . 'images/wpspin_light-2x.gif' ); ?>" />
					
				

Notices


Default notice

Default notice

					
						<div class="notice"><p>Default notice</p></div>
					
				

Default dismissible notice

					
						<div class="notice is-dismissible"><p>Default dismissible notice</p></div>
					
				

Info

Info notice

					
						<div class="notice notice-info"><p>Info notice</p></div>
					
				

Info notice dismissible

					
						<div class="notice notice-info is-dismissible"><p>Info notice dismissible</p></div>
					
				

Info notice alt

					
						<div class="notice notice-info alt"><p>Info notice alt</p></div>
					
				

Success

Success notice

					
						<div class="notice notice-success"><p>Success notice</p></div>
					
				

Success notice dismissible

					
						<div class="notice notice-success is-dismissible"><p>Success notice dismissible</p></div>
					
				

Success notice alt

					
						<div class="notice notice-success notice-alt"><p>Success notice alt</p></div>
					
				

Warning

Warning notice

					
						<div class="notice notice-warning"><p>Warning notice</p></div>
					
				

Warning notice dismissible

					
						<div class="notice notice-warning is-dismissible"><p>Warning notice dismissible</p></div>
					
				

Warning notice alt

					
						<div class="notice notice-warning notice-alt"><p>Warning notice alt</p></div>
					
				

Error

Error notice

					
						<div class="notice notice-error"><p>Error notice</p></div>
					
				

Error notice dismissible

					
						<div class="notice notice-error is-dismissible"><p>Error notice dismissible</p></div>
					
				

Error notice alt

					
						<div class="notice notice-error notice-alt"><p>Error notice alt</p></div>
					
				

Dashicons


Dashicons are over 250 icons, that can cover most, if not all of your needs!


You can use it as HTML...

				
					<span class="dashicons dashicons-format-status"></span>
				
			

...or in CSS...

				
					content: "\f130";
				
			

...or as a Glyph:

Get more dashicons!

CSS Blokken


GRID Methode

De GRID methode is een van de meest moderne methoden

HTML Code:

    <div class="container">
      <div class="item">
      </div>
      <div class="item">
      </div>
    </div>

CSS Code:

 .container {
        display: grid;
        grid-template-columns: 100px 100px; 
        grid-template-rows: 100px;
        grid-column-gap: 5px;
      }
      
      .item {
      background: #ce8888;     
      }





FLEXBOX Methode

De FLEXBOX methode is een andere veel gebruikte methode

HTML Code:

 <div class="container">
    <div class="item">
    </div>
    <div class="item">
    </div>
 </div>	
CSS Code:

<style>
.container {
  display: flex;
}
.item {
  background: #05670A;
  flex-basis: 100px;
  height: 100px;
  margin: 5px;
}
</style>





FLOAT Methode

De FLOAT methode is een andere veel gebruikte methode

HTML Code:

  <div class="element">
  </div>
  <div class="element">
  </div>
CSS Code:

<style>
.element {
  float: left;
  width: 100px;
  height: 100px;
  background: #ce8888;
  margin: 5px 
}
</style>











TABLE Methode

De TABLE methode is wat oudere maar goed werkende methode.

HTML Code:

  <table class="container">
    <tr class="table-row">
     <td class="table-cell">
      
      </td>
      <td class="table-cell">
       
      </td>
    </tr>
  </table>
CSS Code:

<style>
.container {
  display: table;
  width: 20%;
}
.table-row {
 
  display: table-row;
  height: 100px;
}
.table-cell {
  border: 1px solid;
  background: #ce8888;
  display: table-cell;
  padding: 2px;
}
</style>





HTML Symbols


Reserved entities, symbols and characters in HTML

This table shows a list of reserved HTML entities with their associated character and description.

Character Entity name Description
" &quot; quotation mark
' &apos; apostrophe 
& &amp; ampersand
< &lt; less-than
> &gt; greater-than
  &nbsp; non-breaking space
¡ &iexcl; inverted exclamation mark
¢ &cent; cent
£ &pound; pound
¤ &curren; currency
¥ &yen; yen
¦ &brvbar; broken vertical bar
§ &sect; section
¨ &uml; spacing diaeresis
© &copy; copyright
ª &ordf; feminine ordinal indicator
« &laquo; angle quotation mark (left)
¬ &not; negation
­ &shy; soft hyphen
® &reg; registered trademark
¯ &macr; spacing macron
° &deg; degree
± &plusmn; plus-or-minus 
² &sup2; superscript 2
³ &sup3; superscript 3
´ &acute; spacing acute
µ &micro; micro
&para; paragraph
· &middot; middle dot
¸ &cedil; spacing cedilla
¹ &sup1; superscript 1
º &ordm; masculine ordinal indicator
» &raquo; angle quotation mark (right)
¼ &frac14; fraction 1/4
½ &frac12; fraction 1/2
¾ &frac34; fraction 3/4
¿ &iquest; inverted question mark
× &times; multiplication
÷ &divide; division
À &Agrave; capital a, grave accent
Á &Aacute; capital a, acute accent
 &Acirc; capital a, circumflex accent
à &Atilde; capital a, tilde
Ä &Auml; capital a, umlaut mark
Å &Aring; capital a, ring
Æ &AElig; capital ae
Ç &Ccedil; capital c, cedilla
È &Egrave; capital e, grave accent
É &Eacute; capital e, acute accent
Ê &Ecirc; capital e, circumflex accent
Ë &Euml; capital e, umlaut mark
Ì &Igrave; capital i, grave accent
Í &Iacute; capital i, acute accent
Î &Icirc; capital i, circumflex accent
Ï &Iuml; capital i, umlaut mark
Ð &ETH; capital eth, Icelandic
Ñ &Ntilde; capital n, tilde
Ò &Ograve; capital o, grave accent
Ó &Oacute; capital o, acute accent
Ô &Ocirc; capital o, circumflex accent
Õ &Otilde; capital o, tilde
Ö &Ouml; capital o, umlaut mark
Ø &Oslash; capital o, slash
Ù &Ugrave; capital u, grave accent
Ú &Uacute; capital u, acute accent
Û &Ucirc; capital u, circumflex accent
Ü &Uuml; capital u, umlaut mark
Ý &Yacute; capital y, acute accent
Þ &THORN; capital THORN, Icelandic
ß &szlig; small sharp s, German
à &agrave; small a, grave accent
á &aacute; small a, acute accent
â &acirc; small a, circumflex accent
ã &atilde; small a, tilde
ä &auml; small a, umlaut mark
å &aring; small a, ring
æ &aelig; small ae
ç &ccedil; small c, cedilla
è &egrave; small e, grave accent
é &eacute; small e, acute accent
ê &ecirc; small e, circumflex accent
ë &euml; small e, umlaut mark
ì &igrave; small i, grave accent
í &iacute; small i, acute accent
î &icirc; small i, circumflex accent
ï &iuml; small i, umlaut mark
ð &eth; small eth, Icelandic
ñ &ntilde; small n, tilde
ò &ograve; small o, grave accent
ó &oacute; small o, acute accent
ô &ocirc; small o, circumflex accent
õ &otilde; small o, tilde
ö &ouml; small o, umlaut mark
ø &oslash; small o, slash
ù &ugrave; small u, grave accent
ú &uacute; small u, acute accent
û &ucirc; small u, circumflex accent
ü &uuml; small u, umlaut mark
ý &yacute; small y, acute accent
þ &thorn; small thorn, Icelandic
ÿ &yuml; small y, umlaut mark

XonlineShop


WooCommerce plugins omzetten naar XonlineShop:

Class:
De class die als basis gebruikt wordt heet niet WooCommerce maar OnlineShop
Deze is gedefinieerd in /xonlineshop/includes/class-woocommerce.php

Vermoedelijk moet de vergelijkbare code als onderstaande aanpassen.
if ( class_exists('WooCommerce') ) { ... } naar if ( class_exists('OnlineShop') ) { ... } ( dus niet ('XonlineShop')

Vertaling:
De vertalig van de plugin zoekt mogelijk naar de installatie van de webshop, je moet daarom het onderstaande wijzigen:
return in_array('woocommerce/woocommerce.php', $active_plugins) || array_key_exists('woocommerce/woocommerce.php', $active_plugins) || class_exists('WooCommerce');
veranderen in:
return in_array('xonlinesop/load.php', $active_plugins) || array_key_exists('woocommerce/woocommerce.php', $active_plugins) || class_exists('OnlineShop');

Plugins


Plugins

Dit onderdeel gaat over het omzetten van (mu)plugins van WordPress naar DynamicSite

CSS en Javascrip laden in plugin/mu-plugin:
Vaak gebeurt het dat css en javascript bestanden niet laden als je een plugin wilt gebruiken als mu-plugin
dat komt omdat de path toewijzing in de code van de plugin niet overeenkomt met het path als je de plugin
in de mu-plugins map hebt gezet.

Met onderstaande methode maakt het niet meer uit of je plugin normaal of mu-plugin is:

Pas je originele code aan, voorbeeld:
wp_enqueue_style( 'dra-admin-css', plugins_url( 'css/admin.css', $this->base_file_path ), array(), self::VERSION, 'all' );
wp_enqueue_script( 'dra-admin-header', plugins_url( 'js/admin-header.js', $this->base_file_path ), array( 'jquery' ), self::VERSION, false );
wp_enqueue_script( 'dra-admin-footer', plugins_url( 'js/admin-footer.js', $this->base_file_path ), array( 'jquery' ), self::VERSION, true );

             
naar: 

wp_enqueue_style('dra-admin-css', get_plugin_file_url('css/admin.css', $this->base_file_path), array(), self::VERSION, 'all');
wp_enqueue_script('dra-admin-header', get_plugin_file_url('js/admin-header.js', $this->base_file_path), array('jquery'), self::VERSION, false);
wp_enqueue_script('dra-admin-footer', get_plugin_file_url('js/admin-footer.js', $this->base_file_path), array('jquery'), self::VERSION, true);

Vertalingen automatisch laden in plugin/mu-plugin:
vervang onderstaande code zodat de vertaling altijd geladen wordt.

load_plugin_textdomain( 'wp-dashboard-notes', false, basename( dirname( __FILE__ ) ) . '/languages' );

door

load_plugin_textdomain('wp-dashboard-notes', false, get_textdomain_languages_path());


Hoe maak je een admin notice die na gelezen en afgevinkt niet meer getoond wordt.

add_action('admin_notices', 'example_admin_notice');
function example_admin_notice() {
    global $current_user ;
        $user_id = $current_user->ID;

        // Check that the user hasn't already clicked to ignore the message
    if ( ! get_user_meta($user_id, 'example_ignore_notice') ) {
        echo '<div class="updated"><p>';
        printf(__('Dit is de tekst die aan de admin getoond wordt'), '?example_nag_ignore=0');
        echo "</p></div>";
    }
}

Site Help


Op deze pagina vindt je informatie betreft het bijwerken van deze help site.
je kunt deze informatie gebruiken bij het aanmaken van nieuwe pagina's.


<p> tags </p>

Wanneer je een tekst wilt weergeven zet je deze standaard tussen <p> tags </p>
Als je geen <p> tags </p> gebruikt worden de letters op de pagina kleiner.



Classes voor de <p> tags </p>


Dit is een voorbeeld van hoe je tekst er uit kan zien.

Dit is een voorbeeld van hoe je tekst er uit kan zien. ( Zonder tags )

Dit is een voorbeeld van hoe je tekst er uit kan zien.


<p>Dit is een voorbeeld van hoe je tekst er uit kan zien.</p>

Dit is een voorbeeld van hoe je tekst er uit kan zien.

- Met extra grote boven en onder marge -

<p class="text-subtitle">Dit is een voorbeeld van hoe je tekst er uit kan zien.</p>

Dit is een voorbeeld van hoe je tekst er uit kan zien.


<p class="text-description">Dit is een voorbeeld van hoe je tekst er uit kan zien.</p>

Dit is een voorbeeld van hoe je tekst er uit kan zien.


<p class="medium-text">Dit is een voorbeeld van hoe je tekst er uit kan zien.</p>

Dit is een voorbeeld van hoe je tekst er uit kan zien.


<p class="large-text">Dit is een voorbeeld van hoe je tekst er uit kan zien.</p>

Dit is een voorbeeld van hoe je tekst er uit kan zien.


<p class="text-strong">Dit is een voorbeeld van hoe je tekst er uit kan zien.</p>

Dit is een voorbeeld van hoe je tekst er uit kan zien.


<p class="text-light">Dit is een voorbeeld van hoe je tekst er uit kan zien.</p>

Dit is een voorbeeld van hoe je tekst er uit kan zien.


<p class="text-center">Dit is een voorbeeld van hoe je tekst er uit kan zien.</p>


Enorm Grote Letters

Voor het geval je de behoefte hebt aan hele grote letters....

BIG TITLE


<h1 class="big-title">BIG TITLE</h1>



DynamicSite Items

Je kunt de meeste items uit deze site ook op de site zelf gebruiken, zo werkt ook esc_url en includes_url en zou je bijvoorbeeld een spinner kunnen weergeven.



Door middel van deze code:

						<img src="<?php echo esc_url( includes_url() . 'js/tinymce/skins/lightgray/img//loader.gif' ); ?>" />
			



Horizontale Regel

Een <hr> tag is standaard grijs, maar met class="xxx" kun je dat veranderen.

Grijs
Zwart
Rood
Blauw
Groen
Dots



HTML Encoderen

Indien je in deze website code wit weergeven kun je dat doen tussen deze tags:


<pre><code class="language-markup"> 
- YOUR CODE HERE -
</code></pre>

Je kunt encoderen met onderstaand hulpmiddel:







Beveiling met htaccess

Deze website is beveiligd met een loginnaam en wachtwoord, de code hiervoor staat in .htaccess


AuthType Basic  
AuthName "restricted area"  
# You should be able to to echo out a phpinfo(); to find this path
AuthUserFile /home/xonline/domains/xonline.nl/public_html/dynamicsite/.htpasswd  
require valid-user

Het wachtwoord vindt je in .htpasswd

dynamicsite:$apr1$A/35cejU$GOKu6o.hz8EuKhi8zQngA1

Een nieuw wachtwoord (Beveiligd) kun je genereren via deze tool: Xonline .htpaswd generator




Bootstrap

Ook bootstrap is beschikbaar, je ziet hieronder hoe je deze kunt laden.
Je ziet dat er slechts een paar standaard classes nodig zijn om het uiterlijk te bepalen.

Bijvoorbeeld deze tabel:
Character Entity name Description
" &quot; quotation mark
ÿ &yuml; small y, umlaut mark
Met deze code:
	
<link href="wp/my-admin/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
   
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped table-hover">
                <thead>
                <tr>
                    <th>Character</th>
                    <th>Entity name</th>
                    <th>Description</th>
                </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>&quot;</td>
                        <td>&amp;quot;</td>
                        <td>quotation mark</td>
                    </tr>
                    <tr>
                        <td>&yuml;</td>
                        <td>&amp;yuml;</td>
                        <td>small y, umlaut mark</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>                   	                    	



Font Awesome

Font Awesome kan vanaf de xonline website worden geladen: ( LINK )

	
  <link href="https://xonline.nl/fontawesome/css/fontawesome.css" rel="stylesheet">
  <link href="https://xonline.nl/fontawesome/css/brands.css" rel="stylesheet">
  <link href="https://xonline.nl/fontawesome/css/solid.css" rel="stylesheet">

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa-camera-retro"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul> 


  • List icons
  • can be used
  • as bullets
  • in lists

Of als simpele weergave waarbij 'fa-2x' staat voor 2x vergroten.


	  
<i class="fa fa-camera-retro fa-2x"></i> fa-2x



Credits

DynamicSite



All information on this website is for internal use only