Hey all,
I wanted to add a social link to the header for LinkedIn, but also wanted to add the option into the Arras theme settings so others could easily change it...so I went ahead and figured out how. Thought I'd add a simple step-by-step tutorial here so others can do the same.
This is for Arras v1.5, btw...
Note: You can replace the word 'linkedin' with the name of whatever social networking site you want to add.
Here are the files you'll need to edit:
library/admin/options.php
library/admin/templates/arras-general.php
user.css
library/template.php
And here is what you need to do for each:
STEP 1: Edit options.php
Line 7: After
add:
Line 121: After
$this->facebook_profile = (string)$_POST['arras-facebook'];
add a new line:
$this->linkedin_profile = (string)$_POST['arras-linkedin'];
STEP 2: Edit arras-general.php
After Lines 52-58, add these new lines:
<tr valign="top">
<th scope="row"><label for="arras-linkedin"><?php _e('LinkedIn Profile (URL)', 'arras') ?></label></th>
<td>
<?php echo arras_form_input(array('name' => 'arras-linkedin', 'id' => 'arras-linkedin', 'class' => 'code', 'size' => '65', 'value' => arras_get_option('linkedin_profile') )) ?><br />
<?php _e('Link to your LinkedIn profile.', 'arras') ?>
</td>
</tr>
STEP 3: Edit user.css
Add:
.quick-nav #linkedin { background: url(images/linkedin.png) no-repeat; }
Because you're adding icons to your nav bar, you'll want to prevent your page links from running into them. For this reason, you'll need to do some math and calculate the width of the added icons (16px is the size of the icons that come with this theme, +8px for padding).
You then need to subtract that number from 770px to determine the max-width of your nav menu.
Here is the code for adding just one new, 16px wide link:
#nav .sf-menu { max-width: 746px; }
Optional: I wanted to use larger icons, so I also added:
.quick-nav a:link, .quick-nav a:visited { margin-top: -6px; width: 24px; height: 24px; }
STEP 4: Edit template.php
After Lines 308-311, add these new lines:
<?php $linkedin_profile = arras_get_option('linkedin_profile'); ?>
<?php if ($linkedin_profile != '') : ?>
<li><a id="linkedin" title="<?php printf( __( '%s LinkedIn', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="<?php echo $linkedin_profile ?>" target="_blank"><?php _e('LinkedIn', 'arras') ?></a></li>
<?php endif ?>
STEP 5: Upload new social network icon
You'll need to create an icon image file. I created 'linkedin.png' for the example above, which gets referenced in the CSS code in Step 3. The standard link size for Arras is 16 x 16 px.
Make sure you name your file the same as you indicate in your CSS, then upload it to the theme/images folder. I've attached the social link images I created, which are larger (24 x 24 px).
And that's it!
Now when you edit your Arras options, under the General tab you will see a spot to enter your new social network link.
Last edited by xtventures (2010-11-18 10:51:15)
Post's attachmentssocial-links.zip 18.56 kb, 13 downloads since 2010-11-18
You don't have the permssions to download the attachments of this post.
