Shown above is the header I created within the Beans theme for the website of Tees Valley Arts.
The goal here was to mimic the old layout created for the Tees Valley Arts website using the Genesis theme using the Beans theme instead.
This required a widget area to the right of the site title for the use of the plugin “Simple social icons” (although I may later make an improved version that doesn’t require the plugin at all).
Functions
The code for setting everything to it’s proper place:
add_action( 'widgets_init', 'widget_areas' );
/**
* Add widget area.
*/
function widget_areas() {
beans_register_widget_area( array(
'name' => 'Right',
'id' => 'right',
'description' => 'Widgets in this area will be shown on the right side
of the site title (put simple social icons here).',
'beans_type' => 'grid'
) );
}
/**
* Display the header widget area at the end of the header.
*/
add_action( 'beans_site_branding_after_markup', 'header_widget_area' );
/**
* Header widget area layout/style.
*/
function header_widget_area() {
?>
<?php echo beans_widget_area( 'right' ); ?>
<?php
}
/**
* Moves Beans "Primary Menu" to the left side of the site title.
*/
beans_modify_action_hook( 'beans_primary_menu', 'beans_header_prepend_markup' );
Style
The code for centring the site title between a stylised menu and a set of spaced out social icons:
/**
* Sets up the layout of the header
*/
//social media icons
body > div.tm-site > header > div > div.uk-grid > div > div > div > ul.alignright {
margin-left:0px;
margin-right:0px;
padding-left:0px;
}
body > div.tm-site > header > div > div.uk-grid > div > div > div > ul.alignright li {
display: inline;
float:right;
width:25px;
height:25px;
padding-left:30px!important;
}
body > div.tm-site > header > div > div.uk-grid > div > div > div > ul.alignright li a svg {
width:25px;
height:25px;
}
//site title
body > div.tm-site > header > div > div.tm-site-branding {
display: inline;
}
body > div.tm-site > header.tm-header .uk-grid {
margin-left:0px;
margin-right:0px;
padding-left:0px;
padding-right:0px;
float:right;
}
body > div.tm-site > header.tm-header .uk-grid .uk-width-medium-1-1 {
width:232.188px;
margin-left:0px;
margin-right:0px;
padding-left:0px;
padding-right:0px;
}
//primary menu
body > div.tm-site > header.tm-header .tm-primary-menu {
margin-right:0px;
margin-left:0px;
float:left;
}
body > div.tm-site > header.tm-header .uk-container-center {
padding-left:0px;
padding-right:0px;
margin-left:0px;
margin-right:0px;
max-width:100%;
}
body > div.tm-site > header.tm-header {
margin-left:0px;
margin-right:0px;
text-align:center;
padding-left:8%;
padding-right:8%;
}
Widget
Then simply place the simple social icons plugin within the widget area.
Bear in mind that the plugins style settings will not function outside of a post/page but the style handles that.
Of course this solution doesn’t look good on mobile yet, so I’ll probably do another post on that when I’ve fixed it.
Then simply compress it (as a Zip file) and install it onto your website.
Make sure you have some FTP software to access your websites files when you inevitably mess up and crash your website and need to delete your broken plugin to make your website function again (I recommend Cyberduck).
A compilation of embedded posts containing useful information on plugin editing (both code and general tips) I’ve made use of at one point or another. I’m mostly posting this so I’ll have access to all this work anywhere I go. But maybe this will be of use to someone in the future.
So a while ago while doing some volunteer work I fiddled around with making the website adding support for “Co-Authors Plus” in embedded posts as outlined in Embed Customisation Supporting “Co-Authors Plus”.
I found that my solutions all looked rather messy.
I presented those initial attempts to my boss and after making a few changes based on his feedback this is what we eventually settled on.
/**
* Removes the title (David Stockdale).
*/
add_filter('embed_site_title_html','__return_false');
/**
* Adds the author's names (David Stockdale).
*/
add_action( 'embed_content', 'embed_author' );
/**
* Adds the author div to the embed iframe (David Stockdale).
*/
function embed_author() {
$output .= '<div class="wp-embed-author">By:';
$coauthors = get_coauthors();
$loopcheck = 0;
foreach( $coauthors as $coauthor ):
/**
* Checking if it's the first line to decide if it should be seperated with a comma.
*/
if($loopcheck == 0) {
$loopcheck++;
} else {
$output .= ',';
}
$output .= ' ';
$authorArchiveLink = get_author_posts_url($coauthor->ID);
$output .= "<a href=$authorArchiveLink> $coauthor->user_firstname $coauthor->user_lastname</a>";
endforeach;
$output .= '.';
$output .= '</div>';
echo $output;
}
By removing the author portraits I was able to create a cleaner looking list.
I then styled it to fit the websites theme of links in a specific colour.
/**
* Customises the style/colours of embedded posts.
*/
add_action( 'embed_head', 'embed_styles' );
/**
* Embed the plugin's custom styles.
*/
function embed_styles() {
echo <<<CSS
<style>
.wp-embed-author {
margin-top: 0.5em;
}
.wp-embed-author a {
color: #a6191a;
}
.wp-embed-author a:hover {
color: #454545;
}
</style>
CSS;
}
All in all a much neater look that is far more consistant with the website as a whole.
Another day of volunteer work, another nugget of knowledge learned.
To enable post-like excerpts on your website go into the functions.php file of your theme (in theme editor) or a site-specific plugin (in plugin editor).
Add the following code at the end:
add_post_type_support( 'page', 'excerpt' );
This code modifies the default WordPress content type ‘page’ to add support for excerpts.
The final stage in making it as easy as possible to display a number contained by a cell within a Google Spreadsheet as a scrolling number: making a plugin.
This is only Version 1.0.0 of the plugin and it is definitely not documented properly (I used both WordPress-Plugin-Boilerplate as a starting point and it includes NumScroller as part of the plugin so I need to find the correct way to comment/document/credit these to meet industry standards) but it works!
All you need to do is update your API Keys and Spreadsheet IDs:
/**
* Stores/updates the array of Api Keys within the options database table.
*/
update_option( 'api_key_array', array(1 => "XXX_XXX"), true );
/**
* Stores/updates the array of SpreadSheet IDs within the options database table.
*/
update_option( 'spreadsheet_id_array', array(1 => "XXX-XXX-XXX",
2 =>"XXX-XXX"), true );