Shortcode: [social] – X-Plus
Social Buttons
Social Buttons – [ social] Shortcode and Widget
[ social font_size=nn number='showcount' tag='wrap-tag' color=#000000 class=classname names=list,of,names]
- font_size – Font-size of the icon (in px, don’t include px). Will use text default font-size if not specified.
- number< – Number if icons to show. Displayed in order specified on options below.
- tag – If specified, each icon is wrapped with this HTML tag.
- color – If specified, icon will be displayed with this color (including :hover). Otherwise, uses theme link colors.
- class – a class name to wrap the entire group of social icons displayed
- names – comma separated, ordered list of names of social icon to display, even if Use not checked.
The [ social]
shortcode allows you to add Social site buttons with links to your account or page.
To display social buttons, check the “Use” checkbox for buttons you want to show. You must provide the full URL to your account link. For example: http://facebook.com/wpweaver
. You can specify the display order in the Display Order column using the WordPress ordering method used to order your static pages: 10,15,30, etc. Lower numbers display first – they don’t have to be sequential.
You can also use the names parameter to specify a list of icons to display, even if Use is not checked. These will be displayed in the order listed. You still must provide the account link.
You can also change the “Social Site Description”, which is the text displayed when the user hovers over the icon.
Social buttons are really Genericons Font Icons, and are thus a “text” character link, and will be displayed using the link color options specified for the location you use the social fonts – either via the shortcode or in a widget. This also means the size of the social icons are controlled by the normal text font-size. The Social Widget, however, is set to 36px by default, but can be overridden with custom CSS using the .weaverxplus_social class on the widget.
A note about the URL: The exact form of the URL you add for each button will depend on the service in question. Almost all of these services allow you to set up an account, and then provide a URL address for other people to view your account’s public page.
Using in Menu Bar
The
shortcode can be used to display your social links in the menu bars using the Left or Right HTML areas. Simply insert the shortcode in the menu bar area. The social icons will appear using the menu bar default font and link settings. If the link color doesn’t look good on your menu bar, add something like:a {color:white;}
to the HTML:Text Color CSS+. Note it is necessary to add the ‘a’ before the {color:white} because the icons are really text links. If you want to also specify a hover color, use something like:
a {color:white;} %selector% a:hover{color:red;}
Note: you can click a service’s icon on the list to open the site’s main home page if you want to learn more about a particular service.